不滚动时淡出滚动条

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;
                }

                /*Comented cuz i dont 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.net71fjr0Lz