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>
<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>
<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>
//firefox: 755 755//chrome: 947 8(body元素的margin)//safari: 744 8(body元素的margin)//IE: 768 768console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)
<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
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
<div id="test" > 内容</div><button id='btn1'>点击</button><div id="result"></div><script>btn1.onclick = function(){ result.innerHTML = 'scrollTop:' + test.scrollTop+';clientHeight:' + test.clientHeight + ';scrollHeight:' + test.scrollHeight }</script>
<div id="test" > 内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollTop += 10;} btn2.onclick = function(){test.scrollTop -= 10;}</script>
<body ><button id='btn1' >点击</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 hautvar docScrollTop = document.documentElement.scrollTop || document.body.scrollTop
function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){ document.body.scrollTop = document.documentElement.scrollTop = 0; } }
<body > <button id='btn' >回到顶部</button> <script>function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){ document.body.scrollTop = document.documentElement.scrollTop = 0; } } btn.onclick = scrollTop;</script> </body>
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='btn1' >点击</button><div id="result" ></div><script>btn1.onclick = function(){ result.innerHTML = 'pageYOffset:' + window.pageYOffset; }</script> </body>
#. 🎜🎜# 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='btn' >滚动</button><script>btn.onclick = function(){scrollTo(0,0);}</script>
scrollByLines(lineCount)方法将元素的内容滚动指定的行髙,lineCount值可以是正值, 也可以是负值
[注意]该方法只有safari支持
<div id="test" > 内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</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='btn1'>向下滚动</button><button id='btn2'>向上滚动</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!