3

動的ページを作成したことがある場合は、スクロールバーを必要としないページの高さから始めてコンテンツを動的に追加すると、スクロールバーが表示されることに気付くかもしれません。これを行うと、すべてのコンテンツがスクロール バーの幅の左に「プッシュ」され、ページ上のすべてが少しジャンプするように見えます。

スクロールバーを絶対位置のように動作させて、コンテンツをすべて左に押すのではなく、コンテンツの上に置くことは可能ですか? コンテンツがすべて左に「ジャンプ」する方法は好きではありません。それは厄介に見えます。

ありがとう

4

3 に答える 3

2

コンテンツがプッシュされないようにするために使用できoverflow: overlayます。コンテナスペースを使用する代わりに、スクロールバーをコンテンツの上に配置します

    .overlay {
      width: 100px;
      height: 100px;
      overflow: overlay;
    }
    
    .auto {
      width: 100px;
      height: 100px;
      overflow: auto;  
    }

<h2>scrollbar on content</h2>
<div class="overlay">
  <div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>


<h2>scrolbar sharing space with content</h2>
<div class="auto">
  <div >Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>

オーバーフローした div の上に配置されたオーバーレイ css を持つ div ただし、自動オーバーフローを持つ div はデータをプッシュします。これをテキスト付きのコンテナに使用することは理想的な解決策ではありませんが、違いが明確になるようにテキストを選択します

于 2020-11-02T12:20:35.183 に答える
1

できますが、完璧ではありません。この投稿からコードをコピーする:

// Used like $('#my-id').hasScrollbar();

jQuery.fn.hasScrollbar = function() {
var scrollHeight = this.get(0).scrollHeight;

//safari's scrollHeight includes padding
if ($.browser.safari)
    scrollHeight -= parseInt(this.css('padding-top')) + parseInt(this.css('padding-bottom'));

if (this.height() < scrollHeight)
    return true;
else
    return false;
}

スクロール バーが存在するかどうかを照会することができます。ただし、この前に、スクロールバーが表示される前のビューポートの幅であるグローバル変数があります。

var viewportWidth = $(window).width();

上記の関数を実行した後、これviewportWidthをスクロール バーのあるウィンドウの新しいビューポート幅と比較し、差margin-rightのbody負の量を比較できます。

于 2012-07-31T20:17:55.593 に答える
0

あなたが求めることはできません。

ただし、常に表示するように強制することもできます。

#id {
    overflow: scroll;
}

しかし、これはひどく醜いです。

于 2012-07-31T20:13:37.583 に答える