Maison >interface Web >js tutoriel >Explication détaillée de la hauteur de la barre de défilement du navigateur en js

Explication détaillée de la hauteur de la barre de défilement du navigateur en js

零下一度original: 2017-07-09 10:25:361603parcourir

L'éditeur ci-dessous vous proposera un article sur la hauteur de défilement de la barre de défilement du navigateur js (explication avec exemples). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil

1. Dans le modèle de boîte JS nous avons appris précédemment : les séries client/séries offset/scrollWidth/scrollHeight sont tous des attributs « en lecture seule » ->. ; La valeur ne peut être obtenue que via les attributs, et le style de l'élément ne peut pas être modifié via les attributs

2. scrollTop/scrollLeft : la hauteur/largeur de la barre de défilement (ces deux attributs sont les seuls "lisibles") et attributs" inscriptibles)

box.scrollTop = 0 // Retourne directement en haut du conteneur

La valeur de notre scrollTop a des valeurs limites (valeurs maximales et minimales), et la valeur que nous définissons est inférieure à la valeur minimale ou Elle est inutile si elle est supérieure à la valeur maximale. L'effet est toujours la valeur limite

[La valeur minimale est zéro]

box.scrollTop = -1000;// Retourne directement en haut du conteneur, sans dépasser

console.log(box.scrollTop) //0

[valeur maximale = hauteur réelle - La hauteur du conteneur actuel sur un écran]

var maxTop = box.scrollHeight - box.clientHeight;

L'application la plus classique de scrollTop est de revenir en haut. Le code suivant est le suivant ：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      padding:0;
      margin:0;
    }
    html,body{
      width:100%;
      height:1000%;
      background:#11c900;
    }
    a{
      text-decoration: none;
      color:#000;

    }
  </style>
</head>
<body>
<a href="javascript:" rel="external nofollow" id="goLink">GO</a>
//A标签本身是跳转页面的，把跳转的地址写在href这个属性中
/*
  1）、不写值的话是刷新本页面
  2）、写的如果是#target，是锚点定位，定位到当前页面Id为target这个位置
  3）、“javascript:”这样写是取消A标签默认跳转的行为
*/
<script>
  var goLink =document.getElementById("goLink");
  /*
    回到顶部：
    总时间（duration）:500ms 
    频率（interval）：多长时间走一步 10ms 
    总距离(target): 当前的位置（当前的scrollTop）- 目标的位置(0)
    步长(step)：每一次走得距离  (target/duration)*interval 
  */


  /*
    这个代码是可以优化的:
    开始GO按钮是不显示的，当滚动到一定的距离之后，才显示，反之隐藏 只要浏览器的滚动条在滚动，我们就需要判断GO显示还是隐藏
    浏览器的滚动条滚动:拖动滚动条、鼠标滚轮、键盘上下键、pageDown/pageUp键、点击滚动条的空白区域或者箭头（自主操作的行为）...我们还可以通过js控制scrollTop的值来实现滚动条的滚动
  */

  window.onscroll = function computedDisplay(){//不管怎么操作的，只要滚动条动了就会触发这个行为
    var curTop = document.documentElement.scrollTop || document.body.scrollTop;
    var curHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if(curTop>=clientHeight){
      goLink.style.display = "block"
    }else{
      goLink.style.display = "none"
    }

  }
  goLink.onclick = function(){
    this.style.display = "none";//并不会消失，因为我们滚动条往回走的时候 又会触发onscroll事件，又会进行显示
    window.onscroll = null;
    var duration = 500,interval=10,target=document.documentElement.scrollTop || document.body.scrollTop;
    var step = (target/duration)*interval;

    var timer = window.setInterval(function(){
      var curTop = document.documentElement.scrollTop || document.body.scrollTop;
      if(curTop===0){
        window.clearInterval(timer);
        window.onscroll = computedDisplay;
        //当动画结束后把对应的方法重新绑定给window.onscroll
        return;
      }
      curTop-=step
      document.documentElement.scrollTop = curTop;
      document.body.scrollTop = curTop;
    },interval)
    // document.documentElement.scrollTop = 0;
    // document.body.scrollTop = 0;
  }
</script>
</body>
</html>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partagez des exemples spécifiques d'implémentation de code de la signature de l'interface WeChat JSArticle suivant：Partagez des exemples spécifiques d'implémentation de code de la signature de l'interface WeChat JS

Articles Liés

Voir plus