Home > Article > Web Front-end > How to display the hidden content of overflow:hidden_html/css_WEB-ITnose
How to display the hidden content of overflow:hidden_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:04:593855browse
1. The overflow:hidden scroll bar is set in CSS and HTML. In Chrome, you can use the mouse wheel to scroll the content, but in IE (I use IE10) the mouse wheel is invalid. You can only select the content and then go to Drag down. How to solve this problem?
2. In the page, there is a div, and the content inside also needs to be hidden. I set overflow: hidden in the div; the content is hidden, but the content cannot be dragged, and I cannot view the hidden content. How to solve this problem?
I beg you for help! Thank you all!
Reply to the discussion (solution)
If you want to scroll, use overflow:scroll; if you think this scroll is ugly, write your own
<!DOCTYPE html><html><head><title></title><style type="text/css">* {margin: 0;padding: 0;}body {background-color: #fff;}.container {height: 500px;border: 1px solid #222;background: #eee;overflow: hidden;}p {margin: 50px;border: 1px solid #ddd;}</style></head><body><div class="container"> <p>qwe 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /> 1234213<br /></p></div></body></html> Regarding the first article, it seems that chrome cannot scroll.
If you want to be able to scroll, use overflow:scroll; if you think this scroll is ugly, write your own
The current requirement is to not have scroll bars
<!DOCTYPE html><html><head><title></title><style type="text/css">* {margin: 0;padding: 0;}body {background-color: #fff;}.container {height: 500px;border: 1px solid #222;background: #eee;overflow: hidden;}p {margin: 50px;border: 1px solid #ddd;}</style></head><body><div class="container"> <p>qwe 1234213<br /> 1234213<br /> </p></div></body></html> Regarding the first item, it seems that chrome cannot scroll either.
Brother, I have tried yours. , it cannot be scrolled, it is hidden directly. HTML{overflow:hidden} in CSS can be scrolled in Chrome, but in IE it can only be selected and then slowly moved down.
In fact, this kind of design is not necessary. It is best to avoid this approach. Generally, you will not add overflow hidden to html.
If you want, you can To scroll, just use overflow:scroll; if you think this scroll is ugly, write your own
Now the demand is not to have a scroll bar
Then simulate the scroll bar yourself. JS can drag and drop the wheel events. What you can get is to set the outer div overflow:hidden to control the position (margin) of the inner div
or use the above method and add a div outside to cover the scroll bar and that's it