Overflow:hidden on iOS Safari not working in combination with scrollLeft

Question

I have a question that was half answered by other posts like this: Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

or that:

Does overflow:hidden applied to <body> work on iPhone Safari?

The Question is about that overflow:hidden in iOS Safari and mobile Chrome is not working like I expected it.

overflow:hidden on the body works for Firefox. And if you try the code below that way in Firefox it is exactly how it should work.

So I already see, overflow:hidden is not working on the body for iOS Safari and the mobile Chrome – you have to wrap everything in a div below the body and give that an overflow:hidden. But this way unfortunately is not doing what I want, because it will ignore the JavaScript function scrollLeft.

Here is a quick description of what is supposed to happen:

You open the site. The body or wrapper will be seen half, cause it has a width:180%.

A jQuery code is scrolling the whole thing to {scrollLeft:(right)} where it supposed to stay. (at least on the x-axis)

Clicking the button should move the site to the left where also the site should stay. (on the x-axis / y-axis should be possible to scroll) Maybe it is a bit complicated; feel free to copy the code if you want to try it yourself.

What I think the problem might be is that overflow:hidden gets overwritten or overwrites the JavaScript function.

Do anyone have an idea how to solve this problem? Maybe another way to tell the browser to not scroll in the x-axis...

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Scroll test</title>

  <style>
    @charset "UTF-8";
    :root {
      --blue: #127296;
    }
    
    html {
      height: 100%;
      font-size: 20px
    }
    
    body {
      margin: 0px;
      overflow-x: hidden;
    }
    
    .wrapper {
      /* overflow-x: hidden; */
    }
    
    .textfeld {
      color: var(--blue);
      padding: 30px 35px 150vh 35px;
    }
    
    .white {
      color: white;
    }
    
    button {
      border: none;
      background: none;
      font-size: 1em;
      padding: 2px 5px 15px 5px;
      align-self: center;
    }
    
    .eins {
      grid-column: 1/ span 6;
    }
    
    .zwei {
      grid-column: 7 / -1;
      background-color: var(--blue);
    }
    
    #content {
      width: 180%;
      grid-template-columns: repeat(12, 1fr);
      margin: 0px;
      height: auto;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
    }
  </style>

</head>

<body>
  <div class="wrapper">
    <div id="content">
      <div class="spalte eins fr">
        <div class="textfeld content">
          <button type="button" name="button" class="button_2">Click</button>
        </div>
      </div>

      <div class="spalte zwei">

        <div class="textfeld content de white">
          <button type="button" name="button" class="button">Click</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    var left = $(document).outerWidth() - $(window).width();
    var right = $(window).width() - $(document).outerWidth();
    $('body, html').scrollLeft(left);


    $(".button").click(function() {
      $('body, html').animate({
        scrollLeft: (right)
      }, 200);
      console.log("click");
    });
    $(".button_2").click(function() {
      $('body, html').animate({
        scrollLeft: (left)
      }, 200);
    });
  });
</script>

</html>

Overflow:hidden on iOS Safari not working in combination with scrollLeft

0 Answers0