0

I am implementing a trick to stop side scrolling for Safari using what I found from this page.

Essentially, I'm putting overflow-x: hidden; on an overall wrapper div instead of body and head. It effectively stops side scrolling but then it causes a div inside of that wrapper to loose it's fixed property. Specifically, I have a div that usually acts as a side sticky nav but it only activates it's fixed property at a certain scroll height.

This is the page I'm doing this for.

To recreate this effect, do the following in inspector:

  1. add a wrapper div around everything
  2. set that div to overflow-x: hidden; height: 100%; and position: fixed
  3. scroll down and you'll see the sidenav isn't fixed to the page.

How do I fix this?

Community
  • 1
  • 1
Cedric Ith
  • 1
  • 2
  • If the wrapper is positioned fixed without overflow-y:auto I can't event scroll down. Do you have more logic to inject the wrapper in Safari only? – zoku Mar 13 '17 at 09:00
  • @zoku, the height has to be 100%. And overflow-y doesn't even have to be set to auto – Cedric Ith Mar 13 '17 at 21:24
  • Ah! I see what you did there! I think you might want to revise your Javascript for the handling of the sticky navigation. Please see the edit of my answer below for details. – zoku Mar 13 '17 at 22:01

1 Answers1

0

I wrote this first:

You could try to use:

.wrapper {
    position: absolute;
    width: 100%;
    overflow-x: hidden;
}

on your div. That worked for me in Safari for Windows (terribly old Version, though).

Your Javascript checks for $(document).scrollTop();, but when your content is in a container of 100% height the scrollTop of $(document) will always be 0. Try $('.yourWrapperDiv').scrollTop(); instead. This could work.

zoku
  • 7,056
  • 3
  • 20
  • 27