Question

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

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

它在向上滚动时应该起作用。

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

这是codepen示例：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中激活水平滚动条，并将继续垂直滚动：< / p>

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>

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

注意：我使用固定值只是为了显示总体思路，使其适应您的上下文。希望我能对您有所帮助。

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

1 个答案: