js 如何让滚动条自动定位到页面一半的位置，不要误差 50
展开全部
滚动条，顾名思义，就是可以滚动的条（ScrollBar）。准确地说，滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候，为了能够让有限的空间展示无限的内容所作出的一个妥协的元素，使用它可以让我们查看当前页面内容之外部分的内容。
说到这里您估计都还很清楚，但既然我说滚动条也是一个元素，那么它是不是也在我们的HTML中呢？又或者它是浏览器的固有的一部分？
如果您觉得它是HTML中的一部分，那么您就对了，因为它是依附容器而存在的，而默认产生滚动条的容器是<body></body>或者<html></html>节，它并不是浏览器固有的一部分，浏览器只是默认完整展示了一整个html文档，并不知道它中间的内容究竟是否需要滚动条的支持。
那么让我们回顾上面的那几行代码吧，假设fixed对您当前（失败）的浏览器无效的话，那么我们来看看它们的结构，外面是html标签，向内是body标签，再向内则是div标签，div标签很明显是它们的一部分，这样假设我们的div标签所设置的定位属性无论如何（四个可能的属性皆没起到什么作用）改变不了自身显示状况。我们能否更换一个思路呢？
刚才我说了，滚动条是容器所固有的，不管是外面那个滚动条，还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢？
看到滚动条的控制可以通过CSS的overflow的几个属性来控制，想必大家都不陌生了。（陌生的朋友点击相关链接即可进入查看）
那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢？
<html>
02.
<head>
03.
<title></title>
04.
<style type="text/css">
05.
06.
html,body {
07.
overflow:hidden;
08.
margin:0px;
09.
width:100%;
10.
height:100%;
11.
}
12.
13.
.virtual_body {
14.
width:100%;
15.
height:100%;
16.
overflow-y:scroll;
17.
overflow-x:auto;
18.
}
19.
20.
.fixed_div {
21.
position:absolute;
22.
z-index:2008;
23.
bottom:20px;
24.
left:40px;
25.
width:800px;
26.
height:40px;
27.
border:1px solid red;
28.
background:#e5e5e5;
29.
}
30.
</style>
31.
</head>
32.
33.
<body>
34.
<div class="fixed_div">I am still here!</div>
35.
<div class="virtual_body">
36.
<div style="height:888px;">
37.
I am content !
38.
</div>
39.
</div>
40.
</body>
41.
</html>
说到这里您估计都还很清楚，但既然我说滚动条也是一个元素，那么它是不是也在我们的HTML中呢？又或者它是浏览器的固有的一部分？
如果您觉得它是HTML中的一部分，那么您就对了，因为它是依附容器而存在的，而默认产生滚动条的容器是<body></body>或者<html></html>节，它并不是浏览器固有的一部分，浏览器只是默认完整展示了一整个html文档，并不知道它中间的内容究竟是否需要滚动条的支持。
那么让我们回顾上面的那几行代码吧，假设fixed对您当前（失败）的浏览器无效的话，那么我们来看看它们的结构，外面是html标签，向内是body标签，再向内则是div标签，div标签很明显是它们的一部分，这样假设我们的div标签所设置的定位属性无论如何（四个可能的属性皆没起到什么作用）改变不了自身显示状况。我们能否更换一个思路呢？
刚才我说了，滚动条是容器所固有的，不管是外面那个滚动条，还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢？
看到滚动条的控制可以通过CSS的overflow的几个属性来控制，想必大家都不陌生了。（陌生的朋友点击相关链接即可进入查看）
那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢？
<html>
02.
<head>
03.
<title></title>
04.
<style type="text/css">
05.
06.
html,body {
07.
overflow:hidden;
08.
margin:0px;
09.
width:100%;
10.
height:100%;
11.
}
12.
13.
.virtual_body {
14.
width:100%;
15.
height:100%;
16.
overflow-y:scroll;
17.
overflow-x:auto;
18.
}
19.
20.
.fixed_div {
21.
position:absolute;
22.
z-index:2008;
23.
bottom:20px;
24.
left:40px;
25.
width:800px;
26.
height:40px;
27.
border:1px solid red;
28.
background:#e5e5e5;
29.
}
30.
</style>
31.
</head>
32.
33.
<body>
34.
<div class="fixed_div">I am still here!</div>
35.
<div class="virtual_body">
36.
<div style="height:888px;">
37.
I am content !
38.
</div>
39.
</div>
40.
</body>
41.
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果页面不够长（至少窗口长度两倍），那肯定滚动不到一半的位置。否则任何浏览器都不会产生误差。下面的例子输出 100 个 <p>，页面加载的时候会滚动到第 51 个 <p>。
<script type="text/javascript">
window.onload = function() {
// 测试：100 个 <p> 足够使 scroll 长度大于 window 长度两倍
for(var i = 1; i <= 100; i++) {
document.body.innerHTML += "<p>" + i + "</p>";
}
document.documentElement.scrollTop = 0;
!function scrollToMiddle() {
var scroll_height = 20,
body = document.body,
html = document.documentElement,
mid = parseInt(Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight) / 2);
var interval_scroll = setInterval(function() {
if(html.scrollTop + scroll_height >= mid) {
clearInterval(interval_scroll);
html.scrollTop = mid;
}
else {
html.scrollTop += scroll_height;
}
}, 10);
}();
};
</script>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不同的浏览器也不太相同，多少都会有点差别的
或者在想要定位的位置放个锚点，直接跳过去
或者在想要定位的位置放个锚点，直接跳过去
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
