angularuser-interfacesemantic-uisemantic-ui-cssng2-semantic-ui

How to prevent an Angular 2 pages from sliding to sides on dragging content, or scrolling?


Got an Angular 2 app.

When I scroll the page, the page behaves like I try to swipe a little it to the sides, and a horizontal rubber band effect is happening. An effect that seems like I'm trying to swipe the page to the sides.

This problem getting worse when I really swiping an element, like a carousel. Swiping the carousel to the sides, dragging the page together with the carousel.

How can prevent this from happening?


Solution

  • My problem was actually different. It caused by the implementation of semantic-ui grid system.

    It got negative margins, margin-left:-15px; margin-right:15px and on mobile its making the screen to move horizontally on dragging.

    I solved it by placing overflow:hidden over the main container. Simple as that.