Comment comprendre le défilement
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>
<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
# 🎜🎜#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
<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 haut
var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop
Copier après la connexion
function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}Copier après la connexion
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
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;
}
}<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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Qu'est-ce qu'un bouton de défilement ?
Feb 22, 2023 pm 02:29 PM
scroll est la touche de verrouillage du défilement, une touche de fonction sur un clavier d'ordinateur. La touche de défilement est couramment utilisée dans Word et Excel. Lorsque le verrouillage du défilement est désactivé et que la touche de changement de page est utilisée, la zone de cellules sélectionnée se déplace, mais lorsque la touche de verrouillage du défilement est enfoncée, la zone sélectionnée ne bouge pas ; .de cellules.
Que signifie le voyant de défilement du clavier ?
Feb 20, 2023 pm 01:42 PM
Le voyant de défilement du clavier allumé signifie que le « Scroll Lock » est activé ; la touche Scroll Lock n'est pas utilisée dans le système Win, mais certains logiciels utiliseront cette touche de fonction. Après avoir appuyé sur cette touche, les touches Excel haut et bas se verrouillent lorsque. défilement. Le curseur fait défiler la page ; si vous relâchez cette touche, l'appui sur les touches haut et bas fera défiler le curseur sans faire défiler la page.
Comment comprendre le défilement
May 23, 2023 pm 01:40 PM
scroll width et height scrollHeight scrollHeight représente la hauteur 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 scrollWidth scrollWidth représente la largeur totale de l'élément, y compris la partie invisible qui ne peut pas être affichée sur le Web page en raison d'un débordement [Note] IE7-Browser La valeur de retour 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 //120120console.log(test.scrollHeight ,test.s
Comment utiliser v-on:scroll pour écouter les événements de défilement dans Vue
Jun 11, 2023 pm 12:14 PM
Vue est actuellement l'un des frameworks frontaux les plus populaires. En plus de la surveillance des événements courants, Vue fournit également une instruction pour surveiller les événements de défilement, à savoir v-on:scroll. Cet article présentera en détail comment utiliser v-on:scroll pour écouter les événements de défilement dans Vue. 1. Utilisation de base de l'instruction v-on:scroll L'instruction v-on:scroll est utilisée pour surveiller les événements de défilement des éléments DOM. Son utilisation de base est la suivante : <divv-on:scroll="sc.
Comment masquer le défilement en CSS
Jan 28, 2023 pm 02:02 PM
Comment masquer le défilement en CSS : 1. Dans Firefox, vous pouvez masquer la barre de défilement via l'attribut "scrollbar-width: none; /* Firefox */" 2. Dans le navigateur IE, vous pouvez utiliser le préfixe "-ms-prefix" ; " Attribut Définissez le style de la barre de défilement ; 3. Dans Chrome et Safari, vous pouvez utiliser le sélecteur de barre de défilement CSS, puis le masquer via "display:none".
Qu'est-ce que Ethereum Scroll? Comment faire fonctionner Ethereum Scroll?
Feb 15, 2025 pm 10:33 PM
Ethereum Scroll est une solution de mise à l'échelle de la couche 2 conçue pour améliorer l'évolutivité du réseau Ethereum par le biais de technologies Sharding et ZK-Rollup. Il combine ces deux technologies pour traiter les transactions en parallèle et vérifier efficacement, améliorant ainsi considérablement le débit du réseau et la réduction des frais de transaction. Scroll est conçu pour être une couche d'extension compatible pour les machines virtuelles Ethereum (EVM), permettant aux utilisateurs de traiter les transactions rapidement et économiquement.
Lancement du jeton Scroll (SCR) : un pas vers la décentralisation
Oct 11, 2024 pm 10:18 PM
Le lancement du token intervient alors que Scroll vise à améliorer sa gouvernance et à consolider son rôle d’acteur clé dans l’écosystème Ethereum.
Scroll, le réseau Zero-Knowledge Layer-2 à croissance rapide, a confirmé qu'il lancerait son Airdrop le 19 octobre
Oct 12, 2024 am 12:14 AM
Ce recul est en partie dû au fait que le marché plus large de la cryptographie ne se porte pas bien, avec un indice de peur et de cupidité bloqué en dessous de 45. Bitcoin n'a pas non plus réussi à dépasser le point de résistance à 65 000 $.
