web-dev-qa-db-ja.com

ページのサイズを変更するスクロールバー

静的なWebページがあり、ページ全体が折り返されているとしましょう。たとえば、幅が700pxの場合、ページのコンテンツが長すぎると、（明らかに）スクロールバーが表示されます。ただし、スクロールバーの外観により、すべてが数ピクセル（ページの右側にスクロールバーを合わせるために必要なピクセル）のように左側に移動します。私がやりたいのは、この「移動」効果を削除して、スクロールバーが必要な場合に、ページのコンテンツにまったく影響を与えないようにすることです。

自分をはっきりさせたかどうかはわかりません。

これがウェブページだとしましょう：

| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |

スクロールバーの外観は次のとおりです。

| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ...... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |

しかし、私はこのようなものが欲しいです：

| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |

ドットは空白を表し、コンテンツはWebページのコンテンツを表し、右側の列はスクロールバーを表します。

htmlcsswebscrollbar
15
G4bri3l

あなたはあなたの体のルールとしてoverflow-y: scrollを設定することができます。これにより、コンテンツがスクロールするのに十分な長さでない限り、無効になっている垂直スクロールバーが常に表示されます。このように、コンテンツが実際にスクロールできるほど長く、これを機能させるためにスクリプトが必要ない場合、コンテンツが左にシフトすることはありません。

9
Johannes Lumpe

スクロールバーがまったく必要ない場合は、次のように使用できます。

body {
    overflow-y: hidden;
}

UPD。したがって、コンテンツをスクロールするためにスクロールバーが必要であるが、それを非表示にしたい場合は、 次の方法（小冊子のデモ）を使用できます。 com） ：

css：

body {
    overflow: hidden;
}

#fake_body {
    position: absolute;
    left: 0;
    top: 0;
    right: -32px;
    bottom: 0;
    overflow-y: scroll;
}

html：

<div id="fake_body">
    <ul>
        <li>content content content #01</li>
        <li>content content content #02</li>
        <li>content content content #03</li>
        …
        <li>content content content #55</li>
    </ul>
</div>
4
Vladimir Starkov

私も同じ問題を抱えていましたが、JS/jQueryを使用した解決策だけで十分でした。

私はリンクを使用しました ページに垂直スクロールバーがあるかどうかを検出しますか？ 前に提供され、それらのリンク： http://davidwalsh.name/detect-scrollbar-width 、 http://api.jquery.com/css/#css2 、 位置を中央に配置：固定要素 次のコードを生成します。

css：

body {
    position: absolute;
    left: 50%;
    margin-left: -400px;
    width: 800px;
    height: 100%;
}

.scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

JS：

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($(document).height() > $(window).height()) {

        // Create the measurement node
        var scrollDiv = document.createElement("div");
        scrollDiv.className = "scrollbar-measure";
        document.body.appendChild(scrollDiv);
        // Get the scroll bar width
        var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
        // Delete the DIV
        document.body.removeChild(scrollDiv);

        // Change margin-left parameter for #container for preventing shift caused by scroll bar
        var current_margin_left_px = $("#container").offset().left;
        var current_margin_left = parseInt(current_margin_left_px, 10);
        var changed_margin_left = current_margin_left + scrollbarWidth/2 + "px";
        $("#container").css("margin-left", changed_margin_left);
    }
});

柔軟なボディ幅の場合、さらにいくつかのコードを追加する必要があります。

2
Ilya

MDN docs のように、以下はブラウザ間で十分にサポートされていませんが、興味深いと思うかもしれません。

overflow-y: overlay;

Google Chromeなどのプロパティをサポートするブラウザでは、これにより、スクロールバーが必要なときにコンテンツを移動する代わりに、コンテンツの上にスクロールバーが配置されます。次に、十分な量のパディングを追加して、コンテンツがパディングで覆われないようにすることができます。

このプロパティは人気がないようで、現在それをサポートしているブラウザでさえ、このプロパティのサポートを終了する予定です。確かに用途があるので、理由はわかりません。

1
Kyle Zimmer

画面にスクロールバーがあるかどうかを確認できます。コンテンツを右にマージンできるよりも真の場合、このリンクが役立つかもしれません： ページに垂直スクロールバーがあるかどうかを検出しますか？

0
bassem ala