gpt4 book ai didi

javascript - 这个效果怎么做?当用户滚动浏览器时,50% 滚动到底部,50% 滚动到底部

转载 作者:行者123 更新时间:2023-11-28 04:35:48 25 4
gpt4 key购买 nike

这个效果怎么做?当用户滚动浏览器时,50% 滚动到底部,50% 滚动到底部。

http://www.valentinagallo.us/site/#/collection/

最佳答案

您要问的是:“如何使元素向与其余内容相反的方向滚动。”

设置大致是这样的:

HTML:

<body>
<div class="leftContent">
...
</div>
<div class="rightContent">
...
</div>
</body>

CSS:

.leftContent {
width: 50%;
}

.rightContent {
position: fixed;
right: 0px;
width: 50%;
}

JS:

const rightContent = document.querySelector('.rightContent');
document.addEventListener('scroll', scrollHandler, { passive: true });

function scrollHandler(event) {
rightContent.style.bottom = (window.scrollY * -1) + 'px';
}

scrollHandler()

演示:
https://codepen.io/guidobouman/pen/BpyYxp

关于javascript - 这个效果怎么做?当用户滚动浏览器时,50% 滚动到底部,50% 滚动到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41485929/

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