js实现水平和竖直滑动条 js实现水平和竖直滑动条

最近在做练手项目时候，需要用到滑动条，所以就稍微研究了一下。
首先来看水平滑动条，效果图如下：

文章图片

代码如下：

水平滑动条 - 锐客网* {margin: 0; padding: 0; } .scroll {margin: 100px; width: 500px; height: 5px; background: #ccc; position: relative; } .bar {width: 10px; height: 20px; background: #369; position: absolute; top: -7px; left: 0; cursor: pointer; }p{margin-left: 100px; }

竖直滑动条效果图如下：

文章图片

代码如下：

竖直滑动条 - 锐客网* {margin: 0; padding: 0; }.scroll{margin: 100px; width: 5px; height: 320px; background: #ccc; position: relative; } .bar {width: 15px; height: 5px; background: #369; position: absolute; top: 0px; left: -5; cursor: pointer; }p{margin-left: 100px; }

【js实现水平和竖直滑动条】这里之所以加入移动百分比的展示效果，主要是考虑到后续如果需要对接后台的数据就可以达到动态控制的目的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。