HTML - 隐藏滚动条但可以滚动

匿名 (未验证) 提交于 2019-12-02 20:32:16

原理: (原理就是遮盖)

1、如果你把子div的140px宽度移除,你就明白其中的奥妙了。

2、原理就是父元素负责滚动,子元素负责遮盖。

解释:
父类的div 负责滚动,宽度比子类的宽度窄也就是: width: scroll(父) < scroll-son

<html> <style>     .scroll{         overflow-x: hidden;          overflow-y: auto;         height: 300px;           width: 120px;          background:red     }         .scroll-son{         overflow-x: hidden;         height:100%;          width: 140px;     } </style>  <div  class="scroll">      <div  class="scroll-son">          <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>          <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>          <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>          <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>          <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>         <p>1</p>              </div> </div>  </html> 
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!