Реагировать - как получить положение прокрутки div в JS

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

У меня есть боковая панель навигации с заголовком и некоторой другой информацией внутри нее, название заголовка является липким, а боковая панель приобретает высоту 100 вч. Я хочу, чтобы мой заголовок div ( sticky-title ) отображался box-shadow только при прокрутке пользователем вниз (когда контекст превышает 100vh). Другими словами, свойство box-shadow изначально не должно быть там, но оно должно появиться, когда пользователь прокручивает страницу вниз. Я попытался запустить scroll EventListener, но он принимает положение прокрутки главного окна, хотя я хочу, чтобы учитывалось положение прокрутки моего раздела боковой панели.

Ниже приведена ссылка code sandbox playground на то же самое.

https://codesandbox.io/s/blue-glitter-6ds36

1. Вы заглядывали в Element.scrollTop ? Все, что вам нужно, это ссылка на боковую панель.

2. @NateLevin Спасибо! Я могу использовать scrollTop и добился желаемых результатов на игровой площадке. Я присвоил идентификатор своему div и запустил обработчик onScroll Однако в моем приложении этот div генерируется библиотекой пользовательского интерфейса (и с этим div не связан идентификатор). Другая проблема заключается в том, что, поскольку этот div получает библиотеку пользовательского интерфейса, как я могу вызвать onScroll событие на нем? codesandbox.io/s/interesting-fire-9bksx?file=/src/App.js Это работает.

3. Извините, я только что понял, что использовал ту же ссылку, когда указывал ссылки. Это ссылка, на которую я хотел указать вам. Все, что вам нужно сделать, это что-то вроде <Component ref={this.refName} />

4. Я пытаюсь понять useRef, но это немного ново для меня. Могу ли я получить доступ к тем элементам, используя ссылки, которые создаются DOM, которые не отображаются в функции рендеринга? Надеюсь, то, что я спрашиваю, имеет смысл. @NateLevin

5. Не могли бы вы рассказать нам, как вы используете компонент? Вы могли бы получить ссылку на самый верхний элемент, а затем использовать querySelector s, чтобы перейти к нужному элементу.

Ответ №1:

Посмотрите, могут ли эти изменения помочь вам в App.js :

   useEffect(() => {
    
    // Select the title wrapper
    const title = document.querySelector('.sticky-title');
    
    const titleTop = title.offsetTop; // find the top position of title block 
                                      // relative to the window top

    window.addEventListener("scroll", () => {

      console.log("hi", titleTop);
      setScroll(this.scrollY >= titleTop); // when window.scrollY is greater than top 
                                           // the top of the title block the scroll 
                                           // state is set to True  
    });
  }, []);

также в части JSX App.js :

 <div className="panel" style={{ height: 2000 }}>{/*2000px to scroll the page easier*/}
  ...
</div>

и style.css :

 .panel {
  width: 200px;
  height: 100vh;
  border: 2px solid black;
  white-space: pre-line;
  /* overflow: auto; */ <---- delete this because it prevents position: sticky to work
}

1. Строка, эквивалентная этой — const title = document. querySelector(‘.sticky-title’); в моем коде возвращает значение null.

2. Просто попробуйте выбрать родительский элемент <h2> элемента. Вы можете указать его и id="title" , а затем const title = document.querySelector('#title');