使用场景
适用情况
这两个属性只能用于元素设置了overflow的css样式中。否者这两个属性没有任何意义。且overflow的值不能为visible，但可以为hidden,auto,scroll的之中，但是hidden最常见。
使用场景
当你的子盒子宽度或者高度大于父盒子，且父盒子设置了overflow属性时，就可以使用js操作scrollLeft和scrollTop
这里拿overflow=auto举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
margin: 0 auto;
width: 800px;
height: 400px;
background-color: palegoldenrod;
overflow: auto;
}
.box1 {
width: 2000px;
height: 400px;
font-size: 40px;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="box1" id="box1">
0000000000001111111111122222222222222222333333333333334444444444444444555555555555555566666666666666777777777777788888888888999999999999
</div>
</div>
<script>
let box =document.getElementById('box')
let box1 =document.getElementById('box1')
</script>
</body>
</html>
具体演示
查看
我们可以打印一下scrollLeft，注意是父盒子的scrollLeft
<button onclick="btnClick()">显示scrollLeft</button>
function btnClick() {
console.log(box.scrollLeft);
}
设置
box.scrollLeft = 800
scrollTop与scrollLeft基本相同，只不过是距离顶部的距离
1102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
