在div水平滚动时暂停垂直滚动，在水平滚动的末尾继续垂直滚动

Question

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

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

它应该在scroll up上同样起作用。

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

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

Answer 1

首先让我们做一个技巧来处理水平滚动使用垂直滚动只与CSS，想法是旋转容器-90deg和内容90deg，并使用默认的东西滚动如下：

​

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

​

当你向上滚动时，做一些类似的事情。

注意:我使用固定值只是为了显示一般概念，根据您的上下文进行调整。我希望我能帮到你。