JavaScript scrollLeft
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>
程式碼執行效果截圖如下:
由於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。
程式碼執行效果截圖如下:
需要有兩點需要特別注意:
(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一章節。
相關文章
- JavaScript屬性中的offsetLeft、offsetWidth、clientWidth、scrollLeft、scrollWidth、innerWidJavaScriptclient
- JavaScript高階:JavaScript物件導向,JavaScript內建物件,JavaScript BOM,JavaScript封裝JavaScript物件封裝
- javaScript系列[06]-javaScript和thisJavaScript
- [Javascript] How javascript read the property?JavaScript
- javaScript系列[05]-javaScript和JSONJavaScriptJSON
- “This” is For JavaScriptJavaScript
- This in JavaScriptJavaScript
- JavaScript -"this"JavaScript
- JavaScriptJavaScript
- javascript ??JavaScript
- 44 道 JavaScript 難題(JavaScript Puzzlers!)JavaScript
- [Javascript] Understanding JavaScript Proxies with Symbol.toPrimitiveJavaScriptSymbolMIT
- JavaScript 教程之JavaScript常用框架簡介JavaScript框架
- [Javascript] Perform Set Operations using JavaScript Set MethodsJavaScriptORM
- javascript — == vs ===JavaScript
- JavaScript selectedIndexJavaScriptIndex
- JavaScript deleteCell()JavaScriptdelete
- JavaScript lastElementChildJavaScriptAST
- JavaScript hasAttribute()JavaScript
- JavaScript getAttributeNode()JavaScript
- JavaScript replaceChild()JavaScript
- JavaScript remove()JavaScriptREM
- JavaScript appendChild()JavaScriptAPP
- JavaScript deleteRow()JavaScriptdelete
- JavaScript clientYJavaScriptclient
- JavaScript之thisJavaScript
- JavaScript isFinite()JavaScript
- JavaScript toggle()JavaScript
- JavaScript Boolean()JavaScriptBoolean
- JavaScript escape()JavaScript
- JavaScript parseFloat()JavaScript
- JavaScript unescape()JavaScript
- JavaScript call()JavaScript
- JavaScript bind()JavaScript
- JavaScript previousElementSiblingJavaScript
- JavaScript preventDefault()JavaScript
- JavaScript insertRow()JavaScript
- JavaScript isPrototypeOf()JavaScript