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