-1

I work with angularjs and phonegap. I want to create an UI containing a slider.

The problem is, when I use the slider, the content scrolls to the left or to the right (see the pictures).

Normal state

Normal state

When I try to use the slider

When I try to use the slider

Catching the touchmove event on the body is not acceptable because I want vertical scroll to work, though.

Thx all.

Spikynuts
  • 1
  • 2

1 Answers1

2

do you mean the right scroll bar?
To disable the horizontal scrolling use <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
With this Tag you can't scroll in horizontal way or zoom in.
Or you try overflow-x: hidden; or overflow-y: hidden; to hide the overflow in one direction.
Hope that helped you.

Luca Jung
  • 1,440
  • 11
  • 25
  • I rate the `overflow-x: hidden;` suggestion :) Nice answer – M Zeinstra Jun 16 '16 at 14:51
  • i use this meta and that dont work, and on my css body i have overflow: hidden. My scrollbar is create with the librairy iscroll – Spikynuts Jun 16 '16 at 14:53
  • I apply on the body and the element is on my body. i forget one information, that works on Android phone or tablet, the problem appear only on IOS device. – Spikynuts Jun 16 '16 at 15:08
  • Do you mean the space between border an your content? – Luca Jung Jun 16 '16 at 15:56
  • Can you set the html an body width: 100vw; and overflow-x: hidden; try this out, and tell me the result or send me a link of the project, so I have better overview of the problem. – Luca Jung Jun 17 '16 at 12:54