diy 滚动条 样式 ---- 核心代码

      .choice-tag {
               width: 341px;
               height: 30px;
               overflow: hidden;
               overflow-x: auto;
               white-space: nowrap;
               position: relative;
               z-index: 97;
               display: inline-block;
               margin: 4px 0 0 5px;

               /* diy 滚动条核心代码 */
               &::-webkit-scrollbar{  /*滚动条整体样式*/
                   width: 4px;   /*高宽分别对应横竖滚动条的尺寸*/
                   height: 4px;
               }

               &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
                   border-radius: 5px;
                   -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                   background: rgba(255, 255, 255, 0.2);
               }

               &::-webkit-scrollbar-track { /*滚动条里面轨道*/
                   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                   border-radius: 0;
                   background: rgba(0, 0, 0, 0.1);
               }
}

  

原文地址:https://www.cnblogs.com/mailyuan/p/12195574.html

时间: 2024-11-03 14:39:13

diy 滚动条 样式 ---- 核心代码的相关文章

好程序员教程之配置H5的滚动条样式示例代码

配置H5的滚动条样式示例代码有不少的小伙伴在网上寻找,本篇文章好程序员小编和大家分享一下配置H5的滚动条样式示例代码,希望对HTML5开发感兴趣的小伙伴有所帮助,下面我们一块来看一下吧:/?滚动条的滑轨背景颜色?/::-webkit-scrollbar-track {background-color: #b46868;}/?滑块颜色?/::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.2);}/?滑轨两头的监听按钮颜色?/:

【CSS3】自定义滚动条样式 -webkit-scrollbar

好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scrollbar.html webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-t

深度揭密轮播插件核心代码的实现过程

轮播效果在网页中用的很多,swiper是其中最有代表性的作品,它支持水平和竖直滑动,还有反弹效果,兼容移动端和pc端.当然代码量也是相当大的,单是js就有5300行(3.4.0的未缩版本),若不考虑代码利用率和加载速度直接就用了,在移动端比较慎重,比如京东(m.jd.com)的轮播就没有用它,而是自己实现了类似的功能,代码量很少的样子(格式化之后看起来二三百行左右的样子).那么这个功能如果自己来实现,要怎么做呢? 准备工作 1. 准备几张图片(我这里放了四张) 2. 搭建目录结构(html+cs

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus

jQuery自定义滚动条样式插件mCustomScrollbar

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus

CSS3自定义滚动条样式 之 -webkit-scrollbar

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 演示 来看看这2个滚动条demo:demo1(图片版).demo2(纯CSS3版) 滚动条组成 ::-webkit-scroll

css scrollbar 滚动条样式

chrome, webkit浏览器下(IE另外) 核心 ::-webkit-scrollbar{}/* 整体样式 */ ::-webkit-scrollbar-track{}/* 轨道 */ ::-webkit-scrollbar-thumb{}/* 滑块 */ ::-webkit-scrollbar-button{}/* 两端小方块 */ ::-webkit-scrollbar-track-piece{}/* 不包含滑块的轨道区 */ ::-webkit-scrollbar-corner{}/

QTableView表格滚动条样式(QSS真是细致到家了)

环境:Qt5.3 IDE:QtCreator 效果预览: 垂直与水平滚动条样式 代码: [cpp] view plaincopyprint? ui->QTableView->verticalScrollBar()->setStyleSheet("QScrollBar:vertical{"        //垂直滑块整体 "background:#FFFFFF;"  //背景色 "padding-top:20px;"    //上

CSS3自定义滚动条样式 -webkit-scrollbar

http://blog.csdn.net/hanshileiai/article/details/40398177#t1 有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 演示