1

我目前正在构建一个底部有导航栏的测验应用程序，其中包含问题数量的项目符号：

滚动条截图

我的页面底部有一个滚动条（水平），用作导航栏。就像您在移动应用程序上看到的很多一样。我没有或不希望滚动条可见，滚动我只需单击并拖动到一侧（或在平板电脑上点击并拖动）。这目前运作良好。

问题

我想添加的功能是一个很小的深蓝色滚动条，只有在我滚动时才会弹出。我认为如果我使用 div 而不是滚动条，那将是最简单的，因此可以使用 css 进行调整。现在我有了 div，随着栏滚动，自动调整到问题的长度和当前位置。

您知道如何在滚动发生时显示滚动条吗？我宁愿不把它放在悬停上，而只放在运动上。

我已经尝试过以下方法：

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

hidden 类显然包含“visibility : hidden;”。这不适用于每次滚动移动都会切换类。

4

2 回答 2

1

这个问题是很久以前问的，当时我还没有太多经验。由于很久以前就提出了这个问题，所以我将选择的解决方案作为答案：

var scrollbarTimeout;

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

每当发生滚动事件时，此代码的作用是：被调用的函数创建（或清除并创建）一个超时，该超时会在 500 毫秒后隐藏滚动条。

于 2014-02-03T13:57:41.947 回答
0

创建一个每两秒运行一次的ticker函数

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 秒将滚动设置为 false

  • 当 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-26T13:15:09.183 回答