JavaScript scrollLeft

admin發表於2018-11-18
JavaScript

scrollLeft屬性可以返回或者設定元素內容向左滾動的尺寸。

也就是被元素左側所遮擋的尺寸，或者說滾動條向右滾動的距離。

返回或者設定的值都是數字，不能帶單位，預設單位是畫素。

此屬性相當有用，比如可以用來製作水平無縫滾動效果，後面會有簡單演示。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
dom.scrollLeft

瀏覽器支援:

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（2）.谷歌瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.opera瀏覽器支援此屬性。

（5）.safria瀏覽器支援此屬性。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:200px;
  height:100px;
  background-color:green;
  margin:0px auto;
  overflow:auto;
}
#inner{
  width:180px;
  height:30px;
  text-align:center;
  margin-top:20px;
  background-color:#ccc;
}
</style>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let oinner=document.getElementById("inner");
  oinner.innerHTML=obox.scrollLeft;
}
</script> 
</head>
<body> 
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/18/234552j4qe4cm7cc1am1ma.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由於box元素元素沒有出現橫向滾動條，所以無所謂scroll滾動。

所以scrollLeft屬性返回值始終為0。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:200px;
  height:100px;
  background-color:green;
  margin:0px auto;
  overflow:auto;
}
#inner{
  width:380px;
  height:20px;
  text-align:center;
  margin-top:20px;
  background-color:#ccc;
}
</style>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let oinner=document.getElementById("inner");
  obox.scrollLeft=50;
}
</script> 
</head>
<body> 
<div id="box">
  <div id="inner">本站url地址是www.softwhy.com</div>
</div>
</body>
</html>

上述程式碼可以設定box元素內容向左滾動50px。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/18/234617yv689gw00mlc88gk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

需要有兩點需要特別注意：

（1）.設定的值是一個數字，不能是帶有單位的字串，返回值也是如此。

（2）.不要誤認為內容向左滾動的尺寸，就是上圖中標出滾動條處的尺寸，圖中距離僅具有標識意義。

上面的程式碼效果都是靜態的，下面再分享一個動態效果，更加有利於理解。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:200px;
  height:100px;
  background-color:green;
  margin:0px auto;
  overflow:auto;
}
#inner{
  width:600px;
  height:30px;
  margin-top:20px;
  background-color:red;
}
</style>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let oinner=document.getElementById("inner");
  function done(){obox.scrollLeft++;}
  setInterval(done,10);
}
</script> 
</head>
<body> 
<div id="box">
  <div id="inner">螞蟻部落歡迎您，只有奮鬥才會有美好的未來</div>
</div>
</body>
</html>

上述程式碼實現了box內容自動向左滾動效果，程式碼分解如下：

[JavaScript] 純文字檢視 複製程式碼
let obox=document.getElementById("box");
let oinner=document.getElementById("inner");

獲取對應的兩個div元素物件，後面會用到。

[JavaScript] 純文字檢視 複製程式碼
function done(){obox.scrollLeft++;}

每呼叫一次此方法，外層div元素的scrollLeft屬性值加1。

也就是外層div元素內容向左滾動1px。

最後通過定時器方法setInterval每隔10毫秒呼叫一次done函式。

那麼就在視覺上形成了不間斷滾動效果，這也是當前線上大多數水平無縫滾動效果的原理。

當然上述程式碼僅僅是一個簡單的對scrollLeft屬性的演示，非常不完善。

可以線上實用的無縫滾動效果可以參閱JavaScript圖片橫向無縫滾動詳解一章節。

相關閱讀：

（1）.關於innerHTML屬性可以參閱JavaScript innerHTML一章節。

（2）.關於setInterval方法可以參閱JavaScript setInterval一章節。

相關文章