Быстрая прокрутка, чтобы изменить стиль - PullRequest
Новая
       11

Быстрая прокрутка, чтобы изменить стиль

0 голосов
/ 29 января 2020

Можно ли прокрутить до .project и сделать фон красным без прокрутки медленно и около класса .project?

В основном я хочу, чтобы пользователь мог прокрутите и отобразите красный цвет, даже если он или она быстро прокручивают, но когда пользователь находится выше или ниже projectPosition.top, фон должен быть стандартного цвета (черный). 

var project = document.getElementsByClassName('project')[0];
var projectPosition = project.getBoundingClientRect();

document.addEventListener('scroll', () => {

    var scrollY = window.scrollY;
    
    if (scrollY == projectPosition.top) {
        project.style.background = "red";
        project.style.height = "100vh";
    } else {
        project.style.background = "black";
        project.style.height = "200px";
    }
    
});
.top {
  height: 700px;
}

.project {
  background: black;
  height: 200px;
  width: 100%;
}
<div class="top"></div>
<div class="project"></div>
<div class="top"></div>

Заранее спасибо.

Ответы [ 2 ]

3 голосов
/ 30 января 2020

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

Он также обладает высокой производительностью и спасает вас от некоторые расчеты высоты и высоты. Проверьте это в приведенном ниже примере.

Если у вас есть какие-либо вопросы по этому поводу, пожалуйста, сообщите мне. для просмотра, не частично, установите значение параметра threshold равным [1]. По умолчанию это [0], что означает, что он срабатывает всякий раз, когда элемент виден минимум на 1 пиксель. [1] утверждает, что 100% элемента должно быть в поле зрения для запуска. Значение может варьироваться от 0 до 1 и может содержать несколько точек запуска. Например, 

const options = {
  threshold: [0, 0.5, 1]
};

Что означает начало, на полпути и полностью в поле зрения. 

const project = document.querySelector('.project');

const observerCallback = entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('red');
    } else {
      entry.target.classList.remove('red');
    }
  });
};

const options = {
  threshold: [1]
}

const observer = new IntersectionObserver(observerCallback, options);
observer.observe(project);
.top,
.bottom{
  height: 700px;
  width: 100%;
}

.project {
  background: black;
  height: 200px;
  width: 100%;
}

.project.red {
  background: red;
}
<div class="top"></div>
<div class="project"></div>
<div class="bottom"></div>
0 голосов
/ 30 января 2020

Чтобы сделать это 'быстро', вам лучше использовать оператор >=, чем ==: 

var project = document.getElementsByClassName('project')[0];
var projectPosition = project.getBoundingClientRect();

document.addEventListener('scroll', () => {

    var scrollY = window.scrollY;
    if (scrollY >= projectPosition.top && scrollY <= projectPosition.top + projectPosition.height) {
        project.style.background = "red";
        project.style.height = "100vh";
    } else {
        project.style.background = "black";
        project.style.height = "200px";
    }
    
});
.top {
  height: 700px;
}

.project {
  background: black;
  height: 200px;
  width: 100%;
}
<div class="top"></div>
<div class="project"></div>
<div class="top"></div>
...