css:
<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-thumb {
-webkit-border-radius: 3px;
background: #d1d1d1;
border: 1px solid #d1d1d1;
} */
.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>
html:
<!-- begin 组件调用 -->
<div id="zhang" style="height: 200px; width: 300px; border: 1px solid #ccc;">
<pscroll-small templateid="scrollTemp"></pscroll-small>
</div>
<script type="text/html" id="scrollTemp">
<div style="width:200px;height:600px;overflow:hidden;display:block;">我是内容</div>
</script>
<div id="zhang2" style="height: 200px; width: 300px; border: 1px solid #ccc;">
<pscroll-small templateid="scrollTemp2"></pscroll-small>
</div>
<script type="text/html" id="scrollTemp2">
<div style="width:200px;height:600px;overflow:hidden;display:block;">我是内容22</div>
</script>
<!-- end 组件调用 -->
<!-- 非组件的书写方式 -->
<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: 300px; height: 200px;" heihei>
<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>
js:
<script src="./jquery.js"></script>
<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(){
function pscrollBar($small){
// 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;
this.scrollParentDiv = null;
this.$per_scrollbar =null;
this.$per_scrollbar_actual = null;
this.$verticalbar = null;
this.$horizontalbar = null;
this.clientHeight = null;
this.scrollHeight = null;
this.maxScrollTop = null;
this.clientWidth = null;
this.scrollWidth = null;
this.maxScrollLeft = null;
// 自定义滚动条的组件
this.$pscroll_small = $small;
this.scrollcon = null;//滚动条最外层容器
};
pscrollBar.prototype.initVaria = function(scollConId){
this.scrollcon = $(scollConId);
// this.scrollParentDiv = $(".per-scrollbar_wrap");
// this.$per_scrollbar_actual = $(".per-scrollbar_actual");
// this.$per_scrollbar = $(".per-scrollbar");
// this.$verticalbar = $(".per-scrollbar__thumb[verticalbar]");
// this.$horizontalbar = $(".per-scrollbar__thumb[horizontalbar]");
this.scrollParentDiv = this.scrollcon.find(".per-scrollbar_wrap");
this.$per_scrollbar_actual = this.scrollcon.find(".per-scrollbar_actual");
// this.$per_scrollbar = this.scrollcon.find(".per-scrollbar");
this.$per_scrollbar = this.scrollcon;
this.$verticalbar = this.scrollcon.find(".per-scrollbar__thumb[verticalbar]");
this.$horizontalbar = this.scrollcon.find(".per-scrollbar__thumb[horizontalbar]");
this.clientHeight = this.$per_scrollbar.height();
this.scrollHeight = this.$per_scrollbar_actual.height();
this.maxScrollTop = this.scrollHeight - this.clientHeight;
this.clientWidth = this.$per_scrollbar.width();
this.scrollWidth = this.$per_scrollbar_actual.width();
this.maxScrollLeft = this.scrollWidth - this.clientWidth;
};
// 将滚动条及内容放在dom中
pscrollBar.prototype.renderScroll = function(){
var _that = this;
var htmls = $("script[type='text/html']");
var templateid = this.$pscroll_small.attr("templateid");
var $scrollHtml_str = $(_that.scrollHtml(templateid));
htmls.each(function(index,item){
var $item = $(item);
if($item.attr("id") == templateid){
_that.$pscroll_small.parent().html($scrollHtml_str);
//cutomScrollContent存放的是<div style="width:200px;height:600px;overflow:hidden;display:block;">我是内容</div>
var cutomScrollContent = $item.html().replace(/\s+|\n/g, " ").replace(/>\s</g, "><");
// 将自定义的内容放在滚动条容器中
$scrollHtml_str.find('.per-scrollbar_actual').html(cutomScrollContent);
// 绑定完毕以后dom元素加载完成,在赋值dom元素,绑定事件
var scrollId = '#p_srcoll_'+templateid;
_that.initVaria(scrollId);
_that.bindEvent();
}
});
};
// 滚动条布局
pscrollBar.prototype.scrollHtml = function(id){
// <!-- per-scrollbar_wrap scroll事件 -->
var html_s = '<div pc="" class="per-scrollbar" scrollmax="" _pt="pscroll-small" id='+ "p_srcoll_" + id +' _id="bfefcjdedeedbbhfjee" style="max-width: 300px;max-height: 200px; border: 1px solid gray;">' +
'<div class="per-scrollbar_wrap" scrollparent="" style="width: 300px; height: 200px;">' +
'<div class="per-scrollbar_actual" scroll="">'+
// <!-- begin 这里写自己要显示的内容 -->
// <!-- 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;">'+
'<div class="per-scrollbar__thumb" verticalbar="" style="height: 33.3333%;"></div>'+
'</div>'+
// <!-- end 自定义的滚动条 -->
'</div>'
return html_s;
}
// 计算纵向滚动条的高度(记住不是滚动条移动的高度)
pscrollBar.prototype.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 = this.$per_scrollbar.height();
var scrollHeight = this.$per_scrollbar_actual.height();
var verticalbarH = this.clientHeight / (scrollHeight/clientHeight);
this.$verticalbar.height(verticalbarH);
};
// 滚动事件
pscrollBar.prototype.scrollEvent = function(event) {
var scrollTop = 0, scrollLeft = 0;
this.getVerticalbarH();
debugger;
if (this.maxScrollTop > 0) {
scrollTop = this.scrollParentDiv.scrollTop();
var translateY = Math.division(scrollTop, this.clientHeight);
translateY = Math.multiplication(translateY, 100);
// $(".per-scrollbar__thumb[verticalbar]").css({ transform: ' translateY(' + translateY + '%)' });
this.$verticalbar.css({ transform: ' translateY(' + translateY + '%)' });
}
if (this.maxScrollLeft > 0) {
scrollLeft = this.scrollParentDiv.scrollLeft();
var translateX = Math.division(scrollLeft, this.clientWidth);
translateX = Math.multiplication(translateX, 100);
//$(".per-scrollbar__thumb[horizontalbar]").css({ transform: ' translateX(' + translateX + '%)' });
this.$horizontalbar.css({ transform: ' translateX(' + translateX + '%)' });
}
};
// 绑定事件
pscrollBar.prototype.bindEvent = function(){
// $(".per-scrollbar_wrap").on("scroll",scrollEvent);
var _that = this;
this.scrollParentDiv.on("scroll",function(event){
_that.scrollEvent(event);
});
};
var init = function(){
$("pscroll-small").each(function(index,item){
var aa = new pscrollBar($(item));
aa.renderScroll()
})
};
init();
});
</script>
上一篇:CSS 实现隐藏滚动条同时又可以滚动--也可以做自定义的滚动条(3)-- 实现(普通版)