Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.12.2019, 21:40
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 115

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

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

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

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

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

Последний раз редактировалось ksa, 17.12.2019 в 07:35.
Ответить с цитированием
  #2 (permalink)  
Старый 16.12.2019, 22:38
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 16.12.2019, 23:01
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 115

Закинул код на кодпен, но получается, что оба блока двигаются, а не только левый. Правый ведь должен быть статичным.
Ответить с цитированием
  #4 (permalink)  
Старый 16.12.2019, 23:02
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 115

https://codepen.io/Viacheslav_Demchenko/pen/YzPpQoK
Ответить с цитированием
  #5 (permalink)  
Старый 17.12.2019, 07:08
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

все там нормально получается
Ответить с цитированием
  #6 (permalink)  
Старый 17.12.2019, 07:51
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

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

Последний раз редактировалось SuperZen, 17.12.2019 в 08:54.
Ответить с цитированием
  #7 (permalink)  
Старый 17.12.2019, 21:21
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 115

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

Но почему-то после реализации аналогичного кода в своем проекте, он не работает, а на кодпене все отлично. Что за антимагия такая?
https://viacheslavdemchenko.github.io/blackcode/
Ответить с цитированием
  #8 (permalink)  
Старый 17.12.2019, 21:49
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

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

в общем, высота блока растянулась больше, чем viewport окна браузера )
Ответить с цитированием
  #9 (permalink)  
Старый 17.12.2019, 22:57
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 115

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать обработку динамически созданной формы через ajax? Wimko AJAX и COMET 4 08.10.2019 17:37
Как правильно сделать бесконечный скролл с автоматической загрузкой контента (React.j darktowerk56c Элементы интерфейса 1 07.10.2019 16:56
Как в мобильной версии сделать верхний отступ при прокрутке к секции календаря? giwuf Общие вопросы Javascript 2 26.08.2019 20:07
Как сделать скрытие только части текста SL1de Элементы интерфейса 16 28.05.2019 14:06
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 20:32