Как go привязать к прокрутке в ванили JS? - PullRequest
Новая
       0

Как go привязать к прокрутке в ванили JS?

0 голосов
/ 26 мая 2020

Я хочу добавить эффект на страницу, над которой я работаю. На нем обложка с фиксированным изображением, а после - контейнер. Я бы хотел, чтобы страница прокручивалась с фиксированным изображением только тогда, когда пользователь прокручивает свою мышь. а не onscroll, но, конечно, это не работает: 

<div class="cover" onscroll="window.location = '#container';">
    ...
</div>

<div class="container" id="container">
    ...
</div>

В принципе, я бы хотел что-то подобное, но с изображением, оставшимся на том же месте и того же размера: https://tympanus.net/Development/ArticleIntroEffects/

У кого-то есть решение?

Спасибо!

Ответы [ 3 ]

1 голос
/ 26 мая 2020

Все, что вам нужно сделать, это Element.scrollTo ( MDN ), вот так: 

let container = document.getElementById('container');
document.onwheel = function(e) {
  document.body.parentNode.scrollTo({
    top: container.offsetTop,
    left: 0,
    behavior: 'smooth'
  });
};

Он прокручивает ваш элемент <html>, чтобы ваш #container был поверх экран

0 голосов
/ 27 мая 2020

Я наконец нашел решение, для заинтересованных: HTML: 

<div class="cover" id="cover">
    ...
</div>

<div class="container" id="container">
    ...
</div>

Sass: 

=full
    width: 100%
    height: 100%

* 
    box-sizing: border-box
    margin: 0
    padding: 0

.cover
    width: 100%
    height: 100vh
    float: left
    +transition(all, 1s, ease)
    overflow: hidden

    &.cover-close
        height: 0

JS: 

var scrollPosition = window.scrollY;
var cover = document.getElementsByClassName("cover")[0];

window.addEventListener("scroll", function () {
    scrollPosition = window.scrollY;

    if (scrollPosition >= 1) {
        cover.classList.add("cover-close");
    } else {
        cover.classList.remove("cover-close");
    }
});

Я сделал ручку вот здесь: https://codepen.io/julien_sebag/pen/yLYWaRJ

0 голосов
/ 26 мая 2020

Я пробовал это, он прокручивается до контейнера, но он очень медленный (и не нашел, как я могу изменить продолжительность), и не перемещается после. 

let cover = window.innerHeight
window.addEventListener('scroll', function () {
    window.scrollTo({
        top: cover,
        left: 0,
        behavior: 'smooth'
    });
})

Если у кого-то есть решение :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...