使水平滚动停止div结束

Question

我正在尝试创建一个包含三个部分的单页。第二个需要水平滚动(例如产品线(，然后返回垂直滚动。

我已经用纯JS完成了它，但在第二个div结束后，我无法继续垂直滚动。无法访问此部分。

这是我的密码笔：https://codepen.io/yakir-mordehay/pen/XyKEgr

(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.getElementById('test').scrollLeft -= (delta * 40); // Multiplied by 40
e.preventDefault();
if ((delta > 0 && document.getElementById('test').scrollLeft > 0) || (delta < 0 && document.getElementById('test').offsetWidth + document.getElementById('test').scrollLeft < e.scrollWidth)) {
}
}
if (document.getElementById('test').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('test').addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
document.getElementById('test').addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
document.getElementById('test').attachEvent("onmousewheel", scrollHorizontally);
}
})();

* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
height: 100%;
background-color: gray;
}
.view {
height: 100%;
background-color: lawngreen;
}
.sContainer {
height: 100%;
white-space: nowrap;
overflow-x: auto;
}
.hPage {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
font-size: 40px;
color: white;
}

</script>
<div class="wrapper">
<div class="view">Home</div>
<div class="sContainer" id="test">
<div class="hPage"> view1</div>
<div class="hPage"> view2</div>
<div class="hPage"> view3</div>
</div>
<div class="view">END</div>
</div>

我试图在JS:中实现这样的东西

if((delta > 0 && document.getElementById('test').scrollLeft > 0) || (delta < 0 && document.getElementById('test').offsetWidth+document.getElementById('test').scrollLeft < e.scrollWidth)) {
e.preventDefault();
}

但效果不太好。它只是同时垂直和水平滚动。

有什么想法吗？

Answer 1

(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.getElementById('test').scrollLeft -= (delta * 40); // Multiplied by 40
if((delta > 0 && document.getElementById('test').scrollLeft === 0) || (delta < 0 && document.getElementById('test').offsetWidth+document.getElementById('test').scrollLeft > 3*document.getElementById('test').offsetWidth)) {
}else{
e.preventDefault();
}
}
if (document.getElementById('test').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('test').addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
document.getElementById('test').addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
document.getElementById('test').attachEvent("onmousewheel", scrollHorizontally);
}
})();

* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
height: 100%;
background-color: gray;
}
.view {
height: 100%;
background-color: lawngreen;
}
.sContainer {
height: 100%;
white-space: nowrap;
overflow-x: auto;
}
.hPage {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
font-size: 40px;
color: white;
}

<div class="wrapper">
<div class="view">Home</div>
<div class="sContainer" id="test">
<div class="hPage"> view1</div>
<div class="hPage"> view2</div>
<div class="hPage"> view3</div>
</div>
<div class="view">END</div>
</div>

if((delta > 0 && document.getElementById('test').scrollLeft === 0) || (delta < 0 && document.getElementById('test').offsetWidth+document.getElementById('test').scrollLeft > 3*document.getElementById('test').offsetWidth)) {
}else{
e.preventDefault();
}

其中3是100%宽度的div数量