Приостановить вертикальную прокрутку, пока div прокручивает горизонтально, в конце горизонтальной прокрутки продолжить прокручивать вертикально - PullRequest
Новая
       28

Приостановить вертикальную прокрутку, пока div прокручивает горизонтально, в конце горизонтальной прокрутки продолжить прокручивать вертикально

0 голосов
/ 20 ноября 2018

Существует группа изображений, вертикально уложенных в <div class="container"> с overflow-y: auto.После первого изображения есть <div class="info">, который содержит некоторый текст, который шире этого родительского элемента div и должен прокручиваться горизонтально (`overflow-x: auto ').

Идея состоит в том, чтобыcontainer прокручивайте вертикально, пока info не достигнет container верхнего края.В этот момент вертикальная прокрутка прекращается, и info запускает горизонтальную прокрутку.После того, как он достигает конца, вертикальная прокрутка родительского элемента container продолжается 'до конца его содержимого.

Она должна работать так же при прокрутке вверх.

Я пробовал малоoptions, jQuery, параллакс, чистый CSS, но в конце ничего не сработало.

Вот пример кода: https://codepen.io/front-man/pen/mQqvPb

1 Ответ

0 голосов
/ 21 ноября 2018

Сначала давайте сделаем трюк для обработки горизонтальной прокрутки, используя вертикальную прокрутку только с 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 youможет остановить прокрутку по умолчанию, когда ее верхняя часть меньше верхней части экрана, и установить положение прокрутки в положение элемента, а затем активировать горизонтальную прокрутку .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>

Сделайте нечто подобное для прокрутки вверх.

Примечание: я использую фиксированные значения только для того, чтобы показать общую идею, адаптироватьэто в вашем контексте.Я надеюсь, что помог вам.

...