首頁  >  文章  >  web前端  >  總結js/jQ實作滾動條效果方法

總結js/jQ實作滾動條效果方法

巴扎黑
巴扎黑原創
2017-06-07 11:44:241966瀏覽

之前有篇文章《HTML頁面滾動條相關設定總結》,主要說的是如何透過css去設定捲軸的樣式,顏色等,今天就總結下如何透過JS/JQ設置捲軸:

1.使用jQuery實現立體式數位捲軸增加效果實例    

jquery實現立體式數位捲軸增加效果,程式碼分成兩部分,一部分位html結構另一部分屬於js程式碼段,需要的朋友參考下吧!

總結js/jQ實作滾動條效果方法

2.js實作簡易垂直捲軸

本文主要介紹了js實作簡易垂直捲軸的範例程式碼,具有很好的參考價值,以下跟著小編一起來看下吧

總結js/jQ實作滾動條效果方法

3.原生js封裝自訂捲軸的程式碼案例分享

#本文主要介紹了原生js封裝自訂捲軸的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧

最近有一個關於製作線上音樂播放器的項目,需要使用一個滾動條,但是自帶滾動條實在是太醜了,所以就自己琢磨了一下自訂的滾動條。

總結js/jQ實作滾動條效果方法

4.利用jquery禁止外層捲軸的捲動

通常情況下,當內部捲軸捲動到兩端時,再接著滾動時外層的滾動條就會跟著滾動;可是有時我們希望用戶只能滾動當前區域,而不觸發外層(window)的滾動條,離開當前區域後,才能滾動外層的滾動條。因為使用者可能一不小心滾動的幅度太大了,導致目前區域離開可視區域。

總結js/jQ實作滾動條效果方法

5.jquery 判斷捲軸到達了底部和頂端的方法

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的

要取得頂端,只需要取得到scrollTop ()==0的時候就是頂端;

要取得底端,只要取得scrollTop()>=$(document).height()-$(window).height() 就可以知道已經滾動到底端了;

以上是總結js/jQ實作滾動條效果方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn