web-dev-qa-db-ja.com

スクロールバーに矢印を追加する

スクロールバーのx軸とy軸に矢印を追加しようとしています。これが私のスクロールバーです： http://jsfiddle.net/Nk3NH/ そして私は2つの軸にこの矢印（画像）が必要です： http://i.imgur.com/ygGobeC.png このような矢印を追加するコードを探しています enter image description here 上下ではありません。

htmlcssscrollbararrows
10
user2401856

私はあなたのためにそれで遊んでいます。まず、ボタンを10px x 10pxに設定して簡単にし、左、右、上、下を指す4つの10 x10の矢印を作成しました。次に、正しくスケーリングするために、background-sizeを100％に設定しました。次に、:increment、:decrement、:horizontal、および:verticalセレクターを使用して、各ボタンに正しい画像を設定します。画像は現在私の公開ドロップボックスにありますが、自分で追加することもできます。

更新されたコードは次のとおりです。 http://jsfiddle.net/Nk3NH/2/

私が書いたコードはこれでした：

::-webkit-scrollbar-button {
    background-size: 100%;
    height: 10px;
    width: 10px;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-button:horizontal:increment {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon2.png);
}

::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon4.png);
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon3.png);
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon.png);
}

編集：これらのスタイルを追加することにより、OPが望むようにスクロールボタンを並べて表示することができました：

::-webkit-scrollbar-button:end {
    display: block;
}

::-webkit-scrollbar-button:start {
    display: none;
}

http://jsfiddle.net/Nk3NH/4/

壊れたリンクの代わりにbase64イメージでコードを更新しました：

http://jsfiddle.net/burkybang/1z7vgfpt/

24
charlie-g-cowan

同じことをしたかったのですが、矢印に背景画像を使用する必要はありませんでした。私の解決策は、重複する背景グラデーションを使用することです。

::-webkit-scrollbar-button:vertical:start:decrement {
    background:
        linear-gradient(120deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(240deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(0deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

::-webkit-scrollbar-button:vertical:end:increment {
    background:
        linear-gradient(300deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(60deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(180deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

::-webkit-scrollbar-button:horizontal:end:increment {
    background:
        linear-gradient(210deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(330deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(90deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

::-webkit-scrollbar-button:horizontal:start:decrement {
    background:
        linear-gradient(30deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(150deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(270deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}
2
BevansDesign
::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a6268'><polygon points='0,50 100,50 50,0'/></svg>");
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a6268'><polygon points='0,0 100,0 50,50'/></svg>");
}

http://jsfiddle.net/2aHeE/5227/

2
DanCZ

（パーティーに非常に遅れていますが、それでも）

これはあなたが必要とするものですか： https://jsfiddle.net/7shqb98a/

私がしたのは、display: block;のスタイルに::-webkit-scrollbar-button {}を入れることだけでした。

CSS：

body {
  overflow-x: scroll;    /* To enable horizontal scroll */
}


::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-track {
    background: #4d4d4d;
}
::-webkit-scrollbar-button {
    display: block;    /* This is all I did to add double buttons on each end */
    background: #ccc;
    background-size: cover;   /* Tweak this to fit the image*/
    background-repeat: no-repeat;   
    background-position: center;   /* Tweak this to fit the image */
    border-right: 1px solid black;  /* To make the buttons visible, you don't need this */
    border-left: 1px solid black;   /* To make the buttons visible, you don't need this */
    border-top: 1px solid black;   /* To make the buttons visible, you don't need this */
    border-bottom: 1px solid black;   /* To make the buttons visible, you don't need this */
}
::-webkit-scrollbar-button:vertical:increment {
    background-image: url('');    /* Image of the down arrow */
}
::-webkit-scrollbar-button:vertical:decrement {
    background-image: url('');   /* Image of the up arrow */
}
::-webkit-scrollbar-button:vertical:decrement:hover {
    background-image: url('');   /* Image of the up arrow when hovered */
}
::-webkit-scrollbar-button:vertical:increment:hover {
    background-image: url('')    /* Image of the down arrow when hovered */
}
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url('');     /* Image of the right arrow */
}
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url('');     /* Image of the left arrow */
}
::-webkit-scrollbar-button:horizontal:increment:hover {
  background-image: url('');     /* Image of the right arrow when hovered */
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
  background-image: url('');     /* Image of the left arrow when hovered */
}
::-webkit-scrollbar-thumb {
    background: #8d8d8d;
}
::-webkit-scrollbar-thumb:hover {
    background: #2b2b2b;
}

画像を必要なものに置き換えることができます。ボタンに適切に収まらない場合は、background-sizeおよびbackground-positionプロパティを微調整できます。

0
Aditya Singh