logo-sm

お電話はこちら 03-6912-0139

ブログ

サイト制作でスクロールバーを左に配置する方法

2022.03.23

今回はスクロールバーを左に配置する方法をご紹介します。

サイトのスクロールバーはデフォルトでは右に配置されます。

デフォルトは以下のようになる。

こちらを左に移動させる方法を今回は解説いたします。

スクロールバーの出し方

そもそもサイト内にスクロールバーってどう出すの?というところですが、

overflow: scroll;

というCSSを振ると出現します。

縦方向のみscrollバーを出したいのであれば

overflow-y: scroll;

横方向のみscrollバーを出したいのであれば

overflow-x: scroll;

とすることでスクロールバーを出現させることができます。

スクロールバーを左に移動する方法

スクロールバーを左に移動するには

direction: rtl;

というCSSを入れ込めば可能です。

これは言語の記述方向を指定するCSSです。

右書きの言語(ヘブライ語やアラビア語など)などで使われるCSSのようですが、これを入れ込むことによりスクロールバーを左側に移動させることが可能です。

ただ問題が発生します。

以下のように右寄せになります。

text-align: left;(文字を左揃えにするCSS)

というCSSを追加で入れても問題が。

 

句読点の「。」が変な位置についてしまいます。

direction: rtl;を使用した一つ中のHTML要素でdirection: ltr;を振ってあげる

解決方法としてはdirection: ltr;(左書きの言語という指定)をdirection: rtl;を振った内側のHTMLに振ってあげるという方法がありました。以下が成功したスクロールバーです。

参考までに簡単に作成したHTML,CSSをご紹介します。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スクロールバーを逆配置する方法</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
        <div class="wrap">
        <div class="scroll_bar"><!-- スクロールバー -->
            <div><!-- 一つ中の要素 -->
                <p>この文章はダミーです。</p>
                <p>文字の大きさ、量、字間、行間等を確認するために入れています。</p>
                <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
                この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文
                </p>
            </div>
        </div>
        </div>
</body>
</html>

CSS

.wrap {
    width: 500px;
    margin: 0 auto;
}
/* スクロールバーを左側に配置する */
.scroll_bar {
    height: 300px;
    overflow-y: scroll;
    direction: rtl;
}

/* 内側の要素で左書きの言語に戻す */
.scroll_bar > div {
    direction: ltr;
}

/*バーの太さ*/
.scroll_bar::-webkit-scrollbar {
    width: 10px;
}

/*バーの背景色*/
.scroll_bar::-webkit-scrollbar-track {
    background: #e0e0e0;
}

/*バーの色*/
.scroll_bar::-webkit-scrollbar-thumb {
    background: #b9baba;
}

スクロールバーを左に移動するだけなのに意外と厄介だったのでこちら、ぜひ参考にしてみてください。

ちなみに、デフォルトのサイトのスクロールバーはあまりカスタマイズ性はよくありません。

もっと細かくデザインなどの指定もしたい場合は

jQueryのプラグイン「custom content scroller」を使うのもありだと思いますので、要件によってはそちらも確認してみてください。

ページは以下。

jQuery custom content scroller

関連記事

  • Cisco資格試験の学習法について
    2022年3月にAWS SAA資格取得の記事を書きました。その後、2022年7月にCCNP ENARSI試験を […]

    2022.09.28

  • jQueryでHTMLをパーツ化した際に読み込み箇所にJavascriptが効かない件の対処法
    jQueryでHTMLをパーツ化するための関数でloadという関数があります。 headerやfooterなど […]

    2022.08.11

  • 【最新版】git hubでサイトを公開する方法
    git hubでサイトが公開できるのでその方法を記述します。 ちょこちょこgit hubをでサイト公開を行う記 […]

    2022.08.11

  • パートナー

  • 人材育成