滑鼠雙擊頁面實現自動滾動效果

antzone發表於2017-03-17

有些網頁可以實現雙擊滑鼠能夠頁面自動向下滾動效果，這種功能可以用於較長並且需要閱讀的頁面，是一項比較人性化的措施，下面通過程式碼例項簡單介紹一下如何實現此小姑。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
var currentpos,timer;
function initialize(){
  timer=setInterval("scrollwindow()",30);
}
function sc(){
  clearInterval(timer);
}
function scrollwindow(){
  currentpos=document.body.scrollTop||document.documentElement.scrollTop;
  window.scroll(0,++currentpos);
  if(currentpos !=(document.body.scrollTop||document.documentElement.scrollTop)){
     sc();
  }
}
document.onmousedown=sc; //停止
document.ondblclick=initialize; //開始
</script>
</head>
<body style="height:2000px;">
 
</body>
</html>

以上程式碼實現了我們的要求，下面簡單介紹一下它的實現過程。

一.實現原理:

當滑鼠雙擊頁面的時候，能夠不斷的不斷設定滾動條的位置，並且能夠通過變數儲存此位置的值，如果滾動條沒有滾動到最低端的話，此標量的值和滾動條位置的值始終是相等的，但是如果滾動到低端，那麼此變數的值還會增加，但是滾動條的位置不變數了，所以當currentpos不等於(document.body.scrollTop||document.documentElement.scrollTop)就說明已經滾動到低端，然後停止定時器函式的執行。

二.相關閱讀:

1.setInterval()函式可以參閱setInterval()一章節。

2.clearInterval()函式可以參閱clearInterval()一章節。

3.document.body.scrollTop||document.documentElement.scrollTop參閱document.documentElement.scrollTop瀏覽器相容一章節。

4.onmousedown事件可以參閱javascript mousedown 事件一章節。

5.ondblclick事件可以參閱javascript dblclick 事件一章節。  

相關文章