瀏覽器滾動條的詳細介紹

來源：懂視網責編：小采時間：2020-11-27 20:17:04

瀏覽器滾動條的詳細介紹

瀏覽器滾動條的詳細介紹:1、之前我們學習的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是只讀的屬性-> 只能通過屬性獲取值，不能通過屬性修改元素的樣式2、scrollTop/scrollLeft:滾動條卷去的高度/寬度（這兩個屬性是唯一可讀寫的屬性） box.

推薦度：

點擊下載本文 文檔為doc格式

導讀瀏覽器滾動條的詳細介紹:1、之前我們學習的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是只讀的屬性-> 只能通過屬性獲取值，不能通過屬性修改元素的樣式2、scrollTop/scrollLeft:滾動條卷去的高度/寬度（這兩個屬性是唯一可讀寫的屬性） box.

1、之前我們學習的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是“只讀”的屬性-> 只能通過屬性獲取值，不能通過屬性修改元素的樣式

2、scrollTop/scrollLeft:滾動條卷去的高度/寬度（這兩個屬性是唯一“可讀寫”的屬性）

　　box.scrollTop = 0 // 直接回到容器的頂部

　　我們的scrollTop的值是存在邊界值（最大和最小值），我們設置的值比最小值小或者比最大值大都沒用，起到效果的依然是邊界的值

　　[最小值是零]

　　box.scrollTop = -1000;// 直接回到了容器的頂部，沒有超出

　　console.log(box.scrollTop) //0

　　[最大值 = 真實的高度-當前容器一屏幕的高度]

　　var maxTop = box.scrollHeight - box.clientHeight;

　　scrollTop最經典的應用就是回到頂部，下面代碼如下：　　　

1、之前我們學習的JS盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是“只讀”的屬性-> 只能通過屬性獲取值，不能通過屬性修改元素的樣式

2、scrollTop/scrollLeft:滾動條卷去的高度/寬度（這兩個屬性是唯一“可讀寫”的屬性）

　　box.scrollTop = 0 // 直接回到容器的頂部　　我們的scrollTop的值是存在邊界值（最大和最小值），我們設置的值比最小值小或者比最大值大都沒用，起到效果的依然是邊界的值

　　[最小值是零]

　　box.scrollTop = -1000;// 直接回到了容器的頂部，沒有超出　　console.log(box.scrollTop) //0　　[最大值 = 真實的高度-當前容器一屏幕的高度]

　　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:" 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 *//*這個代碼是可以優(yōu)化的:
 開始GO按鈕是不顯示的，當滾動到一定的距離之后，才顯示，反之隱藏 只要瀏覽器的滾動條在滾動，我們就需要判斷GO顯示還是隱藏
 瀏覽器的滾動條滾動:拖動滾動條、鼠標滾輪、鍵盤上下鍵、pageDown/pageUp鍵、點擊滾動條的空白區(qū)域或者箭頭（自主操作的行為）...我們還可以通過js控制scrollTop的值來實現滾動條的滾動*/window.onscroll = function computedDisplay(){//不管怎么操作的，只要滾動條動了就會觸發(fā)這個行為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";//并不會消失，因為我們滾動條往回走的時候 又會觸發(fā)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.onscrollreturn;
  }
  curTop-=step
  document.documentElement.scrollTop = curTop;
  document.body.scrollTop = curTop;
 },interval)// document.documentElement.scrollTop = 0;// document.body.scrollTop = 0; }</script>
</body>
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:0731-84117792 E-MAIL:11247931@qq.com

瀏覽器滾動條的詳細介紹

推薦度：

點擊下載本文 文檔為doc格式

標簽：瀏覽器介紹詳細

熱門焦點

瀏覽器滾動條的詳細介紹

瀏覽器滾動條的詳細介紹

瀏覽器滾動條的詳細介紹

最新推薦

猜你喜歡

熱門推薦