web-dev-qa-db-ja.com

スクロールしないときのフェードスクロールバー

だから私は最近、小さなウェブサイトプロジェクトを作り始めて、スクロールバーのカスタマイズに少し苦労しています。スクロールバーがホバーしたときにのみスクロールバーが表示されるようになりましたが、それが私の目標ではありません。ユーザーが一定期間スクロールしなかったときに、スクロールバーを非表示にしたいと思います。これは私がこれまでに得たものです：

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

これは、このようなフォーラムでの最初の投稿です。詳細情報を提供する必要があり、情報が不足しているかどうかを教えてください。

javascripthtmlcsswebkitscrollbar
3
Nicky B0T

それは単なるタイプミスだと思います。終了スタイルタグを_</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/

0
Sev