CODEWITHSUNDEEP
htmlcssiosmacosoverscroll
rinkjames
rinkjames

Reputation: 127

extend relative positioned div into overscroll area to accommodate macOS / iOS elastic scroll

I've read multiple similar questions, but no solutions there appear to work.

I'm making a horizontally scrolling page and I'd like to style the vertically centred container so that, effectively, it extends into the overscroll area visible on macOS and iOS devices with their elastic scrolling behaviour on the edge of browser windows.

So instead of this...

enter image description here

...I'd like the centred div to extend infinitely left and right.

https://jsfiddle.net/rinkjames/qpm3gdrb/2/

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="./test.css" />
  </head>

  <body>
    <div id="container">
      <div class="img-wrapper" style="left: 820px; top: 80px; width: 470px">
        <img
          src="https://as2.ftcdn.net/v2/jpg/02/96/95/05/1000_F_296950522_CnIaItWrXyaQEYDuwfQsIc7fr3CngrKj.jpg"
        />
      </div>
      <div class="img-wrapper" style="left: 1320px; top: 80px; width: 570px">
        <img
          src="https://as2.ftcdn.net/v2/jpg/02/96/95/05/1000_F_296950522_CnIaItWrXyaQEYDuwfQsIc7fr3CngrKj.jpg"
        />
      </div>
    </div>
  </body>
</html>


body {
  background-color: lavender;
  margin: 0;
}

#container {
  background-color: thistle;
  height: 601px;
  margin-top: calc(50vh - 300px);
  position: relative;
  background-size: 20px 20px;
  background-image: linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

.img-wrapper {
  width: 300px;
  position: absolute;
}

.img-wrapper img {
  width: 100%;
}

Upvotes: 1

Views: 39

Answers (0)

Related Questions