css 列表滚动搜索不滚动

CSS是一种用于网页样式设计的语言。在实际网站开发中，我们经常会碰到一些需要显示列表并允许用户搜索的情况。但是，在搜索时我们往往希望只有列表内容随搜索关键词发生变化，而列表的滚动条保持不变。那么该如何实现这样的效果呢？

.list {
      height: 200px;
      overflow-y: scroll;
}
.list::-webkit-scrollbar {
      width: 10px;
  /* 滚动条宽度 */}
.list::-webkit-scrollbar-thumb {
      background-color: #666;
  /* 滚动条颜色 */}
.search {
      margin-bottom: 10px;
}
.search input {
      width: 100%;
      padding: 5px;
      border-radius: 5px;
      border: 1px solid #ddd;
}
.item {
      margin-bottom: 5px;
}
    

如上代码中，我们使用了overflow-y属性指定当列表超过容器高度时启用纵向滚动条。但是，这会导致搜索时滚动条也会跟着滚动，这不是我们想要的。所以，我们需要使用一些CSS技巧来解决这个问题。

首先，在容器上添加::-webkit-scrollbar样式。该样式可以用于设置浏览器滚动条的样式。我们这里设置了滚动条宽度和颜色。

接着，在容器上添加::-webkit-scrollbar-thumb样式。该样式可以用于设置滚动条滑块的样式。我们这里只设置了滑块的颜色。

最后，在搜索框和列表项上添加一些简单的样式以美化显示效果。

有了以上代码，我们就可以实现一个带有固定滚动条的搜索列表了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！