Как я могу определить scrollTop элемента с помощью Vanilla Javascript?

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

const content = document.getElementById("content");
document.addEventListener("scroll", () => {
  content.classList.add(
    'curtain-in',
    content.scrollTop > 100
  );
});

Также своим ответом не могли бы вы объяснить, в чем я ошибся. заранее спасибо

javascript addeventlistener scrolltop

20.05.2018 07:17

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

6 406

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

I want to add a class to an element when the user scrolls more than 100px from the top of the element

Вы должны добавить addEventListener к content, а не document

const content = document.getElementById("content");
content.addEventListener("scroll", () => {
  console.info('class added');
  content.classList.add(
    'curtain-in',
    content.scrollTop >= 100
  );
});

#content {
  height: 200px;
  width: 200px;
  overflow: scroll;
}

p {
  height: 1000px;
}

<div id = "content">
  <p></p>
</div>

используйте Throttling для повышения производительности css-tricks.com/the-difference-between-throttling-and-debounc‌ing

— 20.05.2018 07:41

Спасибо за ответ, это имеет смысл, и фрагмент кода работает, но теперь класс вообще не добавляется на мою страницу, ошибок в консоли тоже нет. Добавили console.info, как будто вы должны видеть, когда событие запускается. Я заменил const content = document.getElementById ("content"); content.addEventListener ("прокрутка", () => {console.info ('класс добавлен'); content.classList.add ('занавес',);}); с "щелчком", и это работает, но событие не запускается на прокрутке, интересно, знаете ли вы, почему

— 20.05.2018 07:50

@Jessica На других страницах у вас есть такой же элемент с таким же ID? content? в противном случае вам следует использовать class. В конце концов, он должен работать и на другой странице, на каждой странице, содержащей элемент content.

— 20.05.2018 07:53

У меня только 1 элемент с идентификатором содержимого

— 20.05.2018 07:53

@ Джессика Так чего ты ждешь? вы спросили, когда вы прокручиваете элемент #content, поэтому он должен работать только с этим элементом, независимо от того, где он находится, должен работать на всей странице, если у вас есть этот элемент.

— 20.05.2018 07:56

20.05.2018 07:25

Ответ принят как подходящий

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

Чтобы проверить, прошла ли прокрутка начало элемента плюс 100 пикселей, нам нужно знать, где начинается элемент, и новую позицию прокрутки, мы можем получить оба значения следующим образом:

var position = content.offsetTop;
var scrolled = document.scrollingElement.scrollTop;

С их помощью вы можете сделать что-то вроде этого в своей функции события:

const content = document.getElementById("content");
document.addEventListener("scroll", (e) => {

  var scrolled = document.scrollingElement.scrollTop;
  var position = content.offsetTop;

  if (scrolled > position + 100){
    content.classList.add(
      'curtain-in');
    }
});

Вот рабочий пример: https://jsfiddle.net/cvmw3L1o/1/

20.05.2018 07:53