jquery - div水平滚动时暂停垂直滚动，水平滚动结束时继续垂直滚动

Question

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

想法是让container垂直滚动直到 info点击 container顶边。那时垂直滚动停止并且 info开始水平滚动。到达终点后，父级的垂直滚动 container继续“直到其内容结束”。

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

我尝试了几个选项，jQuery、parallax、纯 CSS，但最后都没有用。

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

Answer 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>

向上滚动时做类似的事情。

注意:我使用固定值只是为了展示总体思路，根据您的情况进行调整。希望对您有所帮助。