Question

在我的网站中，我使用的是光滑的轮播，这使得创建一个div变得非常简单，该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开发工具时，我选择了带触摸屏的手机或笔记本电脑的响应模式，它可以工作并可以用鼠标滚动，但是，如果我切换回笔记本电脑，我必须再次使用滚动条。

Answer 1

最简单的答案是这个（只需将“ body”更改为您想要的任何类）：

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;
}

现在，如果要保持滚动条的宽度不变，但要使滚动条透明（这是另一个技巧），只需将上面的颜色替换为透明：

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

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

body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
  outline: 1px solid rgba(0, 0, 0, 0);
}

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

1 个答案: