滚动条三要素scrollTop clientHeight scrollHeight
滚动条三要素scrollTop clientHeight scrollHeight
全栈程序员站长
发布于 2022-09-15 10:51:10
发布于 2022-09-15 10:51:10
大家好，又见面了，我是你们的朋友全栈君。
插件 https://github.com/inuyaksa/jquery.nicescroll
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css"> html,body{
width: 100%; overflow: hidden; } *{
margin: 0; padding: 0; } .wrap{
width: 100%; height: 1500px; background: #00BFFF; } .twowrap{
width: 100%; height: 1500px; background: #009688; } </style>
</head>
<body>
<div class="wrap">
</div>
<div class="twowrap">
</div>
</body>
<script type="text/javascript"> //我的方法是把原先的滚动条隐藏 然后通过设置scroll来控制滑动，不同的浏览器获得scroll的方法不同，具体看下面那个代码块 $("body").on("mousewheel",function(event){
console.log(document.documentElement.scrollTop); if(document.documentElement.scrollTop < 0){
document.documentElement.scrollTop = 0; }else{
if(event.originalEvent.deltaY > 0){
document.documentElement.scrollTop = document.documentElement.scrollTop + 100; }else if(event.originalEvent.deltaY < 0){
document.documentElement.scrollTop = document.documentElement.scrollTop - 100; } } }) </script>
</html>//变量scrollTop是滚动条滚动时，距离顶部的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动条到底部的条件
if (scrollTop + windowHeight == scrollHeight) {
// //写后台加载数据的函数
// }滚动条的样式设置
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
height: 10px;
width: 10px;
background-color: #fff;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
padding-top: 100px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
background-color: #dadada;
min-height: 26px;
border-radius: 4px;
}下面这个demo是自制滚动条，包括滚动条的拖动和内容区的滚动，目前还没有加入click事件，只能上下滚动（写的我腰疼）
html
<div class="leftNavWrap">
<div class="leftNav">
<div class="topNav leftNavScroll">
<div class="scrollbarWrap">
<div class="scrollbar">
<div id="scrollSlider">
</div>
</div>
</div>
<div class="leftNavList" style="width: 97%;height: 1500px;">
<div style="height: 500px;background: gray;">111111</div>
<div style="height: 500px;background:green">222222</div>
<div style="height: 500px;background: dodgerblue;">33333</div>
</div>
</div>
<div class="bottomNav">
</div>
</div>
</div>css
.leftNavWrap{
position: absolute;
left: 0;
top: 0;
height: 100%;
}
.leftNav{
position: relative;
height: 100%;
width: 240px;
background: #000000;
overflow: hidden;
}
.topNav{
position: relative;
width: 100%;
background: #38393e;
margin-top: 61px;
overflow-y: hidden;
}
.topNav::-webkit-scrollbar{
width: 7px;
height: 8px;
background: #38393e;
}
.topNav::-webkit-scrollbar-thumb{
border-radius: 5px;
background: #73757b;
}
.bottomNav{
position: relative;
width: 100%;
height: 150px;
background: #FF9600;
margin-top: 2px;
}
/**************自制滚动条*****************/
.scrollbarWrap{
position: absolute;
background: #FFFFFF;
right: 0;
top: 0;
height: 100%;
width: 7px;
}
.scrollbar{
position: relative;
height: 100%;
width: 100%;
}
#scrollSlider{
width:100%;
position: relative;
top:0;
border-radius: 5px;
background: #73757b;
}js
(function(){
setTopNavH()
setScrollSlider()
})()
function setTopNavH(){
let height = window.innerHeight - 130;
$('.topNav').css({
'height':height+'px'})
$(window).resize(function(){
height = window.innerHeight - 130;
$('.topNav').css({
'height':height+'px'})
})
}
function setScrollSlider(){
//记录最开始的元素的高度。。。在改变margin的时候元素的高度会跟着改变
let elementHeight = $('.topNav')[0].scrollHeight;
//滚动条的总长度
let sHeight = $('.topNav')[0].scrollHeight;
//可见高度
let oHeight = $('.topNav')[0].offsetHeight;
//百分比
let a = oHeight/sHeight;
//滑块高度
let sliderHeight = oHeight * a;
$('#scrollSlider').css({
'height': sliderHeight + 'px'})
$(window).resize(function(){
let top = $('.leftNavList').css('marginTop').replace('px','');
top = -parseInt(top);
//滚动条的总长度
sHeight = $('.topNav')[0].scrollHeight + top;
//可见高度
oHeight = $('.topNav')[0].offsetHeight;
//百分比
a = oHeight/sHeight;
//滑块高度
sliderHeight = oHeight * a;
console.log(sHeight + ":::" + oHeight+"::::" +sliderHeight)
$('#scrollSlider').css({
'height': sliderHeight + 'px'})
})
$('.topNav').on('mousewheel',function(e){
e = e || window.event;
//滚动条的总长度
sHeight = $('.topNav')[0].scrollHeight;
//可见高度
oHeight = $('.topNav')[0].offsetHeight;
let scrollY = e.originalEvent.deltaY;
let sliderTop = $('#scrollSlider').css('marginTop').replace('px','');
let sliderHeight = $('#scrollSlider').css('height').replace('px','');
let navListTop = $('.leftNavList').css('marginTop').replace('px','');
sliderTop = parseInt(sliderTop);
sliderHeight = parseInt(sliderHeight);
navListTop = parseInt(navListTop);
if(scrollY > 0){
sliderTop += oHeight/15;
navListTop -= sHeight/14;
if(sliderTop >= oHeight - sliderHeight){
sliderTop = oHeight - sliderHeight;
navListTop = oHeight - elementHeight;
}
$('#scrollSlider').css({
'marginTop': sliderTop+'px'})
$('.leftNavList').css({
'marginTop': navListTop+'px'})
}else{
sliderTop -= oHeight/15;
navListTop += sHeight/14;
if(sliderTop <= 0){
sliderTop = 0;
navListTop = 0;
}
$('#scrollSlider').css({
'marginTop': sliderTop + 'px'})
$('.leftNavList').css({
'marginTop': navListTop+'px'})
}
})
}发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/163759.html原文链接：https://javaforall.cn
本文参与?腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读