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

标签 javascript jquery css

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

相关文章:

javascript - 在 Angular 中,可以通过哪些方式自动更新绑定(bind)到方法的数据绑定(bind)?

javascript - 使用对话框从 python 中的站点下载文件

javascript - 当 Array.prototype.slice.call 不起作用时,如何将具有属性列表的对象转换为数组?

javascript - 禁用/重新启用 javascript webui-popover 时遇到问题

html - css3 背景大小 :cover leaving white space on resize

javascript - 水平居中图像大于屏幕并在浏览器调整大小时缩小图像

javascript - 运行 yarn dev 后出现 Fusion.js 错误

javascript - 在 Wordpress/PHP 中 Ping 一个 IP - 得到结果

javascript - 如何为 jQuery.validator 添加自定义消息?

html - 将鼠标悬停在 div2 上时如何更改 div1 的图像?