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>