web-dev-qa-db-ja.com

jQueryを使用せずに単純なページ垂直スクロールバーを作成するにはどうすればよいですか？

私はすべてのスクロールバーのコードを見てきましたが、jQueryを使用しない単純なものややや複雑なライブラリをまだ見つけることができていません。

Javascriptだけを使用して独自のシンプルなスクロールバーを作成した人はいますか？私が探しているのは、これを行う方法の例です。特に、私は単純なBootstrap Webページを持っています：

<body>
   <header> ....</header>
   <main> ......</main>
</body>

私がやりたいのは、コンテンツが1ページに収まらない場合に、<main>領域の右側に小さなページ内スクロールバーを表示できるようにすることです。スタイリングの目的で、このnotをブラウザのデフォルトのスクロールバーにしたいと思います。

これが私が探しているものの例ですが、これはjQueryを使用しているため、自分のサイトでは使用できません。

http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

最新のブラウザIE9以降でJavascriptを使用してこれを行う方法を探しています。これは多くの人に役立つと思うので、誰かがページコンテンツ領域上でマウスホイールにも反応するドラッグ可能なページスクロールバーの良い例を提供できることを期待して、これに200の賞金を用意しました。

ただの更新。私はこのためのモバイルソリューションを探していません。 PC/Macブラウザ内で機能するソリューションを探しています。このサイトは設定されていないか、電話に適していません。 iPad /タブレットで使用することは可能ですが、それらのニーズのために、通常のタブレットのスクロール方法だけを使用するようにスクロールバーをデフォルトにできるようにしたいと思います。

javascripthtmlcssmousedom-events
16
Samantha J T Star

驚いたことに、VanillaJavaScriptを使用した優れたシンプルなソリューションはありません。純粋なJSの軽量で最小限のクロスブラウザソリューションを作成しました。 あなた自身のニーズと美学に合わせてください

* 2019年更新
W3Cには、css仕様を通じてこれをすぐに改善するための、標準化された作業文書があります。制限はありますが、最先端のcssを使用する場合は、スクロールバーのスタイルをscrollbar-colorおよびscrollbar-width。詳細については、チェックしてください https://drafts.c​​sswg.org/css-scrollbars/

例：
ここに フィドル と CodePen があります

[〜＃〜] html [〜＃〜]

<body>
    <div id="main" class="scrollable">
        <div class="content-wrapper">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt accusamus maxime voluptatem quasi. Recusandae optio nobis ratione iste consectetur consequatur cupiditate saepe laborum natus neque a provident eum explicabo delectus qui accusantium nostrum reiciendis soluta hic ut at sed laboriosam possimus repudiandae deserunt velit rerum. Aliquam ratione itaque corrupti aperiam quisquam unde aspernatur odio id repellendus corporis eaque expedita in ab minus possimus! Quo tempore consequatur repellat consectetur nemo molestiae perferendis ipsum esse nesciunt blanditiis nobis dicta? Laudantium quaerat inventore deleniti exercitationem explicabo quos pariatur sunt earum labore sed eius blanditiis architecto consequuntur ad consectetur unde sapiente nisi. Sunt eos.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt accusamus maxime voluptatem quasi. Recusandae optio nobis ratione iste consectetur consequatur cupiditate saepe laborum natus neque a provident eum explicabo delectus qui accusantium nostrum reiciendis soluta hic ut at sed laboriosam possimus repudiandae deserunt velit rerum. Aliquam ratione itaque corrupti aperiam quisquam unde aspernatur odio id repellendus corporis eaque expedita in ab minus possimus! Quo tempore consequatur repellat consectetur nemo molestiae perferendis ipsum esse nesciunt blanditiis nobis dicta? Laudantium quaerat inventore deleniti exercitationem explicabo quos pariatur sunt earum labore sed eius blanditiis architecto consequuntur ad consectetur unde sapiente nisi. Sunt eos.</p>
            </div>
        </div>
    </div>
    <div>Not special and not contained within scrolling</div>
</body>

[〜＃〜] css [〜＃〜]

.scrollable {
    padding: 0% 10%;
    position: relative;
    border: 1px solid gray;
    overflow: hidden;
    height: 400px;
}

.scrollable.showScroll::after {
    position: absolute;
    content: '';
    top: 5%;
    right: 7px;
    height: 90%;
    width: 3px;
    background: rgba(224, 224, 255, .3);
}

.scrollable .content-wrapper {
    width: 100%;
    height: 100%;
    padding-right: 50%;
    overflow-y: scroll;
}
.scroller {
    z-index: 5;
    cursor: pointer;
    position: absolute;
    width: 10px;
    border-radius: 5px;
    background: rgb(111, 111, 190);
    top: 0px;
    right: 3px;
    -webkit-transition: top .08s;
    -moz-transition: top .08s;
    -ms-transition: top .08s;
    -o-transition: top .08s;
    transition: top .08s;
}
.content {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

[〜＃〜] js [〜＃〜]

(function () {

var scrollContainer = document.querySelector('.scrollable'),
    scrollContentWrapper = document.querySelector('.scrollable .content-wrapper'),
    scrollContent = document.querySelector('.scrollable .content'),
    contentPosition = 0,
    scrollerBeingDragged = false,
    scroller,
    topPosition,
    scrollerHeight;

function calculateScrollerHeight() {
    // *Calculation of how tall scroller should be
    var visibleRatio = scrollContainer.offsetHeight / scrollContentWrapper.scrollHeight;
    return visibleRatio * scrollContainer.offsetHeight;
}

function moveScroller(evt) {
    // Move Scroll bar to top offset
    var scrollPercentage = evt.target.scrollTop / scrollContentWrapper.scrollHeight;
    topPosition = scrollPercentage * (scrollContainer.offsetHeight - 5); // 5px arbitrary offset so scroll bar doesn't move too far beyond content wrapper bounding box
    scroller.style.top = topPosition + 'px';
}

function startDrag(evt) {
    normalizedPosition = evt.pageY;
    contentPosition = scrollContentWrapper.scrollTop;
    scrollerBeingDragged = true;
}

function stopDrag(evt) {
    scrollerBeingDragged = false;
}

function scrollBarScroll(evt) {
    if (scrollerBeingDragged === true) {
        var mouseDifferential = evt.pageY - normalizedPosition;
        var scrollEquivalent = mouseDifferential * (scrollContentWrapper.scrollHeight / scrollContainer.offsetHeight);
        scrollContentWrapper.scrollTop = contentPosition + scrollEquivalent;
    }
}

function createScroller() {
    // *Creates scroller element and appends to '.scrollable' div
    // create scroller element
    scroller = document.createElement("div");
    scroller.className = 'scroller';

    // determine how big scroller should be based on content
    scrollerHeight = calculateScrollerHeight();

    if (scrollerHeight / scrollContainer.offsetHeight < 1){
        // *If there is a need to have scroll bar based on content size
        scroller.style.height = scrollerHeight + 'px';

        // append scroller to scrollContainer div
        scrollContainer.appendChild(scroller);

        // show scroll path divot
        scrollContainer.className += ' showScroll';

        // attach related draggable listeners
        scroller.addEventListener('mousedown', startDrag);
        window.addEventListener('mouseup', stopDrag);
        window.addEventListener('mousemove', scrollBarScroll)
    }

}

createScroller();


// *** Listeners ***
scrollContentWrapper.addEventListener('scroll', moveScroller);
}());

コンセプトはシンプルです。 'scrollable'クラスのメインdivがあります。 JavaScriptはこの要素を認識し、CSSで自分でスタイルを設定できるスクローラーdivを追加します。 content-wrapperの子divをネストすることで、パディングを制御しながら、ネイティブスクローラーを親divの外側に効果的にプッシュできます。

これが図です： Scroll Diagram

ネイティブのスクロール機能を維持する必要がある理由は、JavaScriptのスクロールイベントは、オーバーフローがスクロールに設定されている要素でのみ発生するためです。 スクロールのMDNリファレンス を参照してください。 JSが無効になっている場合でも、スクロールバーなしでスクロールに正常にフォールバックできるという利点があります。

[〜＃〜]注[〜＃〜]
場合によっては、スクローラーのサイズを再計算するためにバージョンを調整する必要があることに注意してください。
1。）画面のサイズが変更された場所または
2。）さらにコンテンツが追加された場合。

次に、複数の「スクロール可能な」要素がある場合は、変更を加える必要があります。この場合、これらの要素をループして、スクローラーdivを追加し、スクロールイベントをリッスンする必要があります。

24
AdamSchuld

私はこの質問に対する答えがすでにあることを知っていますが、OPが最新のブラウザで動作する単純なVanilla javascriptソリューションを望んでいるとすぐに-そしておそらくもっと多くの人々がそれを必要とするだろうと思うので、私はこれに答えるのが遅れますここで質問します。 純粋なVanilla JSで非常にシンプルで軽量なライブラリ （ [〜＃〜] demo [〜＃〜] ）を開発したので、たった1KBです。 gzippingとminificationの後。

ネイティブスクロールを使用するため、最新のすべてのブラウザー（Firefox、Chrome、Opera、Safari、Edge）、およびIE10とIE11で動作します。 classListポリフィルを含めることで、IE9でも使用できます。

すべてのAndroid、iOS、およびWindowsPhoneブラウザーもサポートされています。

ここでより詳細な回答を参照してください： カスタムスクロールバー

または、 SimpleScrollbarのGithub README page ）のチュートリアル全体をお読みください。

3
Buzinas

素晴らしい baron.jsライブラリ があります。 jQueryを使用する場合も使用しない場合もあります。考え方は、@ AdamSchuldが彼の回答で説明しているものとまったく同じです。

その利点：

  • ネイティブシステムのスクロールメカニズムに代わるものではありません（スクロールバーをカスタマイズして表示したいが、元のプラットフォームまたはデバイスの動作を保存したい場合は重要です）。

  • CSSを完全にサポートするカスタマイズ可能なスクロールバーデザイン。

  • JQueryへの強い依存関係はありません。

  • プラグインシステム（修正可能なヘッダー、スティッキーフッター、自動テストなど）

  • 隠しブロックで開始できます

これが その簡単なデモ です。

2
Glen Swift