Я не знаю, столкнулись ли вы в таком требовании: добавьте новый дочерний элемент в элемент dom , а затем требует, чтобы, если вновь добавленный новый элемент превышает объем контейнера, нам необходимо автоматически прокручивать положение недавно добавленного дочернего элемента, как показано на следующем рисунке:
Затем, изучая некоторые точки знаний, связанные с прокруткой элемента dom , мы можем реализовать эффект приведенной выше картины и некоторых других функций, связанных с прокруткой.
Свойства и методы DOM, которые необходимо понимать Scrolltop, ClientHeight и Scrollheight
Атрибут scrollTop - это разница между верхним значением содержимого элемента контейнера и top значением верхнего значения в верхнем просмотре viewport , то есть частью контейнера, которая скользят вверх за пределами контейнера. Состояние прокрутки можно контролировать путем изменения этого свойства.
clientHeight - это атрибут dom , который описывает высоту контейнера.
scrollHeight - это атрибут dom , который описывает высоту содержания контейнера.
Связь между тремя атрибутами показана на рисунке ниже:
GetBoundingClientRect ()
Этот метод используется для получения некоторых геометрических свойств, необходимых для макета элемента, таких как left , right , top , bottom , height , width и т. Д.
Srollby (x, y)
Метод scrollTo контейнера dom может использоваться для непосредственного управления указанным расстоянием прокрутки прокрутки прокрутки. Этот метод более удобен, когда вам нужно прокрутить указанный элемент.
Srollto (x, y)
Метод scrollTo контейнера dom может использоваться для непосредственного управления половой прокруткой для прокрутки в указанном положении. Этот метод более удобен при управлении стержней прокрутки, чтобы прокручивать верхнюю или снизу.
Реализовать подготовку к управлению прокатом
Давайте сначала подготовим html
<! Doctype html> <html> <head> <Title> Подробное объяснение настройки прокрутки </title> <style> #Scroll_container {height: 500px; Ширина: 500px; Overflow-y: прокрутка; Заполнение: 50px; Распределение коробки: пограничная коробка; } .scroll_item {height: 200px; Ширина: 500px; маржинальная версия: 20px; фоновый цвет: аквамарин; дисплей: Flex; Align-Items: Center; Justify-Content: Center; } </style> </head> <body> <div id=scroll_container> <div id=scroll_container> <div id=item1 class=scroll_item> <span>1</span> </div> <div id=item2 class=scroll_item> <span>2</span> </div> <div id=item3 class=scroll_item> <span>3</span> </div> <div id = item4 class = scroll_item> <pan> 4 </span> </div> <div id = item5 class = scroll_item> <pan> 5 </span> </div> </div> <button onclick = additem ()> добавить элемент </button> </div> </body> <script> let container = decoplementbyid (scroll_containet); Пусть индекс = 5; // Добавить функцию элемента additem () {index+= 1; let item = `<div id = $ {'item'+index} class = scroll_item> <pan> $ {index} </span> </div>`; Container.innerhtml+= item; setTimeout (() => {scrolltoIndex ();})} </script> </html>Приведенный выше код содержит прокручиваемую область и может добавлять элементы в область прокрутки или прокручивать в указанное положение элемента. Общий эффект заключается в следующем.
Основная реализация
Значение scrollTop было объяснено ранее. Мы можем управлять прокруткой, изменяя значение scrollTop Container Element Scrolltop. Чем больше значение scrollTop , тем больше расстояние прокрутки половой прокрутки по сравнению с исходным состоянием (когда scrollTop составляет 0).
После понимания значения scrollTop мы можем использовать scrollTop для реализации управления Brollbar. Затем мы сначала реализуем прокрутку внизу и добавляем метод scrollToBottom() в приведенный выше код:
function scrolltobottom () {let y = container.scrollheight-container.clientheight; intainer.scrolltop = y;} Если вы хотите прокрутить до вершины, нам просто нужно установить scrollTop на 0:
Функция scrolltotop () {container.scrolltop = 0;} Комбинируя метод getBoundingClientRect() , мы также можем легко реализовать прокрутку с указанным элементом, где getBoundingClientRect().top представляет расстояние от верхней части детского элемента до вершины видового порта родительского элемента:
Функция ScrolltoElement (el) {intainer.scrolltop+= el.getBoundingClientRect (). Top;} Добавить анимациюПрокручивать внизу
Тем не менее, прокрутка приведенного выше кода слишком жесткая. Мы можем добавить к нему эффект анимации, который может быть реализован с помощью setInterval() . Проанализируйте процесс реализации эффектов анимации. Реализация анимации - это не что иное, как завершение изменения переменной в течение определенного периода времени. Поэтому нам сначала нужно знать смещение двух переменных, переменной ( scrollTop ) и времени, необходимого для изменения. Смещение является конечным значением scrollTop минус исходное значение, и продолжительность изменения обычно устанавливается на параметр, который может быть изменен. После понимания вышеуказанного процесса давайте сначала прокрутите на дно в качестве примера:
// сначала напишите функцию функции ScrollTobottom scrolltobottom (el) {if (! El) {el = container; } // исходное значение letttop = el.scrolltop; // Окончательное значение Let Endtop = el.scrollheight-el.clientheight; // генерировать функцию управления анимацией let Scollanimationfn = doanimation (starttop, endtop, 300, el); // Выполнить анимацию, выполнить let Interval = setInterval (() => {scrollanimationfn (интервал)}, 10)}/** * @description: заводская функция, которая генерирует функции управления анимацией (используя закрытие) * @param {startvalue: varible neriancom null */function doanimation (startValue, endValue, продолжительность, EL) {// Использование закрытия для сохранения переменных Dy и шаг (расстояние от каждой прокрутки анимации) let dy = 0; let step = (endvalue-start-wartvalue)/(продолжительность/10); // возвращать функцию управления анимацией функции возврата (интервал) {dy+= step; if (dy> = endvalue-startvalue) {clearInterval (интервал); } el.scrolltop+= step; }}Измените функцию Additem, чтобы добавить прокрутку в нижнюю анимацию:
function additem () {index+= 1; let item = `<div id = $ {'item'+index} class = scroll_item> <pan> $ {index} </span> </div>`; Container.innerhtml+= item; setTimeout (() => {// scrolltoIndex (); scrolltobottom (контейнер);})}Затем добавьте свиток в нижнюю кнопку для HTML:
<button onclick = scrolltobottom ()> прокручивать в нижнюю </button>
Следуя вышеуказанному методу, вы также можете реализовать обычно используемую анимацию для прокрутки вверх:
// Написание функции функции Scrolltotop scrolltotop (el) {if (! El) {el = intainer; } // исходное значение letttop = el.scrolltop; // конечное значение let endtop = 0; // генерировать функцию управления анимацией let Scollanimationfn = doanimation (starttop, endtop, 300, el); // Выполнить анимацию, выполнить let Interval = setInterval (() => {scrollanimationfn (интервал)}, 10)} Чтобы адаптироваться к прокрутке внизу, нам нужно изменить время анимационной остановки. Модифицированная функция doAnimation() выглядит следующим образом:
Функция doanimation (startValue, endValue, продолжительность, EL) {// Используйте закрытие, чтобы сохранить переменные DY и шаг (расстояние от каждой прокрутки анимации) let Dy = 0; let step = (endvalue-start-wartvalue)/(продолжительность/10); возврат функции (интервал) {dy+= step; // Здесь изменяется, чтобы использовать абсолютное значение для суждения if (math.abs (dy)> = math.abs (endvalue-startvalue)) {clearInterval (интервал); } el.scrolltop+= step; }} Наконец, мы добавляем свиток в нижнюю кнопку html :
<button onclick = scrolltotop ()> прокручивать вверх </button>
Эффект заключается в следующем:
Сначала добавьте необходимые кнопки и поля ввода для элемента HTML:
<input type = number placeholder = пожалуйста, введите элемент, который можно прокрутить в index style = width: 200px;/> <button onclick = scrollToElement ()> Прокрутите в указанный элемент </button>
Добавьте функцию выполнения анимации, которая прокручивает указанный элемент:
Функция ScrollToElement (Containerel, El) {if (! CantieLel) {// Parent Element Containerel = Container; } if (! el) {// Получить элемент, который можно прокрутить, чтобы позволить input = document.getElementsbytagname ('input') [0]; let id = 'item'+input.value; if (! input.value) {id = 'item'+index; } el = document.getElementById (id); } let startTop = cantainerel.scrolltop; let endtop = startTop+el.getBoundingClientRect (). Top; Пусть scrollanimationfn = doanimation (starttop, endtop, 300, контейнель); let Interval = setInterval (() => {scrollanimationfn (интервал)}, 10)}Эффект заключается в следующем:
Метод использования scrollTo(x,y) в основном такой же, как метод использования атрибута scrollTop . Метод scrollTo() родительского элемента может управлять прокруткой в указанном положении, что фактически эквивалентно установлению значения scrollTop . Позвольте мне привести вам пример:
// Здесь мы принимаем прокрутку оси Y в качестве примера element.scrollto (0, y); element.scrolltop = y; // Эффекты вышеупомянутых двух предложений одинаковы.
Следовательно, использование метода scrollTo() для управления половой прокручиванием в основном совпадает с использованием Scrolltop. Нам нужно только просто изменить функцию doAnimation() , и код выглядит следующим образом:
Функция doanimation (startValue, endValue, продолжительность, EL) {// Используйте закрытие, чтобы сохранить переменные DY и шаг (расстояние от каждой прокрутки анимации) let Dy = 0; let step = (endvalue-start-wartvalue)/(продолжительность/10); возврат функции (интервал) {dy+= step; if (math.abs (dy)> = math.abs (endvalue-startvalue)) {clearInterval (интервал); } //el.scrolltop+=step ;//this строки кода изменяется в следующем el.scrollto (0, el.scrolltop+step); }} Эффект выполнения согласуется с реализацией с использованием scrollTop .
Основная реализация
Мы также можем использовать scrollBy(x,y) для управления прокруткой. Как упомянуто выше, метод scrollBy() заключается в управлении указанным расстоянием прокрутки (обратите внимание, что это не положение). Используйте Scrollby (), чтобы легко реализовать требование прокрутки в указанные элементы. Код заключается в следующем:
Функция ScrollToElement (Containerel, El) {// Потому что getBoundingClientRect (). Верх - это расстояние от верхней части дочернего элемента до вершины родительского элемента, поэтому это значение является смещением дочернего элемента относительно родительского элемента. Мы передаваем это значение в Scrollby, то есть прокрутите к указанному элементу cantainerel.scrollby (0, el.getBoundingClientRect (). Top);}Прокрутите внизу:
Функция scrolltobottom (Containerel) {let dy = cantainer.scrollheight-containerel.clientheight; cantieperel.scrollby (0, dy);}Прокрутите вверх
функция scrolltotop (cantieRel) {let dy =-(cantainer.scrollheight-containerel.clientheight); cantieperel.scrollby (0, dy);}Добавить анимацию
Здесь мы изменяем функцию, сгенерированную анимацией, потому что параметр scrollBy() здесь является смещением переменной, поэтому мы вносим следующие изменения:
Функция scrolltobottom (Containerel) {if (! cantielel) {cantainerel = container; } // dy-смещение let dy = cantainerel.scrollheight-containerel.clientheight; Пусть scrollanimationfn = doanimation (dy, 300, контейнель); let Interval = setInterval (() => {scrollAnimationFn (интервал)}, 10)} функция scrolltotop (cantieRel) {if (! cantieRel) {cantieRel = incueter; } // dy-смещение let dy =-(cantainerel.scrollheight-containerel.clientheight); Пусть scrollanimationfn = doanimation (dy, 300, контейнель); let Interval = setInterval (() => {scrollAnimationFn (интервал)}, 10)} функция ScrollToElement (CantieRel, El) {if (! CantieRel) {canieperel = container; } if (! el) {let input = document.getElementsbytagname ('input') [0]; let id = 'item'+input.value; if (! input.value) {id = 'item'+index; } el = document.getElementById (id); } // dy - смещение let dy = el.getBoundingClientRect (). Top; Пусть scrollanimationfn = doanimation (dy, 300, контейнель); let Interval = setInterval (() => {scrollanimationfn (интервал)}, 10)}/** * @description: * @param {type} * @return: */function doanimation (dy, duration, el) {// Закрытие для сохранения, таких как exe_dy и step (dy diration scrolling). выполнено let step = dy/(продолжительность/10); возврат функции (интервал) {exe_dy+= step; if (math.abs (exe_dy)> = math.abs (dy)) {clearInterval (интервал); } el.scrollby (0, step); }} Эффект выполнения согласуется с реализацией с использованием scrollTop .
Выше: point_up_2: это ваше собственное подробное резюме и объяснение управления прокручиванием Dom прокрутки, а также некоторые основные методы использования.
Это статья о подробном объяснении резюме управления прокруткой шарнирной прокрутки элемента DOM в HTML. Для получения более соответствующего контента прокрутки прокрутки элементов Dom, пожалуйста, найдите предыдущие статьи с wulin.com или продолжайте просматривать соответствующие статьи ниже. Я надеюсь, что все будут поддерживать wulin.com в будущем!