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{ 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>