不滚动时滚动条褪色

debugcn 发表于 Dev

尼基B0T

我最近开始制作一个小型网站项目，并且在自定义滚动条方面有些挣扎。

到目前为止，滚动条只有在将鼠标悬停在其上时才可见，但这并不是我的目标。我希望在用户一段时间未滚动时将其隐藏。这是我到目前为止所得到的：

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

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

塞夫

我认为这只是一个错字。将结束样式标签更改为</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>

小提琴：https : //jsfiddle.net/71fjr0Lz/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。