I can only get -webkit-overflow-scrolling:touch to work on mobile if I assign overflow-x:hidden; to HTML,BODY and break scrollTo

Hey folks. Web design and css is not my day job, more of a side hobby. That said I've been working iteratively on my site for a while now, and have worked myself into a corner when trying to make the site mobile friendly.

Overall I've had pretty good luck taking a two-column dynamic layout I tracked down a few years back and adapting it to mobile. I achieved the dynamic sizing for web with some nested divs that by necessity have a greater width than the window and need to be hidden, though.

On mobile, this only works if I assign overflow-x:hidden; to html,body. If I follow proper procedure and assign it, or the website scrolling setting, to document.body instead (or any other combination therein), the smooth scrolling is broken. I like the smooth scrolling, so even though it cost me the function of tapping the time bar to move to the top of the page, I went with it. It worked, right?

I accepted this compromise until I started to go further and taking my sidebar menus and try to make them fixed position nav menus for mobile. Even that worked fine until I created a logobar that would pop in upon scrolling away from the top of the page. The same compromise that broke "tap to top" has broken any JQuery scrollTop functions I tried to include, on mobile, using a simple enough technique I found here.

Now I have the choice, make any change at all to this css and lose smooth scrolling and gain my logobar and tap to top: as seen in test page 1

Of I can leave the css that I have done improperly entirely untouched, because if I shift or change any part, including the height:100% set to html,body, I no longer have the smooth scrolling: seen in test page 2

Below is the *unchangeable* css (if I want to keep smooth scrolling), for reference. Thanks:

    html,body { 
	background-image: url('happygamefamily_bg.png');
	background-attachment:fixed;
	background-repeat:repeat-y;
	background-position:top left; 
        height:100%;
  	width:98%;
	}
    @media screen and (max-width:1160px) {
    html,body { 
	width:99%;
    }
    }
    @media screen and (max-width:840px) {
    html,body { 
	width:97%;
    }
    }
    @media screen and (max-width:480px) {
    html,body { 
	overflow-x:hidden;
	overflow-x:-moz-hidden-unscrollable;
	overflow-y: scroll;
  	-webkit-overflow-scrolling: touch;
	width:auto;
    }
    }

Select allOpen in new window