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

Question

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

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

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

スクロールバーでの表示は次のとおりです。

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

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

score 10 · Accepted Answer

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

score 4 · Accepted Answer

スクロールバーがまったく必要ない場合は、これを使用できます。

body {
    overflow-y: hidden;
}

アップデート。したがって、コンテンツをスクロールするためにスクロールバーが必要であり、それを非表示にしたい場合は、次の方法を使用できます (dabblet.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>

score 2 · Accepted Answer

私は同じ問題を抱えていましたが、JS/jQuery を使用した唯一の解決策で十分でした。

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

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);
    }
});

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

score 0 · Accepted Answer

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

score -1 · Accepted Answer

overflow-x: hidden;

本体のCSSコードで、ALOTを助けました！ くそー、単純な答えを求めてサーフィンするのに45分かかりました。

何が悪かったのか？... hover=show image ということが起こっていました。すべての画像のサイズを正しく変更しました。ページを更新したとき、スクロールバーには多くのプレイルームがありました!.....だから、すべての div タグ (個々のリスト項目に割り当てられた各 div タグ) にオーバーフロー x を入れましたが、何も起こりませんでした! 解決策: コードは正しいのですが、body タグ自体に配置する必要がありました。個々の div タグではありません。くそー.....ありがとう

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

6 に答える 6

Related

Reference