Question

怎么做这个效果？当用户滚动浏览器时，50％滚动到底部，50％滚动到底部。

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

Answer 1

您要问的是：＆＃34;如何使元素在与其他内容相反的方向滚动。＆＃34;

设置大致如下：

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

怎么做这个效果？当用户滚动浏览器时，50％滚动到底部，50％滚动到底部

1 个答案: