<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
width: 100px;
height: 200px;
border: 1px solid red;
/*auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容*/
overflow: auto;
}
</style>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
//获取类属性为scroll的滚动条下拉距离
console.log($(".scroll").scrollTop());
// 获取浏览器滚动条下拉距离
console.log($("html").scrollTop()+$("body").scrollTop());
};
btns[1].onclick = function () {
//设置类属性为scroll的滚动条下拉距离
$(".scroll").scrollTop(100);
// 设置浏览器滚动条的下拉距离
$("html").scrollTop(300);
}
})
</script>
</head>
<body>
<div class="scroll">我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是
div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是
div我是div我是div我是div我是div我是div我是div我
是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是di
v我是div我是div我是div我是div我是div我是div我是di
v我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我
是div我是div我是div我是div我是div我是div我是div我是
div我是div我是div我是div我是div我是div</div>
<button>获取</button>
<button>设置</button>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>