gpt4 book ai didi

javascript - 非常基本的滚动条没有按预期运行的问题

转载 作者:行者123 更新时间:2023-11-28 03:58:46 25 4
gpt4 key购买 nike

我正在尝试制作一个根据滚动量在页面上下移动的 div。我使用 scrollTop 返回浏览器滚动条的顶部值,并将我的 div 设置到该位置。但是,我得到了一些有趣的结果,当我滚动时,我的 div 在页面上到处跳动。谁能帮我弄清楚为什么?

HTML

<body id="body">
<div id="scrollBar"></div>
</body>

Javascript

$(window).mousewheel(function(turn, delta) {

if (delta == 1) // going down

document.getElementById("scrollBar").style.top = $("body").scrollTop() + "px";

else //going up

document.getElementById("scrollBar").style.top = $("body").scrollTop() + "px";

});

CSS

#scrollBar {
position:relative;
right:0px;
width: 5px;
height:30px;
background-color:red;
z-index:2000;
}

谢谢

最佳答案

为了得到你想要做的事情:

首先您需要计算滚动条的高度。您可以使用:

window.innerHeight * (window.innerHeight/document.body.offsetHeight)

然后使用 $.scroll() 并将您的逻辑放入其中:

$(document).ready(function(){
var brwserSBHeight = window.innerHeight * (window.innerHeight / document.body.offsetHeight) +"px"
document.getElementById("scrollBar").style.height = brwserSBHeight ;

$(window).on('scroll',function(e){
document.getElementById("scrollBar").style.top = $(window).scrollTop() + "px";
document.getElementById("scrollBar").style.top = $(window).scrollTop() + "px";

})

然后,更改 css 中的 position:fixed:

Demo

关于javascript - 非常基本的滚动条没有按预期运行的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43313801/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com