html:
jquery大家都知道，这里div中width:200px height: 600px 或者width: 317px,height:217px, width:300px; height:200px;
这些都应该是动态生成的
实际滚动条的布局：<class="per-scrollbar" ></div>及其内容内部的部分，包括<class="per-scrollbar" ></div>
<div style="width:300px; height: 200px;">
<!-- per-scrollbar_wrap scroll事件 -->
<div pc="" class="per-scrollbar" scrollmax="" _pt="pscroll-small" _id="bfefcjdedeedbbhfjee" style="max-width: 300px;max-height: 200px; border: 1px solid gray;">
<div class="per-scrollbar_wrap" scrollparent="" style="width: 317px; height: 217px;">
<div class="per-scrollbar_actual" scroll="">
<!-- begin 这里写自己要显示的内容 -->
<div style="width:200px;height:600px;overflow:hidden;display:block; background: beige; border: 1px solid red;">我是内容</div>
<!-- end 这里写自己要显示的内容 -->
</div>
</div>
<!-- begin 自定义的滚动条 -->
<!-- 横向-->
<div class="per-scrollbar__bar per-is-horizontal" horizontal="" style="display: none;">
<div class="per-scrollbar__thumb" horizontalbar="" style="width: 96.1538%; transform: translateX(0%);"></div>
</div>
<!-- 纵向 -->
<div class="per-scrollbar__bar per-is-vertical" vertical="" style="display: block;">
<!--height: 33.3333%; transform: translateY(0%); 也是动态生成的 -->
<div class="per-scrollbar__thumb" verticalbar="" style="height: 33.3333%;"></div>
</div>
<!-- end 自定义的滚动条 -->
</div>
</div>
<script src="./jquery.js"></script>
css:
.per-scrollbar_wrap::-webkit-scrollbar {
width: 17px;
height: 17px;
/* display: none; */
}
为什么要这么设置？
首先要从这里看
最外层明明给的width:300px,height:200px为什么 里层的高度和宽度就要设置width:317,height:217呢。这是为了兼容IE浏览器。让ＩＥ浏览器不出现滚动条。但是chrome中 width:317px,height:217px的div内容区是300px,200px 为什么呢？就是因为设置了.per-scrollbar_wrap::-webkit-scrollbar { -- 这个属性设置滚动条（谷歌浏览器）
width: 17px;
height: 17px;
/* display: none; */
}
这个属性。个人的理解觉得是在chrome中 style设置的width = contentwidth + scrollWIdth（个人认为）
<style>
.per-scrollbar {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
min-width: 100%;
}
.per-scrollbar_wrap {
overflow: scroll;
margin-bottom: -17px;
margin-right: -17px;
min-height: 100%;
}
.per-scrollbar_wrap::-webkit-scrollbar {
width: 17px;
height: 17px;
/* display: none; */
}
.per-scrollbar_actual {
min-width: 100%;
min-height: 100%;
}
/* 横向滚动条样式 */
.per-scrollbar__bar.per-is-horizontal {
height: 6px;
left: 2px;
}
.per-scrollbar__bar {
position: absolute;
right: 2px;
bottom: 2px;
z-index: 3;
border-radius: 4px;
display: none;
}
/* 纵向 滚动条样式*/
.per-scrollbar__bar.per-is-vertical>div {
width: 100%;
}
.per-scrollbar__thumb {
position: absolute;
display: block;
width: 0;
height: 0;
cursor: pointer;
border-radius: inherit;
background: #d1d1d1;
transition: .1s linear;
top: 0;
}
.per-scrollbar__bar.per-is-vertical {
width: 6px;
top: 2px;
}
.per-scrollbar__bar {
position: absolute;
right: 2px;
bottom: 2px;
z-index: 3;
border-radius: 4px;
/* display: none; */
}
</style>js代码：
<script>
//乘法
Math.multiplication = function (arg1, arg2) {
if (isNaN(parseFloat(arg1)) || isNaN(parseFloat(arg2))) return null;
var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
try { m += s1.split(".")[1].length } catch (e) { }
try { m += s2.split(".")[1].length } catch (e) { }
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
};
//浮点数相除求结果
Math.division = function (arg1, arg2) {
if (isNaN(parseFloat(arg1)) || isNaN(parseFloat(arg2))) return null;
if (arg2 == 0) return null;
var r1, r2, m;
try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
m = Math.pow(10, Math.max(r1, r2));
var first = Math.multiplication(arg1, m);
var second = Math.multiplication(arg2, m);
return first / second;
};
</script>
<script>
/*
计算滚动条的高度，这里有一点需要注意，层级1的高度与滚动条的总高度是一样的，通过相似比例计算：
滚动条总高度 ：滚动条高度 = 层级2 ：层级1
=>滚动条高度 = 滚动条总高度 /（层级2 / 层级1）
*/
$(function(){
// var scrollParentDiv = $(".per-scrollbar_wrap");
// var clientHeight = $(".per-scrollbar").height();
// var scrollHeight = $(".per-scrollbar_actual").height();
//var maxScrollTop = scrollHeight - clientHeight;
// var clientWidth = $(".per-scrollbar").width();
// var scrollWeight = $(".per-scrollbar_actual").width();
// var maxScrollLeft = scrollHeight - clientHeight;
var scrollParentDiv,
$per_scrollbar,
$per_scrollbar_actual,
$verticalbar,
$horizontalbar,
clientHeight,
scrollHeight,
maxScrollTop,
clientWidth,
scrollWidth,
maxScrollLeft;
var initVaria = function(){
scrollParentDiv = $(".per-scrollbar_wrap");
$per_scrollbar = $(".per-scrollbar");
$per_scrollbar_actual = $(".per-scrollbar_actual");
$verticalbar = $(".per-scrollbar__thumb[verticalbar]");
$horizontalbar = $(".per-scrollbar__thumb[horizontalbar]");
clientHeight = $per_scrollbar.height();
scrollHeight = $per_scrollbar_actual.height();
maxScrollTop = scrollHeight - clientHeight;
clientWidth = $per_scrollbar.width();
scrollWidth = $per_scrollbar_actual.width();
maxScrollLeft = scrollWidth - clientWidth;
}
// 计算纵向滚动条的高度（记住不是滚动条移动的高度）
var getVerticalbarH = function(){
// var clientHeight = $(".per-scrollbar").height();
// var scrollHeight = $(".per-scrollbar_actual").height();
// var verticalbarH = clientHeight / (scrollHeight/clientHeight);
//$(".per-scrollbar__thumb[verticalbar]").height(verticalbarH);
var clientHeight = $per_scrollbar.height();
var scrollHeight = $per_scrollbar_actual.height();
var verticalbarH = clientHeight / (scrollHeight/clientHeight);
$verticalbar.height(verticalbarH);
}
// 滚动事件
var scrollEvent = function() {
var scrollTop = 0, scrollLeft = 0;
getVerticalbarH();
if (maxScrollTop > 0) {
scrollTop = scrollParentDiv.scrollTop();
var translateY = Math.division(scrollTop, clientHeight);
translateY = Math.multiplication(translateY, 100);
// $(".per-scrollbar__thumb[verticalbar]").css({ transform: ' translateY(' + translateY + '%)' });
$verticalbar.css({ transform: ' translateY(' + translateY + '%)' });
}
if (maxScrollLeft > 0) {
scrollLeft = scrollParentDiv.scrollLeft();
var translateX = Math.division(scrollLeft, clientWidth);
translateX = Math.multiplication(translateX, 100);
//$(".per-scrollbar__thumb[horizontalbar]").css({ transform: ' translateX(' + translateX + '%)' });
$horizontalbar.css({ transform: ' translateX(' + translateX + '%)' });
}
};
// 绑定事件
var bindEvent = function(){
// $(".per-scrollbar_wrap").on("scroll",scrollEvent);
scrollParentDiv.on("scroll",scrollEvent);
}
var init = function(){
initVaria();
// render();
bindEvent();
};
init();
})
</script>
上一篇：CSS 实现隐藏滚动条同时又可以滚动--也可以做自定义的滚动条（2）-- 布局
https://blog.csdn.net/zhangshab/article/details/85127239
下一篇： CSS 实现隐藏滚动条同时又可以滚动--也可以做自定义的滚动条（4）-- 实现（封装版）