如何仅在滚动时显示滚动条（使用jQuery）

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

我的页面底部有一个滚动条（水平），它是一个导航条。就像你在移动应用程序上经常看到的那样。我没有或不想看到滚动条，要滚动，我只需点击并拖动到一边（或在平板电脑上点击并拖动）。这是目前工作良好

问题

我想添加的功能是一个小的深蓝色滚动条，只有在我滚动时才会弹出。我想如果我用一个div来代替滚动条，这将是最简单的，这样就可以用css进行调整。现在我有了div，它和条一起滚动，自动调整到问题的长度和当前位置

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

我尝试了以下方法：

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

---

隐藏的类显然包含“可见性：隐藏；”。这不适用于每次滚动都会切换类的情况。

创建一个每隔一两秒运行一次的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;
});

---

创建一个每隔一两秒运行一次的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;
});

---

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

var scrollbarTimeout;

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

---

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

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

var scrollbarTimeout;

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

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