CSS滚动条样式

SLHL • 2024-10-04 00:02 • 编程

一、CSS滚动条样式修改

CSS滚动条样式可以通过修改浏览器默认的滚动条样式，来实现自定义的效果。在CSS中，我们可以使用以下伪类来选中滚动条：

::-webkit-scrollbar          /* Safari 和 Chrome 等Webkit引擎的浏览器 */
::-moz-scrollbar             /* Firefox 等Gecko引擎的浏览器 */
::-ms-scrollbar              /* IE10+ */

针对不同浏览器的滚动条样式，可以有不同的自定义方式。比如，针对webkit浏览器，可以使用以下属性进行修改：

::-webkit-scrollbar {
    width: 10px;               /* 滚动条的宽度 */
    height: 100px;             /* 滚动条的高度 */
}
 
::-webkit-scrollbar-thumb {
    background-color: #666;    /* 滚动条滑块的背景颜色 */
    border-radius: 10px;       /* 滚动条滑块的边框圆角半径 */
}
 
::-webkit-scrollbar-track {
    background-color: #eee;    /* 滚动条轨道的背景颜色 */
}

其他浏览器的滚动条，也可以通过类似的方式进行修改。这种方式的优点是可以减少使用JS或插件的依赖，同时自定义CSS样式效果也更加灵活。

二、CSS好看的滚动条样式

通过CSS样式的自定义，我们可以实现更好看的滚动条样式。比如，可以将滚动条滑块的背景颜色设置为渐变色，可以看起来更加美观。

::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #ff00ff, #00ffff);
    border-radius: 10px;
}

除了渐变色之外，还可以使用图像作为滚动条滑块的背景，比如：

::-webkit-scrollbar-thumb {
    background-image: url("scrollbar-thumb.png");
    background-size: cover;
    border-radius: 10px;
}

三、Vue滚动条样式

在Vue中，可以使用vue-scrollbar插件来实现滚动条样式的自定义。该插件基于原生的滚动条，不需要任何依赖，使用起来很方便。

该插件支持的滚动条样式有：

颜色主题（白色/黑色）
滑块颜色
滑块宽度和高度
滑块圆角

使用该插件的代码示例：


  
    
  



import VueScrollbar from 'vue-scrollbar'

export default {
  components: {
    VueScrollbar
  }
}



.vue-scrollbar-wrapper {
  /* 这里是自定义滚动条样式 */
}

四、CSS横向滚动条样式

CSS横向滚动条样式可以用于横向滚动的内容，比如水平方向的菜单、轮播图等。与竖向滚动条类似，我们也可以使用CSS对横向滚动条进行自定义。

.horizontal-scrollbar {
    overflow-x: auto;
    white-space: nowrap;        /* 禁止换行 */
}
 
.horizontal-scrollbar::-webkit-scrollbar {         
    height: 10px !important;   /* 滚动条的宽度 */
}
 
.horizontal-scrollbar::-webkit-scrollbar-thumb {
    background-color: #999;    /* 滚动条滑块的背景颜色 */
    border-radius: 10px;       /* 滚动条滑块的边框圆角半径 */
}
 
.horizontal-scrollbar::-webkit-scrollbar-track {
    background-color: #eee;    /* 滚动条轨道的背景颜色 */
}

五、滚动条样式设置

除了上面介绍的方式之外，还可以使用一些插件或类库来实现滚动条样式的自定义。比如，使用jquery.nicescroll插件：

jQuery NiceScroll Plugin - Demo

body {
height: 1000px;
}

Scroll Down / Up / Left / Right to see effect

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

原创文章，作者：SLHL，如若转载，请注明出处：https://www.506064.com/n/134000.html