滚动条三要素scrollTop clientHeight scrollHeight

滚动条三要素scrollTop clientHeight scrollHeight<!DOCTYPEhtml><html> <head> <metacharset=”utf-8″> <title></title> <scriptsrc=”js/jquery-3.3.1.min.js”type=”text/javascript”charset=”utf-8″></s…

大家好,又见面了,我是你们的朋友全栈君。

插件
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'})
		}
	})
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163759.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • php错误处理_MSVCP120.dll

    php错误处理_MSVCP120.dll当您搜索“phpMSVCR110.dll”时,由于此问题的链接显示在返回结果的最上方(更不用说它的浏览量已超过10万,并且还在不断增长),因此,这里有一些其他说明,在您寻求以下内容时可能会派上用场解决MSVCR110.dll错误…答案中描述的方法不仅对MSVCR110.dll情况有效,而且在寻找其他版本(例如较新的MSVCR71.dll)时也适用,并且我将答案更新为包括VC15,即使它不…

    2022年10月25日
  • fastjson中jsonarray转list

    fastjson中jsonarray转listhttps://www.jianshu.com/p/d06dec564459

  • Random的nextInt()用法「建议收藏」

    Random的nextInt()用法「建议收藏」Random的nextInt()用法一、先看这样一个有趣的题目:1、设计一个密码的自动生成器:密码由大写字母/小写字母/数字组成,生成六位随机密码。2、分别以1、2、3作为种子数创建Random对象,生成六位随机密码进行测试。问题答案核心代码如下:importjava.util.Random;importjava.util.Scanner;publicclassRandomT…

  • java四舍五入取整算法(小数四舍五入取整公式)

    简介Math类中提供了5个与取整相关的函数,如下所示:staticdoubleceil(doublea):天花板函数,返回大于等于a的最小整数(但是以浮点数形式存储)。staticdoublefloor(doublea):地板函数,返回小于等于a的最大整数(但是以浮点数形式存储)。staticdoublerint(doublea):四舍五入函数,返

  • plsql developer配置数据库连接_plsql使用教程

    plsql developer配置数据库连接_plsql使用教程一、概念PL/SQLDeveloper是一个集成开发环境,专门面向Oracle数据库存储程序单元的开发。如今,有越来越多的商业逻辑和应用逻辑转向了OracleServer,因此,PL/SQL编程也成了整个开发过程的一个重要组成部分。PL/SQLDeveloper侧重于易用性、代码品质和生产力,充分发挥Oracle应用程序开发过程中的主要优势。Oracle数据库并不提供图形界面的开发…

  • java uniqueresult_关于query.uniqueResult报错问题

    java uniqueresult_关于query.uniqueResult报错问题publicfloatcountmonthmoney(Longblogid){java.text.SimpleDateFormatsf=newjava.text.SimpleDateFormat(“yyyyMM”);Stringtoday=sf.format(newjava.util.Date());StringBuilderstring…publicfloatcountmonthmone…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号