Overflow:Auto Not Working in Touch Devices(Ios)

-webkit-overflow-scrolling: auto; not working on touch devices

I think I found something for you:

How to disable inertial scrolling on body for iOS browsers?

It's just a matter of using a <body> wrapper, like a <div>, and applying overflow: auto; to that div. Basically Chrome for iOS is telling you "let me handle the <body> element, but do whatever you want with other elements.

Mobile/iOS Overflow:auto Not Working

If anyone else is working on a horizontal scroller and is trying to implement the ability for users to scroll horizontally on web and mobile this was the solution I finally found to work in my case:

http://manos.malihu.gr/jquery-custom-content-scroller/

Hope it's helpful. Thanks!

ios 13 CSS set -webkit-overflow-scrolling: auto cannot work

They killed it off.

https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

This doesn't explicitly say that killed 'auto' but all signs point to them having done so.

I'm having nightmare issues with a popup that has a scrollable div inside. If the user 'bounces' it and then scrolls in a particular way it'll scroll the window underneath and then you can't scroll the div until the window has finished scrolling.

So set 'position: fixed' or something like that (I hear you say). Well I have - in fact I'm using Angular material and the actual scrolling on the underlying window is blocked but iOS seems to still run its physics algorithm even though nothing is animating.

At least this option used to let the user get less 'bouncy' and hope they'd not trigger this 'bug'.

There's also a new option that might help with issues caused by auto no longer being available - such as weird scrolling of parent elements as described above. However unfortunately I couldn't get this working with Safari, but it did work in Chrome as expected. And even if this does work it won't help restore the auto behavior if you just prefer the way it works.

overscroll-behavior: contain;

Overflow scrolling not working on position fixed element iOS

Alright, I was able to resolve the issue (which is kind of a weird one). For some reason, having the nav fixed to the very bottom seemed to be the issue. To fix this, I added additional space using the bottom property and added a pseudo-element to fill in the gap. Then, increased the height of the link elements inside the scroll container. Here's the updated code:

.sticky-nav {  position: fixed;  width: 100%;  padding-top: 10px;  bottom: 10px;  left: 0;  z-index: 90;  background-color: #ddd;  border-top: 1px solid #f8f8f8;}
.sticky-nav:after {  content: "";  position: absolute;  width: 100%;  height: 10px;  bottom: -10px;  left: 0;  background-color: #ddd;}
.sticky-nav-inner {  display: -webkit-flex;  display: flex;  align-items: center;  justify-content: space-between;  width: 90%;  height: 57px;  max-width: 1200px;  margin: 0 auto;  z-index: 0;}
.sticky-nav-menu {  display: inline-block;  white-space: nowrap;  height: 100%;  padding-right: 25px;  margin: 0;}
.sticky-nav-menu li {  display: inline-block;  white-space: nowrap;  height: 100%;}
.sticky-nav-menu li a {  display: inline-block;  height: 100%;  padding-top: 20px;  padding-right: 25px;}
.sticky-nav-overflow {  width: calc(100% - 100px);  height: 100%;  margin-right: 2%;  overflow-x: scroll;}
.sticky-nav-mobile {  padding-left: 1%;  z-index: 1;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><div class="pane-container">      <nav class="sticky-nav js-sticky-nav clearfix">        <div class="sticky-nav-inner">          <div class="sticky-nav-overflow">            <ul role="tablist" class="sticky-nav-menu is-centered-text">              <li role="presentation" class="active"><a href="#linkone" aria-controls="linkone" role="tab" data-toggle="tab" class="sticky-nav-link">LINK ONE</a></li>              <li role="presentation"><a href="#linktwo" aria-controls="linktwo" role="tab" data-toggle="tab" class="sticky-nav-link">LINK TWO</a></li>              <li role="presentation"><a href="#linkthree" aria-controls="linkthree" role="tab" data-toggle="tab" class="sticky-nav-link">LINK THREE</a></li>              <li role="presentation" class="sticky-nav-animated-list"><a href="#linkfour" aria-controls="linkfour" role="tab" data-toggle="tab" class="sticky-nav-link">LINK FOUR</a></li>            </ul>          </div>          <div class="sticky-nav-mobile">            <a href="#" class="sticky-nav-cta call-button">BUY NOW</a>          </div>        </div>      </nav>      <div class="tab-content">        <div id="linkone" role="tabpanel" class="grid-container grid-parent linkone-pane is-centered-text tab-pane fade in active">          <h1>Link one pane</h1>        </div>        <div id="linktwo" role="tab-panel" class="grid-container grid-parent linktwo-pane is-centered-text tab-pane fade">          <h1>Link two pane</h1>        </div>        <div id="linkthree" role="tab-panel" class="grid-container grid-parent linkthree-pane is-centered-text tab-pane fade">          <h1>Link three pane</h1>        </div>        <div id="linkfour" role="tab-panel" class="grid-container grid-parent linkfour-pane is-centered-text tab-pane fade">          <h1>Link four pane</h1>        </div>      </div>    </div>

Overflow:Auto Not Working in Touch Devices(Ios)

-webkit-overflow-scrolling: auto; not working on touch devices

Mobile/iOS Overflow:auto Not Working

ios 13 CSS set -webkit-overflow-scrolling: auto cannot work

Overflow scrolling not working on position fixed element iOS

Related Topics

Leave a reply