javascript - 使用 jQuery 暂时延迟页面滚动

Question

到目前为止，我已经创建了一个页面，当向下滚动并到达容器 div 时，其中的许多 div 开始沿页面水平滚动。我的问题是我希望页面停止垂直滚动，直到所有 div 一直滚动到左侧，然后页面再次开始垂直滚动。本质上，用户向下滚动到容器，div 的水平滚动被触发，一旦跨过页面，再次开始向下滚动。这是我目前所拥有的:

代码:

$(document).ready(function() {

  var windowWidth = $(window).width();
  $("#service1, #service2, #service3").css({
    "left": windowWidth
  });

  $(window).scroll(function() {
    $("#service1, #service2, #service3").css({
      "left": windowWidth - $(window).scrollTop()
    });
  });
});

#hero {
  background-color: rgba(0, 0, 0, 0.5);
  height: 900px;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}

#about {
  background-color: rgba(0, 0, 0, 0);
  height: 900px;
  width: 100%;
}

#services {
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 900px;
  margin-bottom: 900px;
  width: 100%;
}

#service1 {
  background-color: white;
  box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
  ;
  height: 700px;
  position: absolute;
  width: 1200px;
}

#service2 {
  background-color: white;
  box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
  ;
  height: 700px;
  margin-left: 1300px;
  position: absolute;
  width: 1200px;
}

#service3 {
  background-color: white;
  box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
  ;
  height: 700px;
  margin-left: 2600px;
  position: absolute;
  width: 1200px;
}

<div id="hero"></div>

<div id="about"></div>

<div id="services">
  <div id="service1"></div>
  <div id="service2"></div>
  <div id="service3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

我希望我已经说清楚了。

Answer 1

您可以使用 DOMMouseScroll 事件来检查滚动并使用检测和替换事件阻止它。请尝试以下。当滚动到达第三部分时，我阻止垂直滚动，当到达左侧定义的大小时，我有反应。您可以根据需要进行修改。

$(document).ready(function() {

	var windowWidth = $(window).width();
	$("#service1, #service2, #service3").css({
		"left": windowWidth
	});

	function scrollHorizontally(e) {
		e = window.event || e;
		var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
		$(document).scrollLeft($(document).scrollLeft()-(delta*40)); 
		$("body").scrollLeft($(document).scrollLeft()-(delta*40)); 
		e.preventDefault();
	}

	$('html').on ('DOMMouseScroll', function (e) {
		var sens = e.originalEvent.detail;
		var lastDivTop = ($(window).scrollTop() - $("#services").offset().top)
		var lastDivLeft = ($(window).scrollLeft() - $("#services").offset().left)
		if (sens < 0) { //scroll Up
			if(lastDivLeft > 0 && lastDivTop < 100 ){
				scrollHorizontally(e)
        $(window).scrollTop($("#services").offset().top)
			}
		} else if (sens > 0) { //scroll down
			if(lastDivTop > 0 && lastDivLeft < 1500){
				scrollHorizontally(e)
        $(window).scrollTop($("#services").offset().top)
			}
		}
	});
});

#hero {
  background-color: rgba(0, 0, 0, 0.5);
  height: 900px;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}

#about {
  background-color: rgba(0, 0, 0, 0);
  height: 900px;
  width: 100%;
}

#services {
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 900px;
  margin-bottom: 900px;
  width: 100%;
}

#service1 {
  background-color: white;
  box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
  ;
  height: 700px;
  position: absolute;
  width: 1200px;
}

#service2 {
  background-color: white;
  box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
  ;
  height: 700px;
  margin-left: 1300px;
  position: absolute;
  width: 1200px;
}

#service3 {
  background-color: white;
  box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24);
  ;
  height: 700px;
  margin-left: 2600px;
  position: absolute;
  width: 1200px;
}

<div id="hero"></div>

<div id="about"></div>

<div id="services">
  <div id="service1"></div>
  <div id="service2"></div>
  <div id="service3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>