1.之前我们学习的JS盒子模型中：client系列/offset系列/scrollWidth // scrollHeight都是"只读"属性->只能通过属性获取值，不能通过属性修改元素 //的样式 //
2.scrollTop//scrollLeft：滚动条卷去的高度/宽度(这两个属性是唯一"可读写") // 我们的scrollTop的值是存在边界值(最大和最小值的),我们设置的值比最小值小或者比最大值大都没用,起到效果的依然是边界值 //最小值是零 // box.scrollTop = -1000;//直接回到了容器的顶部,没有超出 //console.log(box.scrollTop);// 0 //最大值是=真实高度-当前容器一屏幕的高度 //var maxTop=box.scrollHeight-box.clientHeight // console.log(maxTop);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
margin: 100px;
border: 10px solid green;
overflow: auto ;
}
</style>
</head>
<body>
<div id="box">
要得到你必须付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界真的是平衡的，每个人都是通过自己的努力，去决定自己生活的样子
要得到你必须付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界真的是平衡的，每个人都是通过自己的努力，去决定自己生活的样子
要得到你必须付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界真的是平衡的，每个人都是通过自己的努力，去决定自己生活的样子
</div>
<script type="text/javascript">
var box = document.getElementById("box");
//1.之前我们学习的JS盒子模型中：client系列/offset系列/scrollWidth
// scrollHeight都是"只读"属性->只能通过属性获取值，不能通过属性修改元素
//的样式
//2.scrollTop//scrollLeft：滚动条卷去的高度/宽度(这两个属性是唯一"可读写")
// 我们的scrollTop的值是存在边界值(最大和最小值的),我们设置的值比最小值小或者比最大值大都没用,起到效果的依然是边界值
//最小值是零
// box.scrollTop = -1000;//直接回到了容器的顶部,没有超出
//console.log(box.scrollTop);// 0
//最大值是=真实高度-当前容器一屏幕的高度
//var maxTop=box.scrollHeight-box.clientHeight
// console.log(maxTop);
</script>
</body>
</html>
时间： 2024-10-21 01:36:05