不滚动时褪色滚动条

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>

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

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/

不滚动时褪色滚动条

fading scrollbar when not scrolling

html

javascript

css

webkit

scrollbar