javascript - 不滚动时滚动条消失

Question

我最近开始制作一个小网站元素，并且在自定义滚动条方面有点挣扎。
到目前为止，滚动条只有在您将鼠标悬停在它上面时才可见，但这并不是我的目标。我希望当用户在一段时间内没有滚动时隐藏它。这是我到目前为止得到的:

<style>

    ::-webkit-scrollbar {
        width: 6px;
        height: 12px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(242, 242, 242, 0);
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(221, 221, 221, 0);
        border-radius: 3px;
    }

    /*Commented because I don't want it to show when I just hover the site
    body:hover::-webkit-scrollbar-thumb {
        background: rgb(0, 0, 0);
    }
    */


    body.scrolling::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb:horizontal:hover,
    ::-webkit-scrollbar-thumb:vertical:hover {
        background: rgb(0, 0, 0);
    }


    ::-webkit-scrollbar-thumb:horizontal:active,
    ::-webkit-scrollbar-thumb:vertical:active {
        background: rgb(0, 0, 0);
    }
</style>

<script>$(window).scroll(function() {
    $('body').addClass('scrolling');
    alert("!!");
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $('body').removeClass('scrolling');
    }, 250));
});</script>

这是我在这样的论坛上的第一篇文章，所以请告诉我是否需要提供更多信息以及缺少哪些信息。

Answer 1

我认为这只是一个错字。将结束样式标记更改为 </style> .如果每次滚动时都弹出警报，则无法很好地测试。删除 alert("!!");或将其更改为 console.log("!!");
[之后]

当您希望滚动条通过过渡淡入和淡出时，您必须使用覆盖它的元素并为其不透明度设置动画。但是，不可能将元素放在文档的滚动条上方。这就是为什么您必须将整个页面包装在 div 中并自定义其滚动条的原因。

document.querySelector('.scroll-box').addEventListener('scroll', hideCoverBar);
document.querySelector('.scroll-box').addEventListener('mousemove', hideCoverBar);
var showTimeout;
function hideCoverBar() {
  document.querySelector('.cover-bar').classList.add('hidden');
  clearTimeout(showTimeout);
  showTimeout = setTimeout(showCoverBar, 1000);

}
function showCoverBar() {
  document.querySelector('.cover-bar').classList.remove('hidden');
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: monospace;
}

.main {
  padding: 20px;
}

h1 {
  font-size: 50px;
  margin: 0;
}

p {
  font-size: 12px;
  margin: 0;
}

img {
  display: block;
  margin: 0 auto;
  padding: 20px;
  max-width: 100%;
  box-sizing: border-box;
}

.scroll-bar-wrap {
  width: 100vw;
  position: relative;
}

.scroll-box {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
}

.scroll-box::-webkit-scrollbar {
  width: .4em;
}

.scroll-box::-webkit-scrollbar,
.scroll-box::-webkit-scrollbar-thumb {
  overflow: visible;
  border-radius: 4px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .2);
}

.cover-bar {
  position: absolute;
  background: #fff;
  pointer-events: none;
  height: 100%;
  top: 0;
  right: 0;
  width: .4em;
  -webkit-transition: all .5s;
  opacity: 1;
}

.cover-bar.hidden {
  opacity: 0;
}

<div class="scroll-bar-wrap">
        <div class="scroll-box">
            <div class="main">
                <h1>Lorem ipsum dolor sit amet
                </h1>
                <img src="http://placekitten.com/600/400" />
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                </p>
            </div>
        </div>
        <div class="cover-bar"></div>
    </div>

fiddle : https://jsfiddle.net/71fjr0Lz/