ブラウザのスクロールバーの高さをjsで詳しく解説-jsチュートリアル-php.cn

ブラウザのスクロールバーの高さをjsで詳しく解説

零下一度

リリース： 2017-07-09 10:25:36

オリジナル

1604 人が閲覧しました

以下のエディターは、JS ブラウザーのスクロールバーの高さのスクロールトップに関する記事を提供します (例付きの説明)。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。エディターをフォローして見てみましょう

1. 以前に学習した JSbox モデルでは、client series/offset series/scrollWidth/scrollHeight はすべて「読み取り専用」属性です。要素のスタイルは属性を通じて変更できません

2.scrollTop/scrollLeft: スクロールバーの高さ/幅 (これら 2 つの属性は唯一の「読み取り可能および書き込み可能」属性です)

box.scrollTop = 0 // コンテナの先頭を直接返します

ScrollTopの値には境界値(最大値と最小値)があり、設定した値が最小値より小さいか、最大値より大きい場合は意味がありません。効果はまだ境界値です

[最小値はゼロです]

box.scrollTop = -1000;//

console.log(box.scrollTop)を超えずにコンテナの先頭に直接戻ります) //0

[最大値 = true 現在のコンテナの高さ - 画面の高さ]

var maxTop = box.scrollHeight - box.clientHeight;

scrollTop の最も古典的なアプリケーションは次のとおりです。トップに戻るには次のコードです:

<!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>

ログイン後にコピー

以上がブラウザのスクロールバーの高さをjsで詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。