我如何删除滚动条，但仍然允许使用鼠标滚动？

Question

在我的网站上，我使用的是光滑的轮播，这使得创建一个可以用鼠标滚动且没有可见滚动条的div非常简单。但是，我有一个不同的div，我不能使用它的slick插件，而我正在尝试使其与slick轮播相同。

有人知道slick是否使用了一个类来使div可在没有可见滚动条的情况下用鼠标滚动，可以添加到另一个div？

例如，这是一个使用光滑轮播的div，该轮播可通过鼠标滚动而没有滚动条

<div class='col-sm-10 carousel1 d-flex align-items-center'>
        <div class='content'>
          <img src='assets/item1.png'>
        </div>
        <div class='content'>
          <img src='assets/item2.png'>
        </div>
        <div class='content'>
          <img src='assets/item3.png'>
        </div>
        <div class='content'>
          <img src='assets/item4.png'>
        </div>
        <div class='content'>
          <img src='assets/item5.png'>
        </div>
        <div class='content'>
          <img src='assets/item6.png'>
        </div>
        <div class='content'>
          <img src='assets/item7.png'>
        </div>  
      </div>

如何使用平滑文件将相同功能添加到另一个div，以便可以使用鼠标在没有滚动条的情况下对其进行滚动？

<div class='container'>
  <div class='box'>

  </div>
  <div class='box'>

  </div>
  <div class='box'>

  </div>
  <div class='box'>

  </div>
  <div class='box'>

  </div>
</div>

希望另一位比我聪明的人可以解释的另一件事：当我使用Chrome Dev工具并选择带触摸功能的手机或笔记本电脑的响应模式时，它可以工作并可以用鼠标滚动，但是，如果我切换回笔记本电脑，我必须再次使用滚动条。

Answer 1

尝试一下：

body::-webkit-scrollbar {
  width:0;
}

如果要保持滚动条可见，可以像这样更改颜色：

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}