Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как сделать скролл части секции? (https://javascript.ru/forum/events/79097-kak-sdelat-skroll-chasti-sekcii.html)

DVV 16.12.2019 21:40

Как сделать скролл части секции?
 
Есть секция

*** большая картинка удалена ***

Правый блок фиксированный, а левый должен прокручиваться в верх. На текущий момент с помощью CSS я сделал так, что левый прокручивается, но если курсор находится непосредственно над ним.

А нужно, чтобы когда пользователь доходил до этой секции скролл самого сайта останавливался и при прокрутке колесика, стрелок на клавиатуре или сенсорного акрана на гаджетах в любом месте секции прокручивалась только левая колонка.

А когда она выйдет вся, то вновь возобновлялся скролл самого сайта и пользователь спускался к следующей секции. И в обратном направлении (снизу вверх) аналогично все происходило. Как это можно реализовать на чистом js без плагинов?

SuperZen 16.12.2019 22:38

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }

    .items {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .right-item,
    .left-item {
      position: sticky;
      top: 0px;
      display: grid;
      height: 500px;
      align-items: center;
      justify-items: center;
      margin: 1em;
      font-size: 4em;
      border: 1em solid lightcoral;
    }

    .left-item {
      background-color: lightgray;
    }

    .right-item {
      background-color: darkgray;
    }
  </style>
</head>

<body>
  <div class="container"></div>
</body>
<script>
  const text = [['Super', 'Zen'], ['Zen', 'Super']]

  const containerEl = document.querySelector('.container')

  containerEl.innerHTML = text.map(([item1, item2]) => {
    return `<div class="items">
        <div class="left-items">
          ${[...item1].map(i => `<div class="left-item">${i}</div>`).join('')}
        </div>
        <div class="right-items">
          ${[...item2].map(i => `<div class="right-item">${i}</div>`).join('')}
        </div>
      </div>`
  }).join('')
</script>

</html>

DVV 16.12.2019 23:01

Закинул код на кодпен, но получается, что оба блока двигаются, а не только левый. Правый ведь должен быть статичным.

DVV 16.12.2019 23:02

https://codepen.io/Viacheslav_Demchenko/pen/YzPpQoK

SuperZen 17.12.2019 07:08

все там нормально получается

SuperZen 17.12.2019 07:51

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }

    .items {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .small-item,
    .big-item {
      position: sticky;
      top: 0px;
      display: grid;
      align-items: center;
      justify-items: center;
    }

    .small-item {
      height: 400px;
      background-color: lightgray;
      background-image: url(https://3.bp.blogspot.com/-FUOSuBucarc/XEz-XlUQgXI/AAAAAAAAHis/hQjomTjplZ8_NeRU_weB2uFqwohp-HM1wCHMYCw/s1600/free-computer-wallpapers-for-download-in-hd-for-desktops-and-laptops.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }

    .big-item {
      height: 1200px;
      background-color: darkgray;
      background-image: url(https://3.bp.blogspot.com/-4KGx9OZWtE4/XEz-XV8KQuI/AAAAAAAAHio/rCnsBjlhoYA4ggL-m-3mBj2ZBDWg9_YaACHMYCw/s1600/download-the-all-new-iphone-xr-bubble-wallpapers-here-ultralinx.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }

    .position-relative {
      position: relative;
    }

    .sepia {
      filter: sepia(1);
    }

    .saturate {
      filter: saturate(64);
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="items">
      <div class="left-items">
        <div class="small-item"></div>
        <div class="small-item"></div>
        <div class="small-item"></div>
        <div class="small-item saturate"></div>
        <div class="big-item"></div>
      </div>
      <div class="right-items">
        <div class="big-item"></div>
        <div class="small-item position-relative sepia"></div>
        <div class="small-item position-relative"></div>
        <div class="small-item position-relative"></div>
        <div class="big-item position-relative"></div>
        <div class="small-item"></div>
        <div class="small-item"></div>
        <div class="small-item"></div>
      </div>
    </div>
  </div>
</body>

<script>

  const bigItems = document.querySelectorAll('.big-item')
  const { scrollHeight } = document.querySelector('body')
  window.addEventListener('scroll', e => {
    const { scrollY, innerHeight } = window
    const sepia = scrollY / (scrollHeight - innerHeight);
    bigItems.forEach(bigItem => bigItem.style.filter = `sepia(${sepia})`)
  })

</script>

</html>

DVV 17.12.2019 21:21

Подправил немного код под себя. Обошлось вообще без js.
https://codepen.io/Viacheslav_Demchenko/pen/YzPpQoK

Но почему-то после реализации аналогичного кода в своем проекте, он не работает, а на кодпене все отлично. Что за антимагия такая?
https://viacheslavdemchenko.github.io/blackcode/

SuperZen 17.12.2019 21:49

<style>
.advantages-wrap {
  ...
  height: 1000px;
}
</style>

в общем, высота блока растянулась больше, чем viewport окна браузера )

DVV 17.12.2019 22:57

Ураа! Все получилось. Ему не нравилось, что в body стоит overflow-x: hidden


Часовой пояс GMT +3, время: 08:42.