Question

每当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 。是否有任何数学公式（不确定）计算页面的整个长度（元素的长度） - （浏览器的视图维度）/（通过一些未知的变量）。

Answer 1

浏览器获取屏幕的高度（比如1000px），并计算文档总高度的百分比。如果文档高度为3000px，则结果为~33％。因此，滚动条的高度必须是屏幕高度的33％，以像素为单位为333px。

Answer 2

可能是这样的

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

您可以获得身高和窗户高度之间的比率，然后将窗口高度除以该比率。

滚动长度如何根据网页长度的增加而变化

2 个答案: