如何滾動（使用jQuery）

我目前建設有底部導航欄一個一個測驗應用程序，包含子彈的問題的數量，只有當顯示滾動條：如何滾動（使用jQuery）

我有一個滾動條（水平）在我的頁面底部作爲導航欄。就像您在移動應用程序中看到的一樣。我沒有或想要滾動條可見，滾動我只是簡單地點擊並拖動到一側（或在平板電腦上點擊並拖動）。這目前運作良好。

問題

我想補充的是functionallity是一個很小的深藍色的滾動條，只有當我滾動彈出。我認爲如果我使用div來代替滾動條，它會是最簡單的，所以它是用CSS調整的。現在我有div，與欄一起滾動，自動調整爲問題長度和當前位置。

你有一個想法，當滾動發生時我該如何顯示滾動條？我寧願不把它放在盤旋上，而只放在運動上。

我媒體鏈接試過如下：

$('#wrapper').scroll(function() { 
    $('#navScrollbar').toggleClass("hidden"); 
});

隱藏顯然類包含「可見性：隱藏;」。這不適用於每個滾動移動都會切換課程。

來源

2012-04-26 Bart Burg

這個問題在很久以前就被問到，當時我還沒有太多的經驗。由於議題很久以前問，我給了選擇的解決方案爲答案：

var scrollbarTimeout; 

$('#wrapper').scroll(function() { 
    $('#navScrollbar').show(); 
    clearTimeout(scrollbarTimeout); 
    scrollbarTimeout = setTimeout(function() 
    { 
     // Your function here 
     $('#navScrollbar').hide(); 
    }, 500); 
});

這個代碼做什麼，只要滾動事件發生的情況：被調用函數創建（或清除，並創建）超時在500毫秒後隱藏滾動條。

來源

2014-02-03 13:57:41

創建它運行每一秒或滾動字幕函數的兩個

var isUserScrolling = false; 
var navScrollbar = $('#navScrollbar'); 

function ToggleScrollbarVisiblity() 
{ 
    if(isUserScrolling == false) 
    navScrollbar.stop().fadeOut(); 

    isUserScrolling = false; 
} 

setInterval(ToggleScrollbarVisiblity, 1500); 

$('#wrapper').scroll(function() { 
    if(isUserScrolling == false) 
    navScrollbar.stop().fadeIn(); 

    isUserScrolling = true; 
});

什麼希望這將做的是：

當用戶開始在滾動條滾動褪色和一個布爾值設置爲true
每x秒設置滾動爲假
當x秒回來周圍是否仍然假（用戶沒有滾動x秒），然後淡出

如果您遇到的問題與滾動條在錯誤的時刻淡出那麼這是一個時間問題。然後協調時間，試試：

var scrollThread = null; 
var isUserScrolling = false; 
var navScrollbar = $('#navScrollbar'); 

function ToggleScrollbarVisiblity() 
{ 
    if(isUserScrolling == false) { 
    navScrollbar.stop().fadeOut(); 
    clearInterval(scrollThread); 
    } 

    isUserScrolling = false; 
} 

$('#wrapper').scroll(function() { 
    if(isUserScrolling == false) { 
    navScrollbar.stop().fadeIn(); 
    scrollThread = setInterval(ToggleScrollbarVisiblity, 1500); 
    } 

    isUserScrolling = true; 
});

來源

2012-04-26 13:15:09

如何滾動（使用jQuery）

回答

相關問題