recherche

Maison  >  Article  >  Opération et maintenance  >  Comment comprendre le défilement

Comment comprendre le défilement

WBOY
WBOYavant
2023-05-23 13:40:321452parcourir

Scroll width and height

scrollHeight

scrollHeight représente la hauteur totale de l'élément, y compris les parties invisibles qui ne peuvent pas être affichées sur la page Web en raison d'un débordement Part

scrollWidth

scrollWidth représente la largeur totale de l'élément, y compris la partie invisible qui ne peut pas être affichée sur la page Web en raison d'un débordement

# 🎜🎜#　[Note] La valeur de retour du navigateur IE7 est inexacte

【1】Lorsqu'il n'y a pas de barre de défilement, les attributs scrollHeight et clientHeight sont égaux, et les attributs scrollWidth et clientWidth sont égaux

<div id="test" ></div><script>//120 120console.log(test.scrollHeight,test.scrollWidth);//120 120console.log(test.clientHeight,test.clientWidth);</script>
　【2】Lorsqu'une barre de défilement existe, mais que la largeur et la hauteur de l'élément sont supérieures ou égales à la largeur et à la hauteur du contenu de l'élément, le les résultats des attributs de défilement et du client sont égaux 

<div id="test" >
    内容<br>内容<br></div><script>//103(120-17) 103(120-17)console.log(test.scrollHeight,test.scrollWidth);//103(120-17) 103(120-17)console.log(test.clientHeight,test.clientWidth);</script>
　【3】Il y a une barre de défilement, mais l'élément Définissez la largeur et la hauteur pour qu'elles soient plus petites que la largeur et la hauteur du contenu de l'élément, c'est-à-dire , en cas de débordement de contenu, l'attribut scroll est supérieur à l'attribut client

[Note] Il existe un problème de compatibilité avec l'attribut scrollHeight Dans les navigateurs Chrome et Safari, scrollHeight contient padding -bottom; IE et Firefox n'incluent pas padding-bottom

<div id="test" >
    内容</div><script>//chrome/safari:220(200+10+10)//firefox/IE:210(200+10)console.log(test.scrollHeight);//103(120-17)console.log(test.clientHeight);</script>
page size

Document.documentElement.clientHeight représente la taille de la zone visible de la page, tandis que document.documentElement . scrollHeight représente la taille réelle du contenu de l'élément HTML. Cependant, en raison des performances différentes de chaque navigateur, il est divisé dans les situations suivantes

【1】Lorsque l'élément html n'a pas de barre de défilement, les attributs client et de défilement d'IE et Firefox sont toujours la même, et la valeur de la zone visuelle est renvoyée Size ; tandis que Safari et Chrome se comportent normalement, clientHeight renvoie la taille de la zone visible et scrollHeight renvoie la taille du contenu de l'élément 

//firefox:  755 755//chrome:   947 8(body元素的margin)//safari:   744 8(body元素的margin)//IE:       768 768console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)
. 【2】Lorsque l'élément html possède une barre de défilement, tous les navigateurs se comportent normalement. clientHeight fournit la taille de la zone d'affichage, tandis que scrollHeight fournit la taille du contenu de l'élément

<body ><script>//firefox:  755 1016(1000+8*2)//chrome:   947 1016(1000+8*2)//safari:   744 1016(1000+8*2)//IE:       768 1016(1000+8*2)console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)</script>

Compatible

Par conséquent, il est nécessaire de obtenir la hauteur réelle du document Quand, pour obtenir la valeur maximale de scrollHeight et clientHeight de l'élément 🎜🎜#

#🎜 🎜# L'attribut scrollTop représente le nombre de pixels cachés au-dessus de la zone de contenu. Lorsque l'élément ne défile pas, la valeur de scrollTop est 0. Si l'élément défile verticalement, la valeur de scrollTop est supérieure à 0 et représente la largeur en pixels du contenu invisible au-dessus de l'élément

# 🎜🎜#scrollLeft#🎜🎜 #

La propriété scrollLeft indique le nombre de pixels cachés à gauche de la zone de contenu. Lorsque l'élément ne défile pas, la valeur de scrollLeft est 0. Si l'élément défile horizontalement, la valeur de scrollLeft est supérieure à 0 et représente la largeur en pixels du contenu invisible sur le côté gauche de l'élément # 🎜🎜# Lorsque la barre de défilement défile vers le bas du contenu Quand, l'équation suivante est remplie 

var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);var docWidth  = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
scrollHeight == scrollTop  + clientHeight
Contrairement aux propriétés scrollHeight et scrollWidth, scrollLeft et scrollTop sont accessibles en écriture

[Note] Attribuez des valeurs négatives à scrollLeft et scrollTop Quand , il ne signale pas d'erreur, mais échoue silencieusement 

<div id="test" >
    内容</div><button id=&#39;btn1&#39;>点击</button><div id="result"></div><script>btn1.onclick = function(){
    result.innerHTML = 'scrollTop:' + test.scrollTop+';clientHeight:' + test.clientHeight + ';scrollHeight:' + test.scrollHeight
}</script>
Page scrolling Théoriquement, le défilement de la page peut être reflété et contrôlé via document.documentElement.scrollTop et scrollLeft ; cependant, les navigateurs Chrome et Safari sont contrôlés via document.body.scrollTop et scrollLeft 

<div id="test" >
    内容</div><button id=&#39;btn1&#39;>向下滚动</button><button id=&#39;btn2&#39;>向上滚动</button><script>btn1.onclick = function(){test.scrollTop += 10;}
btn2.onclick = function(){test.scrollTop -= 10;}</script>
Par conséquent, la compatibilité avec la hauteur de défilement de la page est écrite comme 

<body ><button id=&#39;btn1&#39; >点击</button><div id="result" ></div><script>btn1.onclick = function(){
    result.innerHTML = 'html的scrollTop:' + document.documentElement.scrollTop +';body的scrollTop:' + document.body.scrollTop;
}</script>    </body>

Back Top

Vous pouvez utiliser scrollTop pour réaliser la fonction de retour en haut 

var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop
function scrollTop(){    if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
}

Là Il existe également deux propriétés en lecture seule de la fenêtre qui peuvent obtenir la valeur en pixels du défilement de la page entière. Il s'agit de pageXOffset et pageYOffset qui représente la valeur en pixels du défilement de la page. dans le sens vertical

[Remarque] Le navigateur IE8 ne prend pas en charge 

<body >
<button id=&#39;btn&#39; >回到顶部</button>
<script>function scrollTop(){    if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
}
btn.onclick = scrollTop;</script>
</body>
#🎜🎜 #Méthode de défilement

scrollTo(x,y)

La méthode scrollTo(x,y) fait défiler le document affiché dans la fenêtre courante et laisse le document Le point spécifié par les coordonnées x et y est situé dans le coin supérieur gauche du zone d'affichage La méthode y) fait défiler le document affiché dans la fenêtre actuelle. x et y spécifient la quantité relative de défilement. La fonction de défilement rapide

<body ><button id=&#39;btn1&#39; >点击</button><div id="result" ></div><script>btn1.onclick = function(){
    result.innerHTML = 'pageYOffset:' + window.pageYOffset;
}</script>    </body>

scrollIntoView()

#. 🎜🎜# La méthode Element.scrollIntoView fait défiler l'élément actuel dans la zone visible du navigateur

　Cette méthode peut accepter une valeur booléenne comme paramètre. Si vrai, cela signifie que le haut de l'élément est aligné avec le haut de la partie visible de la zone actuelle (à condition que la zone actuelle soit défilable) ; si c'est faux, cela signifie que le bas de l'élément est aligné avec ; la queue de la partie visible de la zone courante (à condition que la zone courante soit scrollable) ). Si ce paramètre n'est pas fourni, sa valeur par défaut est true. Ce n'est que lorsqu'il est visible que la fenêtre du navigateur ou l'élément conteneur peut défiler jusqu'à ce qu'il soit finalement visible. Si l'élément actuel est visible dans la fenêtre, cette méthode ne fait rien

Lorsque le paramètre alignCenter est défini sur true, l'élément sera affiché aussi verticalement que possible dans la fenêtre 🎜# [Remarque. ] Cette méthode n'est prise en charge que par Chrome et Safari 

<body ><button id=&#39;btn&#39; >滚动</button><script>btn.onclick = function(){scrollTo(0,0);}</script>
scrollByLines(lineCount)

　　scrollByLines(lineCount)方法将元素的内容滚动指定的行髙，lineCount值可以是正值， 也可以是负值

　　[注意]该方法只有safari支持

<div id="test" >
    内容</div><button id=&#39;btn1&#39;>向下滚动</button><button id=&#39;btn2&#39;>向上滚动</button><script>btn1.onclick = function(){test.scrollByLines(1);}
btn2.onclick = function(){test.scrollByLines(-1);}</script>

scrollByPages(pageCount)

　　scrollByPages(pageCount)方法将元素的内容滚动指定的页面高度，具体高度由元素的高度决定

　　[注意]该方法只有safari支持

<div id="test" >
    内容</div><button id=&#39;btn1&#39;>向下滚动</button><button id=&#39;btn2&#39;>向上滚动</button><script>btn1.onclick = function(){test.scrollByPages(1);}
btn2.onclick = function(){test.scrollByPages(-1);}</script>

滚动事件

在页面中相应元素发生变化时，scroll事件会在window对象上触发。当然，scroll事件也可以用在有滚动条的元素上

<body ><div id="result" ></div><script>window.onscroll = function(){
    result.innerHTML = '页面的scrollTop:' + (document.documentElement.scrollTop||document.body.scrollTop);
}</script>    </body>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

firefox chrome safari html 对象 事件 padding
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment effectuer une analyse de carte d'itinéraireArticle suivant：Comment effectuer une analyse de carte d'itinéraire

Articles Liés

Voir plus