Вход

Просмотр полной версии : Как сделать скролл части секции?

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