6

次のようなカスタム Webkit スクロールバーがあります。

::-webkit-scrollbar{
  background: transparent;
  width: 10px;
}
::-webkit-scrollbar-thumb{
  background: #999 !important;
}

そのため、標準のスクロールバーではなく、灰色のカスタム スクロールバーがレンダリングされます。ただし、ページの右側に貼り付いています。本文にマージン、パディング、または境界線を追加することでこれを変更できることはわかっていますが、フルスクリーン (背景) の画像を使用しています。したがって、これを試すと、すべての画像もこれの影響を受けますが、これは望ましくありません。だから私はスクロールバーを配置しようとしましたが、これは機能しません(要素ではなくユーザーエージェントプロパティであるため...

だから私は（別のプラグインを使用せずに）ツールバーをカスタマイズして横からオフセットする方法を探しています。

または、可能であれば、div でスクロールバーのオフセットを作成できます。

次に、スクロールバーの「トラック」を透明にする方法を探しています。なのでハンドルのみ。

前もって感謝します！

4

3 に答える 3

3

あなたがまだ答えを探しているなら (あるいは私のように他の誰かが探しているなら) - ここにwebkit scrollbars に関する決定的な記事があります。
最初の質問への回答 - すべてのスクロール可能なコンテンツを高さ 100%、幅 90% の div に配置することをお勧めします。右側の左 10% がオフセットになります。そのように：

.superDiv{
  height:100%;
  width:90%;
  position:fixed;
}
body{ overflow: hidden }

2 番目の質問 - あなたが探しているもの

::-webkit-scrollbar-track-piece {
  background:transparent;
}

しかし、Apple の人々はスクロールバーのない Web ブラウジングを推進しているため、CSS によって設定されたプロパティのみが表示されるため、トラック ピースを変更する必要はありません。

于 2014-07-22T20:52:25.593 に答える
3

私が最近見つけた賢い解決策は、スクロールバーを含む画面/ divの右側に境界線を置くことでした:

<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
于 2014-09-02T13:32:04.767 に答える
0

カスタム スクロールバーの位置を制御する簡単な方法は、明確な配置を使用してスクロール要素 (本体?) を設定することです。また、html を overflow:auto; に設定する必要があります。

つまみを透明にするには、RGBa 値を使用して色を宣言します。この場合、0,0,0,0.4 (赤、緑、青、アルファ) を使用しました。RGBa はすべてのブラウザーでサポートされているわけではありません。Chris Coyier は、これをサポートしているユーザーの一覧をここに示しています: http://css-tricks.com/rgba-browser-support/

表示したいのがつまみだけの場合は、スクロールバーの他の要素 ( resizer、scrollbar-button、およびscrollbar-corner ) も非表示にすることを検討してください。

html {
    overflow: auto;
}
body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 5px;
    right: 20px;
    overflow: scroll;
}
::-webkit-scrollbar{
    background: transparent;
    width: 10px;
}
::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }

http://jsfiddle.net/Buttonpresser/G53JQ/で動作するデモをチェックしてください。

于 2014-01-17T23:07:02.183 に答える