div水平滚动时暂停垂直滚动，水平滚动结束时继续垂直滚动答案

【问题标题】：Pause vertical scroll while div scrolls horizontally, at the end of horizontal scroll continue scrolling verticallydiv水平滚动时暂停垂直滚动，水平滚动结束时继续垂直滚动
【发布时间】：2019-04-23 00:41:31
【问题描述】：

有一组图像垂直堆叠在具有overflow-y: auto 的<div class="container"> 中。在第一张图片之后，有一个<div class="info">，其中包含一些比父div 更宽的文本，并且需要水平滚动（`overflow-x: auto'）。

这个想法是让container 垂直滚动，直到info 碰到container 顶部边缘。此时垂直滚动停止，info 开始水平滚动。到达末尾后，父 container 的垂直滚动将继续，直到其内容的末尾。

它应该在向上滚动时工作。

我尝试了几个选项，jQuery、视差、纯 CSS，但最后没有任何效果。

这是代码笔示例：https://codepen.io/front-man/pen/mQqvPb

【问题讨论】：

您希望垂直滚动在到达顶部边缘时水平滚动info，还是禁用垂直滚动直到水平滚动info？
是的，假设这是击中顶部边缘。 info 也将是全高的，所以当它碰到 container 的顶部边缘时，它应该开始使用鼠标滚轮水平滚动。

标签： jquery css scroll parallax horizontalscrollview

【解决方案1】：

首先让我们使用 CSS 的垂直滚动来处理水平滚动，想法是将容器旋转 -90 度，将内容旋转 90 度，并使用默认的东西来滚动，如下所示：

.container {
  width: 400px;
  height: 410px;
  overflow-y: scroll;
  
  * {
    margin-bottom: 10px;
  }
}

.info {
  height: 400px;
  padding: 0 20px;
  
  white-space: nowrap;
  
  background-color: #333;
  color: #fff;  
  font-size: 40px;
  
  transform: rotate(-90deg)  translateY(-100%);
  transform-origin: right top;
  
  overflow-y: auto;  //this will be add using js
} 

.info p {
  transform: rotate(90deg)  translateX(137px);
}

<div class="container">
  <div class="info">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus aspernatur reprehenderit placeat facere ut nam molestias nobis deleniti alias.
      </p>
  </div>
</div>

如果你只使用这个，当你用力向下滚动时，你可以传递.info，它不会把焦点放在滚动本身，所以用js你可以在它的顶部小于屏幕顶部时停止默认滚动并且将滚动的位置设置为元素位置，然后激活.info的水平滚动（注意我没有在CSS中激活它）当它完成停用水平滚动并将继续垂直滚动：

var originalelementTop = $(".info").offset().top;
function myFunction() {
  var $info = $(".info");
  
  var elementTop = $info.offset().top;
  var viewportTop = $(window).scrollTop();
  
  var newScrollTop = $info.scrollTop(),
      width = $(".info p").outerWidth() + 20,
      scrollWidth = $(".info p").get(0).scrollWidth; 
  
  if (elementTop <= viewportTop && scrollWidth - newScrollTop != width){
      $info.css("overflow-y", "auto");
      $(".container").scrollTop(originalelementTop);
  } else {
    $info.css("overflow-y", "hidden");
  }
};

.container {
  width: 400px;
  height: 410px;
  overflow-y: scroll;
  
  * {
    margin-bottom: 10px;
  }
}

.info {
  height: 400px;
  padding: 0 20px;
  
  white-space: nowrap;
  
  background-color: #333;
  color: #fff;  
  font-size: 40px;
  
  transform: rotate(-90deg)  translateY(-100%);
  transform-origin: right top;
}

.info p {
  transform: rotate(90deg)  translateX(137px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" onscroll="myFunction()">
  <img src="https://via.placeholder.com/400x200" alt="">
  <img src="https://via.placeholder.com/400x200" alt="">
  <div class="info">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus aspernatur reprehenderit placeat facere ut nam molestias nobis deleniti alias.
    </p>
  </div>
  <img src="https://via.placeholder.com/400x200" alt="">
  <img src="https://via.placeholder.com/400x200" alt="">
  <img src="https://via.placeholder.com/400x200" alt="">
</div>

向上滚动时执行类似的操作。

注意：我使用固定值只是为了展示总体思路，并根据您的上下文进行调整。希望对你有所帮助。

【讨论】：