美文网首页
移动端滚动条

移动端滚动条

作者: Eastblue | 来源:发表于2018-09-03 12:00 被阅读0次

最近在做vue小工具,产品提出一个需求要求出现滚动条并且有滚动的小滑块,然后思索了很久决定在网上找一下其他人是怎么做的,然后总结如下,希望能给大家一点启发。

elmen {
overflow: hidden;
overflow-y: auto;
}
elment::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0);
border-left: 1px solid rgba(0, 0, 0, 0);
}
elment::-webkit-scrollbar {
width: 6px;
height: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
elment::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
background-clip: padding-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 28px;
}
elment::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

相关文章

  • 移动端 实现ul横向滚动条

    移动端 实现ul横向滚动条 隐藏滚动条

  • 上下滚动条插件

    jquery——移动端滚动条插件iScroll.js

  • 移动端兼容性问题2 body和html不能禁止滚动条出现

    网页版本没有显示滚动条 但是手机端安卓和ios手机不能禁止滚动条移动端滚动穿透问题完美解决方案html body ...

  • 自定义table滚动条

    table在做PC端列数很多,到了移动端,很多列没法整合加隐藏,所以就只能让table出现滚动条,但是默认的滚动条...

  • 移动端滚动条

    最近在做vue小工具,产品提出一个需求要求出现滚动条并且有滚动的小滑块,然后思索了很久决定在网上找一下其他人是怎么...

  • 移动端滚动条

    问题描述: 在移动端当内容没有超出body的高度时,不应该出现滚动条,或者类似同心圆的布局,如下图: 代码如下:

  • 移动端隐藏滚动条

    .box{height: 100px;overflow-y: auto;} .box::-webkit-scrol...

  • 盘点移动端适配方案

    盘点移动端适配方案 作为开发者,在手机移动端做适配的时候会出现很多问题:最不希望用户看到的就是横向滚动条。其次是文...

  • 前端基本功--网页特效2 11.14

    一、模拟垂直滚动条 重点在计算,思考滚动条的移动距离和盒子中内容的关系!滚动条移动一像素,内容移动多少? = 多出...

  • 移动端页面

    手机和PC端交互方式不一样,移动端多数没有hover,没有resize,没有滚动条,有touch 1、媒体查询 在...

网友评论

      本文标题:移动端滚动条

      本文链接:https://www.haomeiwen.com/subject/wgybwftx.html