nicescroll.jsのscrollbarの上下に矢印アイコンの画像を付けたい

実現したいことは、windowの右と下のスクロールバーの移動のするバーの右の場合はバーの上下に、下の移動バーには左右に矢印アイコンを設置したいのです。

現在、移動バーのみ表示出来ている状態です。
イメージしているスクロールバーは下記サイトのイメージです。
http://a4a.jp/

<script type="text/javascript">
$(document).ready(
function() {
$("body").niceScroll({
    cursorcolor:"#000",
    cursorwidth:"10",
    cursorborderradius:"0",
    scrollspeed:"60",
    touchbehavior:false,
    cursoropacitymin:"5",
    cursorborder:"border:none;",
    cursorminheight:"1",
    background: "#cecece",
    autohidemode: false,
    grabcursorenabled: true,
    autohidemode: false,

});
}
);
  </script>
<div id="bar_arrow_top"></div>
<div id="bar_arrow_bottom"></div>

よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

nicescroll.jsプラグインの提供している機能では矢印を作れなさそうですね。
自作ですが下記を追加すると矢印が作られます。
さくっと作ったので動作の検証はした方が良いとおもいます。

Javascript
1$("#ascrail2000 > div").append('<div id="arrow-upper"></div><div id="arrow-under"></div>');
2$("#ascrail2000-hr > div").append('<div id="arrow-left"></div><div id="arrow-right"></div>');

CSS
1#arrow-upper,
2#arrow-under,
3#arrow-left,
4#arrow-right{
5	width: 4px;
6	height: 4px;
7	border-top: 1px solid #fff;
8	border-right: 1px solid #fff;
9	position: absolute;
10}
11
12#arrow-upper{
13	-webkit-transform: rotate(-45deg);
14	transform: rotate(-45deg);
15	top:5px;
16	left: 3px;
17}
18
19#arrow-under{
20	-webkit-transform: rotate(135deg);
21	transform: rotate(135deg);
22	bottom:5px;
23	left: 3px;
24}
25
26#arrow-left{
27	-webkit-transform: rotate(-135deg);
28	transform: rotate(-135deg);
29	top: 3px;
30	left: 5px;
31}
32
33#arrow-right{
34	-webkit-transform: rotate(45deg);
35	transform: rotate(45deg);
36	top: 3px;
37	right: 5px;
38}

投稿2016/02/05 07:51

rossi46hiro

総合スコア992

退会済みユーザー

2016/02/05 10:45

上記コードで無事矢印設置されました。縦、横もバッチリでした。 chrome、safariでとりいそぎ検証しましたところ、問題なく動作しておりました。この度は、ご教授いただきましてありがとうございます。 jsの勉強も頑張ります。

行動規範の内容に同意します

紹介しているサイトですと、下記のような設定をしていました。
こちらを参考にして、同様の画像を用意して設定すれば良いと思います。

css
1#bar_arrow_top {
2    position: absolute;
3    top: 0;
4    left: 0;
5    width: 15px;
6    height: 10px;
7    background: url("../images/bar_top.jpg") no-repeat top;
8}
9
10#bar_arrow_bottom {
11    position: absolute;
12    bottom: 0;
13    left: 0;
14    width: 15px;
15    height: 15px;
16    background: aqua;
17    background: url("../images/bar_bottom.jpg") no-repeat bottom;
18}