如何滚动（使用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）

回答

相关问题