webkit-overflow-scrolling issue with x-axis?
13,172
I've been having the same problem and it seems that there are no x/y options for -webkit-overflow-scrolling unfortunately. The workaround I typically use is to wrap the scrolling div in an overflow-x: hidden
div and problem should be solved.
Markup:
<div class="scroll-container">
<div class="scroll-wrapper">
<div class="scroll-body">
</div>
</div>
</div>
Styling:
.scroll-container {
-webkit-overflow-scrolling: touch;
overflow: auto;
width: 200px;
width: 500px;
}
.scroll-wrapper {
width: 200px;
overflow-x: hidden;
}
Author by
Ninjiangstar
Updated on June 21, 2022Comments
-
Ninjiangstar almost 2 years
I have a scrollable div with the following css:
overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling: touch; width:200px; height:500px;
However on iOS devices, when the content inside of the div is wider than the div itself, x-axis scrolling is enabled. How do I disable x-axis scrolling?
-
ShrekOverflow almost 9 yearsthats just horrid and will bite you later.
-
Louis LC over 8 yearsGood idea for specific classes though. Solved an Ionic problem for me. Thank you.
-
Markus Bucher over 7 yearsHaha, I earned lots of money to fix problems that were caused by code like this.