How to force display and hide browser scroll bars in html

I was just building a website, and there was a page that was a little different from other pages.

Through observation and debugging, I found that the vertical height of the page was not the same. Overflow,

cannot call out the vertical scroll bar,

resulting in a difference of several pixels when centered relative to other pages,

making the page effect unfriendly.

Solution: Forcibly add or hide the browser scroll bar on all pages.

The relevant css code is as follows:

//Force to display the scroll bar:

html { overflow: scroll; }

//Force to hide the scroll bar:

html { overflow: hidden; }

// Hide IE's horizontal scroll bar:

html { overflow-x: hidden; }

//Hide IE's vertical scroll bar:

html { overflow-y: hidden; }

//Force display of IE's horizontal scroll bar:

html { overflow-x: scroll; }

//Force to display IE's vertical scroll bar:

html { overflow-y: scroll; }

//Force to display Mozilla's horizontal scroll bar:

html { overflow:-moz-scrollbars-horizontal; }

//Note: Only the horizontal scroll bar is forced to be displayed. In other words, even when the vertical scroll bar needs to be displayed, the vertical scroll bar will not appear.

//Force the display of Mozilla's vertical scroll bar:

html { overflow:-moz-scrollbars-vertical; }

//Note: Only the vertical scroll bar is forced to be displayed. That is to say, even if the horizontal scroll bar needs to be displayed, the horizontal scroll bar will not appear.

The above is the detailed content of How to force display and hide browser scroll bars in html. For more information, please follow other related articles on the PHP Chinese website!