我正在开发一个水平网站，当用户向下滚动时我需要进行水平滚动。有什么想法如何用 javascript 实现这一点吗？
这是小提琴： https: //jsfiddle.net/erqbtL23/
这是代码：
body {
margin: 0;
height: 100vh;
}
* {
box-sizing: border-box;
}
.container {
overflow-x: auto;
white-space: nowrap;
}
.container>div {
background: red;
display: inline-block;
width: 100vw;
height: 100vh;
margin-left: -4px;
}
.container>div:first-child {
margin-left: 0;
}
.container::-webkit-scrollbar {
display: none;
}
.container>div:nth-child(even) {
background: blue;
}<div class="container">
<div>scroll left</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
</div>我在一个对多个元素（文本、图像等）具有视差效果的网站上工作。当元素位于视口底部时，我需要启动视差效果。
在这种情况下，元素距离页面顶部 3000px，当元素位于视口中时，我想将 window.pageYOffset 重置为零（或类似的值），这样效果才有意义。
这段代码可以工作，但效果不好，当我更改分隔符高度时，视差效果的开始位置不同。您可以尝试将 css 中的分隔符高度更改为 500px 和 5000px。
对此有什么更好的解决方案？
谢谢
这是小提琴： https: //jsfiddle.net/you8c6d7/
function parallax(element, delay) {
var start = document.querySelector(element).getBoundingClientRect().top;
var px = window.pageYOffset - (start * 2 + window.innerHeight);
var elClass = document.querySelector(element);
elClass.style.transform = 'translateY(' + '-' + px / delay + 'px' + ')';
};
window.addEventListener('scroll', function() {
parallax('.box', 5);
});body {
height: 6000px;
margin 0;
}
.box {
background: blue;
width: 300px;
height: 300px;
}
.separator {
height: 500px;
background: grey; …