gpt4 book ai didi

javascript - 如何使这个滚动条使用JavaScript工作

转载 作者:行者123 更新时间:2023-11-30 00:33:35 25 4
gpt4 key购买 nike

[注意:我想使用JavaScript来做]

我想获取一个JavaScript,使用户只能看到“ content-one”或“ content-two”或“ content-three”。简而言之,整个窗口将是红色或绿色或蓝色。浏览器打开时,全屏将变为红色。向下滚动时,它将先是绿色,然后是蓝色。另一方面,当用户将要向上滚动时,它将是绿色然后是红色。 [注意:整个过程中都不会产生合并的背景色]。你能帮我做到吗?这是我到目前为止正在尝试的代码:



< script >
function scrollfunction() {

h1 = document.getElementById("content-one").offsetHeight;
h2 = document.getElementById("content-two").offsetHeight;
h3 = document.getElementById("content-three").offsetHeight;

hs = document.body.scrollTop;
var hb = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;


if ((hs + hb) > h1) {
vall = (hs + hb);
window.scrollTo(0, vall);
}
} < /script>

body,
html {
height: 100%;
}

<body onscroll="scrollFunction()">
<div id="content-one" style="width:100%; background:red; height:100%;"></div>
<div id="content-two" style="width:100%; background:green; height:200%;"></div>
<div id="content-three" style="width:100%; background:blue; height:300%;"></div>
</body>

最佳答案

这应该工作:

<script>
function scrollFunction() {
h1 = document.getElementById("content-one").offsetHeight;
h2 = document.getElementById("content-two").offsetHeight;
h3 = document.getElementById("content-three").offsetHeight;
hs = document.body.scrollTop;
hb = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

// window height - scroll top
dumy = hs % hb ;
direction = (dumy/hb) * 100 ;

//downward
if ( direction < 50) {
vall = hs - ( -hb ) - dumy ;
window.scrollTo(0, vall);

}

// upward
if ( direction > 50) {
vall = hs - dumy ;
window.scrollTo(0, vall);

}


}
</script>

关于javascript - 如何使这个滚动条使用JavaScript工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28232521/

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