HTML/CSS: scroll bar appears below HTML elements

问题

In Chrome and Safari, the vertical scroll bar appears below HTML content on the page, like so:

I fiddled with ::-webkit-scrollbar, but the closest i could get was change the scroll bar width to 0px. The div of that section is:

.displayContent { min-width:620px; width:100%; height:auto; overflow:hidden; }

This occurs in Safari (but not mobile Safari on iOS) and Chrome. Firefox is fine. I also tried fiddling with overflow as well, but could not get the results i wants.

Suggestions?

回答1:

Try this -

html, body { 
    height:100%; 
    width:100%; 
    overflow:auto;
}

回答2:

Had a similar Problem.

The Problem is in the html{}

If you use something like this

 html {
    height: 100%;
    width: 100%;
    overflow: hidden;
 }

Than the overlay effect on the scrollbar apears. Remove the overflow on the style for the html and put it into the body styling and it should work.

回答3:

Saw this today only reproducing in Safari. The issue was that I had children of the scrollable element with the following CSS (to force GPU compositing):

-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0px);

The solution was to ass the same code to the container (the element with overflow:auto;), which caused the browser to draw everything correctly (with the scroll bar over the content).

来源：https://stackoverflow.com/questions/18087323/html-css-scroll-bar-appears-below-html-elements