Não sei se você encontrou esse requisito: adicione um novo elemento filho a um elemento dom e, em seguida, exija que, se o novo elemento adicionado exceder o escopo do contêiner, precisamos rolar automaticamente para a posição do elemento filho recém -adicionado, como mostrado na figura a seguir:
Então, enquanto aprende alguns pontos de conhecimento relacionados à rolagem de elementos dom , podemos realizar o efeito da imagem acima e algumas outras funções relacionadas a rolagem.
Propriedades e métodos DOM que precisam ser entendidos Scrolltop, ClientHeight e ScrolHeight
scrollTop é a diferença entre o valor superior do conteúdo do elemento do contêiner e top do valor superior na viewport de viewport superior, ou seja, a parte do contêiner que desliza para cima além da visualização do contêiner. O estado de rolagem pode ser controlado modificando esta propriedade.
clientHeight é o atributo dom que descreve a altura do contêiner.
scrollHeight é um atributo dom que descreve a altura do conteúdo do contêiner.
A relação entre os três atributos é mostrada na figura abaixo:
getBoundingClientRect ()
Este método é usado para obter algumas propriedades geométricas necessárias para o layout do elemento, como left , right , top , bottom , height , width , etc.
Srollby (x, y)
O método scrollTo do contêiner dom pode ser usado para controlar diretamente a distância especificada da rolagem da barra de rolagem. Este método é mais conveniente quando você precisa rolar para o elemento especificado.
srollto (x, y)
O método scrollTo do contêiner dom pode ser usado para controlar diretamente a barra de rolagem para rolar para a posição especificada. Este método é mais conveniente ao controlar a barra de rolagem para rolar para a parte superior ou inferior.
Implementar preparação de controle de rolamento
Vamos preparar um html primeiro
<! Doctype html> <html> <head> <title> Explicação detalhada das configurações de ScrollBar </ititle> <style> #scroll_container {altura: 500px; Largura: 500px; Overflow-y: rolagem; preenchimento: 50px; Timing de caixa: caixa de fronteira; } .scroll_item {altura: 200px; Largura: 500px; Margin-top: 20px; Background-Color: Aquamarine; exibição: flex; alinhado-itens: centro; Justify-Content: Center; } </style> </ad Head> <body> <div id = scroll_container> <div id = scroll_container> <div id = item1 class = scroll_item> <pum> 1 </span> </div> <Div id = item2 class = scroll_item> <pan> 2 </span> </div> id = item4 class = scroll_item> <pan> 4 </span> </div> <div id = item5 class = scroll_item> <pan> 5 </span> </div> </div> <butão onclick = additem ()> scringbydy (/button> </div> </bodyl) <cript> lettem ()> deixe index = 5; // Adicione uma função de elemento addItem () {index+= 1; Deixe o item = `<div id = $ {'item'+index} class = scroll_item> <pan> $ {index} </span> </div>`; container.innerhtml+= item; setTimeout (() => {scrollToIndex ();})} </script> </html>O código acima contém uma área rolável e pode adicionar elementos à área de rolagem ou rolar para a posição do elemento especificado. O efeito geral é o seguinte.
Implementação básica
O significado do scrollTop já foi explicado antes. Podemos controlar a rolagem modificando o valor scrollTop do elemento do contêiner ScrollTop. Quanto maior o valor scrollTop , maior a distância de rolagem da barra de rolagem em relação ao estado original (quando scrollTop é 0).
Depois de entender o significado do scrollTop , podemos usar scrollTop para implementar o controle de scrollbar. Em seguida, implementamos primeiro um rolo para a parte inferior e adicionamos um método scrollToBottom() ao código acima:
function scrollTobottom () {let y = container.ScrolHeight-container.clientHeight; container.scrolltop = y;} Se você deseja rolar para o topo, só precisamos definir scrollTop para 0:
function scrolltotop () {container.Scrolltop = 0;} Combinando getBoundingClientRect() , também podemos implementar facilmente a rolagem para o elemento especificado, onde getBoundingClientRect().top
função scrollToElement (el) {container.Scrolltop+= el.getBoundingClientRect (). top;} Adicione animaçãoRole para o fundo
No entanto, a rolagem do código acima é muito rígida. Podemos adicionar um efeito de animação, que pode ser implementado com a ajuda do setInterval() . Analise o processo de implementação de efeitos de animação. A implementação da animação nada mais é do que concluir a alteração de uma variável dentro de um certo período de tempo. Portanto, primeiro precisamos conhecer o deslocamento de duas variáveis, a variável ( scrollTop ) e o tempo necessário para a mudança. O deslocamento é o valor final do scrollTop menos o valor original, e a duração da mudança geralmente é definida como um parâmetro que pode ser modificado. Depois de entender o processo acima, vamos primeiro levar a rolagem para o fundo como exemplo:
// Primeiro, escreva uma função scrollTobottom função scrollTobottom (el) {if (! El) {el = contêiner; } // Valor original Deixe StartTop = El.Scrolltop; // o valor final Let EndTop = el.scrolHeight-el.clientHeight; // gerar uma função de controle de animação Seja scrollanimationfn = doanimation (startTop, endtop, 300, el); // Execute a animação, execute deixe interval = setInterval (() => {scrollanimationfn (interval)}, 10)}/** * @Description: uma função de fábrica que gera que o elemento de animação Funções Final: Valuato Final: * @param {startValue: variable Value endValue: Valuato final nulo */função doanimation (startValue, endValue, duração, el) {// Use o fechamento para salvar variáveis dy e etapa (distância de cada rolagem de animação) deixe dy = 0; Deixe passo = (endValue-startValue)/(duração/10); // Retornar função de retorno de controle de controle de animação (intervalo) {dy+= step; if (dy> = endValue-startValue) {ClearInterval (intervalo); } el.scrolltop+= step; }}Modifique a função AddItem para adicionar rolagem à animação inferior:
função addItem () {index+= 1; Deixe o item = `<div id = $ {'item'+index} class = scroll_item> <pan> $ {index} </span> </div>`; container.innerhtml+= item; setTimeout (() => {// scrollToIndex (); scrollTobottom (contêiner);})}Em seguida, adicione um role ao botão inferior para HTML:
<botão onclick = scrolltobottom ()> role para o fundo </button>
Seguindo o método acima, você também pode implementar uma animação comumente usada para rolar até o topo:
// escrevendo uma função scrolltotop função scrolltotop (el) {if (! El) {el = contêiner; } // Valor original Deixe StartTop = El.Scrolltop; // o valor final Let Endtop = 0; // gerar uma função de controle de animação Seja scrollanimationfn = doanimation (startTop, endtop, 300, el); // Executar animação, execute let interval = setInterval (() => {scrollanimationfn (interval)}, 10)} Para se adaptar para rolar para o fundo, precisamos modificar o tempo da parada de animação. A função doAnimation() modificada é a seguinte:
função doanimation (startValue, endValue, duração, el) {// Use o fechamento para salvar as variáveis dy e a etapa (distância de cada rolagem de animação) deixe dy = 0; Deixe passo = (endValue-startValue)/(duração/10); Retornar função (intervalo) {dy+= etapa; // aqui é alterado para usar o valor absoluto para julgar se (Math.abs (dy)> = math.abs (endValue-startValue)) {ClearInterval (intervalo); } el.scrolltop+= step; }} Finalmente, adicionamos um rolo ao botão inferior html :
<botão onclick = scrolltotop ()> role para o topo </butut>
O efeito é o seguinte:
Primeiro, adicione os botões e caixas de entrada necessários para o elemento HTML:
<Tipo de entrada = número de espaço reservado = Digite o elemento a ser rolado para o índice estilo = largura: 200px;/> <botão onclick = scrollToElement ()> role para o elemento especificado </button>
Adicione uma função de execução de animação que rola o elemento especificado:
função scrollToElement (contêinerel, el) {if (! contêinerel) {// contêinerel do elemento pai = contêiner; } if (! el) {// Obtenha o elemento a ser rolado para deixar input = document.getElementsByTagName ('input') [0]; deixe id = 'item'+input.value; if (! input.value) {id = 'item'+index; } el = document.getElementById (id); } let startTop = contenderel.scrolltop; Let Endtop = StartTop+EL.GetBoundingClientRect (). Top; Seja scrollanimationfn = doanimation (startTop, endtop, 300, contêinerel); Deixe interval = setInterval (() => {scrollanimationfn (interval)}, 10)}O efeito é o seguinte:
O método de uso do scrollTo(x,y) é basicamente o mesmo que o método de uso do atributo scrollTop . scrollTo() do elemento pai pode controlar a barra de rolagem para uma posição especificada, que é realmente equivalente a definir o valor do scrollTop . Deixe -me dar um exemplo:
// Aqui, pegamos o rolo do eixo y como um exemplo de elemento.ScrollTo (0, y); elemento.Scrolltop = y; // Os efeitos das duas frases acima são os mesmos.
Portanto, o uso do método scrollTo() para controlar a barra de rolagem é basicamente o mesmo que o uso do scrolltop. Precisamos simplesmente simplesmente modificar doAnimation() , e o código é o seguinte:
função doanimation (startValue, endValue, duração, el) {// Use o fechamento para salvar as variáveis dy e a etapa (distância de cada rolagem de animação) deixe dy = 0; Deixe passo = (endValue-startValue)/(duração/10); Retornar função (intervalo) {dy+= etapa; if (math.abs (dy)> = math.abs (endValue-startValue)) {clearInterval (intervalo); } //el.scrolltop+=step ;///This Line of Code é modificado para o seguinte El.scrollto (0, el.Scrolltop+etapa); }} O efeito de execução é consistente com a implementação usando scrollTop .
Implementação básica
Também podemos usar scrollBy(x,y) para controlar a barra de rolagem. Como mencionado acima, scrollBy() é controlar a distância especificada da barra de rolagem (observe que não é a posição). Use scrollby () para implementar facilmente o requisito de rolagem para elementos especificados. O código é o seguinte:
função scrollToElement (contêinerel, el) {// porque getBoundingClientRect (). Top é a distância da parte superior do elemento filho até o topo do elemento pai, portanto esse valor é o deslocamento do elemento filho em relação ao elemento pai. Passamos esse valor para Scrollby, isto é, role para o contêinerel.Scrollby (0, El.GetBoundingClientRect (). Top);}Role até o fundo:
função scrollTobottom (contêinerel) {let dy = contêinerel.ScrolHeight-contáfego.clientHeight; contêinerel.scrollby (0, dy);}Role até o topo
função scrolltotop (contêinerel) {let dy =-(contairel.ScrolHeight-containerel.clientHeight); contêinerel.scrollby (0, dy);}Adicione animação
Aqui modificamos a função gerada pela animação, porque o parâmetro de scrollBy() aqui está o deslocamento da variável, por isso fazemos as seguintes modificações:
função scrollTobottom (contêinerel) {if (! contêinerel) {containerel = contêiner; } // dy é o deslocamento Deixe dy = contêinerel.ScrolHeight-containerel.clientHeight; Seja scrollanimationfn = doanimação (DY, 300, contêinerel); Deixe interval = setInterval (() => {scrollanimationfn (interval)}, 10)} função scrollTotop (contémerel) {if (! } // dy é o deslocamento, deixe dy =-(contêinerel.scrolHeight-containerel.clientHeight); Seja scrollanimationfn = doanimação (DY, 300, contêinerel); Deixe interval = setInterval (() => {scrollanimationfn (interval)}, 10)} função scrollToElement (contêinerel, el) {if (! } if (! el) {let input = document.getElementsByTagName ('input') [0]; deixe id = 'item'+input.value; if (! input.value) {id = 'item'+index; } el = document.getElementById (id); } // dy é o deslocamento, deixe dy = el.getBoundingClientRect (). top; Seja scrollanimationfn = doanimação (DY, 300, contêinerel); Deixe interval = setInterval (() => {scrollanimationfn (interval)}, 10)}/** * @Description: * @param {type} * @return: */function doanimation (dy, duração, duração, cada animação) {// use o fechamento para salvar variáveis como exe_dy e steping (a distância de cada vez, de cada animação de cada animação. Deixe o passo = dy/(duração/10); Retornar função (intervalo) {exe_dy+= step; if (math.abs (exe_dy)> = math.abs (dy)) {clearInterval (intervalo); } el.scrollby (0, etapa); }} O efeito de execução é consistente com a implementação usando scrollTop .
O acima: Point_Up_2: é seu próprio resumo detalhado e explicação do controle da barra de rolagem DOM, bem como alguns métodos básicos de uso.
Este é o artigo sobre a explicação detalhada do resumo do controle de rolagem de rolagem do elemento DOM no HTML. Para um conteúdo de rolagem de barras de rolagem de elemento DOM mais relevante, procure artigos anteriores do Wulin.com ou continue a navegar nos artigos relacionados abaixo. Espero que todos apoiem o Wulin.com no futuro!