I want my webpage to be only scrollable vertically. So I've set overflow-x:hidden;
to my .page-wrapper
. My .page-wrapper
holds two absolute positioned layers on top of each other. When clicking a button the top layer is sliding to the side (as mentioned position:absolute;
) and makes the website actually wider than the 100% viewport witdh - so it would be scrollable horizontally.
To prevent the horizontal scrolling I've set overflow-x:hidden
to my .page-wrapper
.
If I do that, the vertical scrolling of my normal content is really buggy and doesn't work correctly.
Any ideas how to fix that?
UPDATE
-webkit-overflow-scrolling: touch;
seems to work fine as long no javascript is changing any heights. See the following example. What I'm doing here is updating the height of the body to the contents-height of the second layer - so there is no empty scrolling space once the upper layer is slid to the left. When sliding the upper layer back I remove the attribte style
(which sets the height) from the body. After doing that the scroll is choppy again.
function showInfos(show) { if ( show ) { $('#videos').addClass('slid'); $('body').height($('#infos > .content').height()); $('#page-wrap').addClass('no-overflow'); } else if ( !show ) { $('#videos').removeClass('slid'); $('#page-wrap').removeClass('no-overflow'); $('body').removeAttr('style'); } }
Try applying it to every element:
* { -webkit-overflow-scrolling: touch; }
You could try setting width:100%
on .page-wrapper
and set that to overflow:hidden
and position:relative
. That might prevent the horizontal scroll.
Thanks for the code example. It really helped me see your intent and the issue with scrolling more clearly. It looks like you need -webkit-overflow-scrolling. Add -webkit-overflow-scrolling: touch;
to page-wrapper
. Here's an [updated test page] with that rule applied. You can compare with test page in my comment below to see the difference.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With