CodePen上看到的一个示例

元始天尊

https://codepen.io/ge1doot/pen/LkdOwj
https://codepen.io/akm2/pen/rHIsa
https://codepen.io/dissimulate/pen/KrAwx

元始天尊

watermelon

啊，好好玩

ABakhsh

Hide scroll bar when not needed
there is no one dedicated CSS rule to Hide scroll bar when not needed. However, this is possible with a few browser-specific CSS rules. To hide the scrollbar and keep scrolling functionality, apply the following CSS to the body (for the entire page) or a specific element.

How to Hide the Scrollbar in CSS (and Prevent Scrolling)
To hide the scrollbar and disable scrolling, we can use the CSS overflow property. This property determines what to do with content that extends beyond the boundaries of its container.

1. /* hide scrollbar and prevent scrolling */
   
2. #div-1 { overflow: hidden; }
   
3. #div-2 { overflow: visible; }
   
4. 
   
5. /* other styling */
   
6. div {
   
7.   border: solid 5px black;
   
8.   border-radius: 5px;
   
9.   height: 100px;
   
10.   margin: 20px;
    
11.   width: 300px;
    
12. }
    
13. 
    
14. * {
    
15.   background-color: #EAF0F6;
    
16.   color: #2D3E50;
    
17.   font-family: 'Avenir';
    
18. }

复制代码

To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so:

1. /* hide vertical scrollbar and prevent vertical scrolling */
   
2. 
   
3. div {
   
4.   overflow-y: hidden;  
   
5. 
   
6.   /* other styling */
   
7.   border: solid 5px black;
   
8.   border-radius: 5px;
   
9.   height: 300px;
   
10.   width: 300px;
    
11. }
    
12. 
    
13. img { height: 500px; }
    
14. 
    
15. /* other styling */
    
16. * {
    
17.   background-color: #EAF0F6;
    
18.   color: #2D3E50;
    
19.   font-family: 'Avenir';
    
20. }

复制代码