2

подскажите пожалуйста, как сделать синхронный скролл ? два блока, ширина у них одинаковая, кол-во контента тоже, нужно что бы их скроллбары были синхронны (если двигается одни, то двигается и другой ну и т.д.)

<div class="box">
  <div class="box__item box__item--top">Lorem ipsum dolor sit amet consectetur adipisicing 
    elit. Labore, accusamus quisquam nostrum ratione animi incidunt velit delectus molestiae 
    molestias vel rem optio tempore possimus explicabo at dolor quae aspernatur dignissimos 
    iusto et voluptates ducimus adipisci ipsam! Eius voluptatem distinctio tenetur tempora. 
    Veritatis, voluptas magnam officia, soluta repellendus non quod iste maiores quo amet 
    placeat! Animi repellat optio nihil perspiciatis quisquam totam quam reiciendis dolorem 
    magni tempore. Sapiente optio atque sit aperiam corporis adipisci repudiandae id, velit 
    totam officiis. Ipsum, quo. Optio esse similique vitae blanditiis nam mollitia 
    consequuntur assumenda porro nobis accusamus quibusdam, officiis totam voluptates quam 
    fugit magni ea minima! Veniam, dignissimos obcaecati harum vero modi nam corrupti 
    exercitationem, vitae dolor voluptatibus assumenda vel repellendus officiis, architecto 
    porro. Omnis aliquam nulla sint aliquid aperiam perspiciatis minima quisquam ipsam numquam 
    quibusdam at, et, neque, asperiores nesciunt nostrum veniam quam tempora tempore 
    blanditiis? Numquam, officia corporis voluptates porro eligendi hic doloribus repellendus 
    obcaecati nulla saepe provident assumenda quam maxime illum, suscipit nisi facere cumque 
    est, quaerat et nesciunt facilis? Ex, accusamus quam nostrum sint nesciunt quibusdam 
    possimus, accusantium magni error dolores dolorem animi facilis dignissimos obcaecati 
    impedit reiciendis maxime nobis iusto voluptatibus beatae id. Libero sint error porro 
    consequuntur impedit provident?
  </div>
  <div class="box__item box__item--bottom">Lorem ipsum dolor sit amet consectetur adipisicing 
    elit. Labore, accusamus quisquam nostrum ratione animi incidunt velit delectus molestiae 
    molestias vel rem optio tempore possimus explicabo at dolor quae aspernatur dignissimos 
    iusto et voluptates ducimus adipisci ipsam! Eius voluptatem distinctio tenetur tempora. 
    Veritatis, voluptas magnam officia, soluta repellendus non quod iste maiores quo amet 
    placeat! Animi repellat optio nihil perspiciatis quisquam totam quam reiciendis dolorem 
    magni tempore. Sapiente optio atque sit aperiam corporis adipisci repudiandae id, velit 
    totam officiis. Ipsum, quo. Optio esse similique vitae blanditiis nam mollitia 
    consequuntur assumenda porro nobis accusamus quibusdam, officiis totam voluptates quam 
    fugit magni ea minima! Veniam, dignissimos obcaecati harum vero modi nam corrupti 
    exercitationem, vitae dolor voluptatibus assumenda vel repellendus officiis, architecto 
    porro. Omnis aliquam nulla sint aliquid aperiam perspiciatis minima quisquam ipsam numquam 
    quibusdam at, et, neque, asperiores nesciunt nostrum veniam quam tempora tempore 
    blanditiis? Numquam, officia corporis voluptates porro eligendi hic doloribus repellendus 
    obcaecati nulla saepe provident assumenda quam maxime illum, suscipit nisi facere cumque 
    est, quaerat et nesciunt facilis? Ex, accusamus quam nostrum sint nesciunt quibusdam 
    possimus, accusantium magni error dolores dolorem animi facilis dignissimos obcaecati 
    impedit reiciendis maxime nobis iusto voluptatibus beatae id. Libero sint error porro 
    consequuntur impedit provident?
  </div>
</div>

пример кода - https://codepen.io/g3nnadie/pen/abKZWZL скролл по горизонтали

если можно с использованием jquery, было бы здорово...

1 ответ 1

0

Решение с использованием чистого JavaScript

HTML:

<div class="one_text">
    <div class="text-shell">
    Lorem ipsum dolor sit amet consectetur adipisicing 
    elit. Labore, accusamus quisquam nostrum ratione animi incidunt velit delectus molestiae 
    molestias vel rem optio tempore possimus explicabo at dolor quae aspernatur dignissimos 
    iusto et voluptates ducimus adipisci ipsam! Eius voluptatem distinctio tenetur tempora. 
    Veritatis, voluptas magnam officia, soluta repellendus non quod iste maiores quo amet 
    placeat! Animi repellat optio nihil perspiciatis quisquam totam quam reiciendis dolorem 
    magni tempore. Sapiente optio atque sit aperiam corporis adipisci repudiandae id, velit 
    totam officiis. Ipsum, quo. Optio esse similique vitae blanditiis nam mollitia 
    consequuntur assumenda porro nobis accusamus quibusdam, officiis totam voluptates quam 
    fugit magni ea minima! Veniam, dignissimos obcaecati harum vero modi nam corrupti 
    exercitationem, vitae dolor voluptatibus assumenda vel repellendus officiis, architecto 
    porro. Omnis aliquam nulla sint aliquid aperiam perspiciatis minima quisquam ipsam numquam 
    quibusdam at, et, neque, asperiores nesciunt nostrum veniam quam tempora tempore 
    blanditiis? Numquam, officia corporis voluptates porro eligendi hic doloribus repellendus 
    obcaecati nulla saepe provident assumenda quam maxime illum, suscipit nisi facere cumque 
    est, quaerat et nesciunt facilis? Ex, accusamus quam nostrum sint nesciunt quibusdam 
    possimus, accusantium magni error dolores dolorem animi facilis dignissimos obcaecati 
    impedit reiciendis maxime nobis iusto voluptatibus beatae id. Libero sint error porro 
    consequuntur impedit provident?
    </div>
  </div>

  <div class="two_text">
    <div class="text-shell">
    Lorem ipsum dolor sit amet consectetur adipisicing 
    elit. Labore, accusamus quisquam nostrum ratione animi incidunt velit delectus molestiae 
    molestias vel rem optio tempore possimus explicabo at dolor quae aspernatur dignissimos 
    iusto et voluptates ducimus adipisci ipsam! Eius voluptatem distinctio tenetur tempora. 
    Veritatis, voluptas magnam officia, soluta repellendus non quod iste maiores quo amet 
    placeat! Animi repellat optio nihil perspiciatis quisquam totam quam reiciendis dolorem 
    magni tempore. Sapiente optio atque sit aperiam corporis adipisci repudiandae id, velit 
    totam officiis. Ipsum, quo. Optio esse similique vitae blanditiis nam mollitia 
    consequuntur assumenda porro nobis accusamus quibusdam, officiis totam voluptates quam 
    fugit magni ea minima! Veniam, dignissimos obcaecati harum vero modi nam corrupti 
    exercitationem, vitae dolor voluptatibus assumenda vel repellendus officiis, architecto 
    porro. Omnis aliquam nulla sint aliquid aperiam perspiciatis minima quisquam ipsam numquam 
    quibusdam at, et, neque, asperiores nesciunt nostrum veniam quam tempora tempore 
    blanditiis? Numquam, officia corporis voluptates porro eligendi hic doloribus repellendus 
    obcaecati nulla saepe provident assumenda quam maxime illum, suscipit nisi facere cumque 
    est, quaerat et nesciunt facilis? Ex, accusamus quam nostrum sint nesciunt quibusdam 
    possimus, accusantium magni error dolores dolorem animi facilis dignissimos obcaecati 
    impedit reiciendis maxime nobis iusto voluptatibus beatae id. Libero sint error porro 
    consequuntur impedit provident?
    </div>
  </div>

CSS:

.one_text,
.two_text  {
  overflow: auto;
  margin-top: 30px;
  white-space: nowrap;
  padding-bottom: 5px;
}

JavaScript:

let one_item = document.querySelector(".one_text");
let one_block = one_item.querySelector(".text-shell");

let two_item = document.querySelector(".two_text");
let two_block = two_item.querySelector(".text-shell");

one_item.addEventListener("scroll", () => {
  two_item.scrollLeft =
    (one_item.scrollLeft *
      (two_block.clientHeight - two_item.clientHeight)) /
    (one_block.clientHeight - one_item.clientHeight);
});

two_item.addEventListener("scroll", () => {
  one_item.scrollLeft =
    (two_item.scrollLeft * (one_block.clientHeight - one_item.clientHeight)) /
    (two_block.clientHeight - two_item.clientHeight);
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.