Scroll doesn't work in container div on iOS 15 Safari iPhone

1 year ago

#69633

Barty Bart

I have been struggling with it for some time and I don't know how to do it ... I have tried various methods but no results.

I want the container #box .zbox to scroll, not the entire website. It's mainly about iOS and iPhone, I tested Chrome and Safari on iOS15 and it doesn't work, on Android Chrome it works, desktop works as well.

Below is a simplified version of my website. Any ideas?

EDIT: I just want to achieve something like this

I tried a lot of things, 101% container inside, some css rules, iscroll.js , i wrote js with scrollTop and touchmove listener, but all without results.. is it achievable?

Checked macOS with iOS agent inspector, but it works there... only on iPhone not working (checked iOS 15 & 14)..

body,
html {
  color: #333;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  margin-top: 40px;
  margin-bottom: 20px;
  width: 100vw;
  height: auto;
  max-height: calc(100vh - 60px);
  position: relative;
  z-index: 10;
}

#box {
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 11;
}

#box .zbox {
  display: block;
  position: absolute; /* absolute or fixed only */
  width: 100vw;
  height: calc(100vh - 60px);
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}

nav {
  display: block;
  height: 40px;
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  background: #0e0e0e;
  color: #fff;
  width: 100%;
  min-width: 100%;
}

footer {
  display: block;
  height: 20px;
  position: fixed;
  width: 100%;
  background: #0e0e0e;
  color: #fff;
  right: 0;
  bottom: 0;
  z-index: 15;
}

<!DOCTYPE html>
<html>
  <body>
    <nav>
      NAVIGATION
    </nav>
      
    <main class="container">
      <div id="box">
        <article class="zbox">
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
          <p>SCROLLABLE CONTENT</p>
        </article>
      </div>
    </main>
      
    <footer>
        FOOTER
    </footer>

  </body>
</html>

html

css

ios

iphone

scroll

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs

Scroll doesn&#39;t work in container div on iOS 15 Safari iPhone

Scroll doesn't work in container div on iOS 15 Safari iPhone