28

overflow:hidden; を定義できることは知っています。HTMLの本文でスクロールバーを削除しますが、マウスの矢印またはスクロールホイールでスクロールできるようにしたいと思います。

助けてくれてありがとう。

編集: ホバー スクロールバーとカスタム バーに関するすべてのアドバイスに感謝します。また、スクロールバーを削除することによるユーザー エクスペリエンスへの影響について、すべての懸念をお寄せいただきありがとうございます。もう少し詳しく説明しますので、私がどこから来たのかを説明してください。

円形のページがあります (スクロール ホイールまたは矢印ボタンでスクロールすると、一番下に到達するとページの一番上にリセットされ、最初からやり直されます)。終わりのないループ。スクロールバーは、バーが制限されているため、これに影響を与えます。バーが一番下に達して一番上にリセットされると、ユーザーのマウスはまだページの一番下にあります。つまり、移動すると、ページの一番上と一番下の間でちらつきが発生します。

スクロール バーを削除し、ウィンドウの上下にある矢印ボタンに置​​き換える予定です。これが、スクロールバーを完全に削除し、スクロール機能を残したい理由です。

4

3 に答える 3

25

非常に変更できるjscrollpane http://jscrollpane.kelvinluck.com/#examplesという名前の jQuery 用のライブラリがあります。

ただし、バーのみを非表示にする場合は、このスクロールバーを非表示にすることもできます: http://jsfiddle.net/H27BK/

<div id="content">
    <div id="scrollable"> ... ... ... </div>
</div>

CSSで

#content {
    position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
#scrollable {
   height: 150px;   
   width: 218px; /* #content.width + 18px */
   overflow-y: scroll;    
}

これはすべて 18 ピクセルのバー幅に基づいています。

したがって、javascript スクロールバー幅検出スクリプトを実行するか、スクロール可能な div の前に別の div を追加するだけです。

http://jsfiddle.net/uNzEz/

HTML は次のようになりました。

<div id="content">
<div id="scrollable">
<div id="txt"> ... ... ...
</div></div></div>

次のような CSS を使用します。

#content {
    position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
#scrollable {
   height: 150px;   
   width: 240px; /* the bar-width can be theoretical 240px - 200px = 40px */
   overflow-y: scroll;    
}
#txt {
    width: 200px;
}

</p>

于 2012-11-09T23:47:45.983 に答える
1

わかりました、新しい答え。jQuery と組み合わせて、そのためのちょっとしたトリックを開発しました。

div次の css を使用して、本文内にラッパーを作成します。

body { overflow: hidden; }

#wrapper { overflow: auto; }

次に、それぞれの高さを設定します。

$("body").height($(window).height());
$("#wrapper").height($("#text").height());

デモ

サイズ変更をサポートするには

$(window).trigger('scroll');

$(window).scroll(function() {
    $("body").height($(window).height());
    $("#wrapper").height($("#text").height());    
});

デモ

于 2012-11-09T23:11:57.897 に答える
0

jQuery スクロールバー プラグインの 1 つを使用してみると、カスタマイズされた CSS デザインが可能になります...

スクロールバーを非表示にすることを選択するだけで、マウスの機能はそのまま残ります...

私の個人的なお気に入りはmalihuです。マウスホイール拡張機能を必ず使用してください。

編集：

カスタム設計されたスクロールバーがどのように見えるかを確認した後、スクロールバーの表示について考え直すことができます。結局のところ、それらは有用で有益です。

于 2012-11-09T23:25:25.800 に答える