jQuery的scroll

Love The Way You Lie 2022-12-02 04:26 187阅读 0赞

scrollTop垂直滚动  
scrollLeft水平滚动  
scrollTop();读取或设置滚动条的y坐标  
代码示例如下

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>scroll</title>
    		<style type="text/css">
    			#p1{
    				width: 150px;
    				height: 200px;
    				overflow: auto;
    			}
    		</style>
    		<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
    		<script type="text/javascript">
    			$(function(){
    				$("#b1").click(function(){
    					console.log($("#p1").scrollTop());
    					//读取页面滚动条的Y坐标（兼容chrome和IE）
    					console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop());
    				});
    				$("#b2").click(function(){
    					$("#p1").scrollTop(100);//滚动到指定位置
    					$(document.documentElement).scrollTop(100)+$(document.body).scrollTop(100);
    				});
    			});
    		</script>
    	</head>
    	<body style="height: 2000px;">
    		<p id="p1">
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		热爱可抵岁月漫长，温柔可挡艰难时光。
    		</p>
    		<button id="b1">获取scrollTop值</button>
    		<button id="b2">设置scrollTop值</button>
    	</body>
    </html>