滾動長度如何根據網頁長度的增加而改變

每當html頁面的尺寸與屏幕視圖的滾動條不同時，就不需要了，因爲你繼續添加網頁中的元素（請參閱我的代碼）和長度該頁面大於視圖滾動條出現，並根據網頁長度的變化增加。我已經看到如何使用scrolltop（）等找到滾動位置，但從來沒有理解它是如何出現的。滾動長度如何根據網頁長度的增加而改變

簡單啞代碼

<html> 
<head> 
<style> 
.box1{ 
height:50%; 
width:100%; 
border:1px solid black; 
} 
.box2{ 
height:50%; 
width:100%; 
border :1px solid black; 
} 

</style> 
</head> 
<body> 
<div class="box1"> 
</div> 
<div class="box2"> 
</div> 
</body> 
</html>

頁長度增加

<html> 
<head> 
<style> 
.box1{ 
height:50%; 
width:100%; 
border:1px solid black; 
} 
.box2{ 
height:50%; 
width:100%; 
border :1px solid black; 
} 

.box3{ 
height:50%; 
width:100%; 
border:1px solid black; 
} 

</style> 
</head> 
<body> 
<div class="box1"> 
</div> 
<div class="box2"> 
</div> 
<div class="box3"> 
</div> 
</body> 
</html>

I am curious of how the browser calculates scroll bar length(in %) according to the length of the page and how the scroll bar length increases/decreases based on the webpage。是否有任何數學公式（不確定），如計算頁面的總長度（元素的長度） - （瀏覽器的視圖維度）/（由某個未知變量）。

來源

2017-03-24 vineeth

瀏覽器獲取屏幕的高度（例如1000px），並計算文檔總高度的百分比。如果文檔高度是3000px，那麼結果是〜33％。因此，滾動條的高度必須是屏幕高度的33％，像素爲333px。

來源

2017-03-24 12:03:10

這可能是這樣的

var heightIs = parseInt($(window).height()/($("body").height()/$(window).height()));

你得到bewteen車身高度和窗口高度的比值，然後劃分與比窗口的高度。

來源

2017-03-24 12:05:43

滾動長度如何根據網頁長度的增加而改變

回答

相關問題