这个效果怎么办?当用户滚动浏览器时,然后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

10-07 14:11
查看更多