Question

要删除垂直滚动条并保留鼠标滚轮，但要从列表或其他div中移除水平滚动条。
```
body {
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0 !important
}
```
如何仅使用css / js设计水平滚动条并添加鼠标滚轮？

非常感谢

Answer 1

用于删除垂直滚动条

body{
 overflow-y: hidden;
}

Answer 2

body{
      width:500px;
      background-color: grey;
    }
#div1{
  background-color:blue; 
  width:500px; 
  height:500px; 
  overflow-x:scroll;
  }
#div2{
  background-color:red; 
  width:600px; 
  height:300px;
  }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
 
  <body>
    <div id="div1">
      <div id="div2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </body>
</html>

#main{
  
  width:200px;
  height:200px;
  background:red;
  overflow-x:scroll;
  overflow-y:none;
  }

<div id='main'>
  
  </div>

Answer 3

＆＃13;

#divId{width:400px;height:200px;background:magenta;}
#wrap{width:200px;height:100px;
overflow-x:scroll;}

＆＃13;

<div id="wrap">
<div id="divId"></div></div>

＆＃13;

删除垂直滚动条并仅设计水平

3 个答案: