0

I would like the view port on Safari mobile to prevent horizontal scrolling and also hide any horizontal overflow content. The reason being is that I have some animations on a website that move content off screen. As a work-around I can perhaps not animate but I would like to get it working on mobile.

When viewed on an iPhone 6 using Safari the code below allows horizontal scrolling and still shows the overflow content.

I see four posts on the subject but the suggestions for use of overflow: hidden are not working.

overflow-x: hidden, is not working in safari

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

Mobile Safari Viewport - Preventing Horizontal Scrolling?

Hiding the scrollbar on an HTML page

Place this code in index.html on a server so the page can be viewed on an iPhone:

<!DOCTYPE html>
<html>
<head>
    <meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
    <style>
    html {
      overflow-x: hidden;
    }

    body {
        background-color: black;
        overflow-x: hidden;
    }

    #content {
      width: 100%;
      overflow-x: hidden;
    }

    .tagline {
      color: white;
      font-size: 1.8em;
      font-style: italic;
      position: absolute;
      white-space: nowrap;
      overflow-x: hidden;
      top: 10%;
      left: 80%; /* This position is off screen on purpose */
    }
    </style>
</head>

<body>
  <div id="content">
    <span class="tagline">Testing span reaching outside edge of window on mobile</span>
  </div>
</body>

</html>
Community
  • 1
  • 1
Christopher
  • 5,806
  • 7
  • 31
  • 41
  • 1
    Possible duplicate of [Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers](http://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers) – Xavier J Apr 27 '17 at 22:52
  • This answer helped me: https://stackoverflow.com/a/46039555/502846 – diachedelic Jan 14 '19 at 04:45

1 Answers1

1

If you position:fixed; the #content it would prevent it from scrolling:

#content {
  width: 100%;
  overflow-x: hidden;
  height: 100%;
  position: fixed;
}
c01gat3
  • 597
  • 3
  • 18
  • Thanks. However, I need the page to scroll vertically, not horizontally. It's nice to see there is a way to restrict the scrolling in all directions, but alas, there is content below. – Christopher Apr 28 '17 at 00:50
  • It still scrolls vertically. See example here: http://bencolgate.co.nz/temp/overflow.html – c01gat3 Apr 28 '17 at 00:55
  • Ok, I see this, thanks. I will run more tests later and post results. – Christopher Apr 28 '17 at 00:58