スクロールバーを上下左右どこでも出せるJqueryプラグイン |Blog|スターフィールド株式会社


#scrollbar1
{
    width: 440px;
    height: 298px;
    padding: 20px;
    border: solid 1px #cccccc;
    margin-bottom: 20px;
}

#scrollbar1 .viewport
{
    width: 400px;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#scrollbar1 .overview
{
    position: absolute;
}
#scrollbar1 .scrollbar
{
    border: solid 1px #cccccc;
    position: relative;
    float: right; /*ここで位置指定*/
    width: 20px;
}
#scrollbar1 .thumb
{
    background-color: #ffd200;
    background: -moz-linear-gradient(top, #ffd200, #ffb400);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffd200), to(#ffb400)); /*ここを調整すればツマミのデザインを変更できるよ*/
    width: 20px;
    margin-bottom: 10px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

#scrollbar1

{

width: 440px;

height: 298px;

padding: 20px;

border: solid 1px #cccccc;

margin-bottom: 20px;

}

#scrollbar1 .viewport

{

width: 400px;

height: 100%;

overflow: hidden;

position: relative;

}

#scrollbar1 .overview

{

position: absolute;

}

#scrollbar1 .scrollbar

{

border: solid 1px #cccccc;

position: relative;

float: right; /*ここで位置指定*/

width: 20px;

}

#scrollbar1 .thumb

{

background-color: #ffd200;

background: -moz-linear-gradient(top, #ffd200, #ffb400);

background: -webkit-gradient(linear, left top, left bottom, from(#ffd200), to(#ffb400)); /*ここを調整すればツマミのデザインを変更できるよ*/

width: 20px;

margin-bottom: 10px;

cursor: pointer;

overflow: hidden;

position: absolute;

}


<div id="scrollbar1">
    <div class="scrollbar"><div class="thumb"></div></div>
    <div class="viewport">
         <div class="overview">
            <p>月日は百代の過客にして行かふ年も又旅人也。舟の上に生涯をうかべ、馬の口とらえて老をむかふる物は日〃旅にして旅を栖とす。古人も多く旅に死せるあり。予もいづれの年よりか片雲の風にさそはれて、漂白の思ひやまず、海濱にさすらへ、去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、春立る霞の空に白川の関こえんと、そゞろ神の物につきて心をくるはせ、道祖神のまねきにあひて、取もの手につかず。もゝ引の破をつゞり、笠の緒付かえて、三里に灸すゆるより、松嶋の月先心にかゝりて、住る方は人に譲り、杉風が別墅に移るに、草の戸も住替る代ぞひなの家</p>
            <p>弥生も末の七日、明ぼのゝ空朧〃として、月は在明にて光おさまれる物から不二の峯幽にみえて、上野谷中の花の梢又いつかはと心ぼそし。むつまじきかぎりは宵よりつどひて舟に乗て送る。千じゆと云所にて船をあがれば、前途三千里のおもひ胸にふさがりて幻のちまたに離別の泪をそゝく。行春や鳥啼魚の目は泪</p>
            <p>ことし元禄二とせにや、奥羽長途の行脚、只かりそめに思ひたちて呉天に白髪の恨を重ぬといへ共耳にふれていまだめに見ぬさかひ若生て帰らばと定なき頼の末をかけ、其日漸早加と云宿にたどり着にけり。痩骨の肩にかゝれる物先くるしむ。只身すがらにと出立侍を、帋子一衣は夜の防ぎ、ゆかた雨具墨筆のたぐひ、あるはさりがたき餞などしたるはさすがに打捨がたくて、路次の煩となれるこそわりなけれ。</p>
         </div>
     </div>
</div>

1

2

3

4

5

6

7

8

9

10

<p>月日は百代の過客にして行かふ年も又旅人也。舟の上に生涯をうかべ、馬の口とらえて老をむかふる物は日〃旅にして旅を栖とす。古人も多く旅に死せるあり。予もいづれの年よりか片雲の風にさそはれて、漂白の思ひやまず、海濱にさすらへ、去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、春立る霞の空に白川の関こえんと、そゞろ神の物につきて心をくるはせ、道祖神のまねきにあひて、取もの手につかず。もゝ引の破をつゞり、笠の緒付かえて、三里に灸すゆるより、松嶋の月先心にかゝりて、住る方は人に譲り、杉風が別墅に移るに、草の戸も住替る代ぞひなの家</p>

<p>弥生も末の七日、明ぼのゝ空朧〃として、月は在明にて光おさまれる物から不二の峯幽にみえて、上野谷中の花の梢又いつかはと心ぼそし。むつまじきかぎりは宵よりつどひて舟に乗て送る。千じゆと云所にて船をあがれば、前途三千里のおもひ胸にふさがりて幻のちまたに離別の泪をそゝく。行春や鳥啼魚の目は泪</p>

<p>ことし元禄二とせにや、奥羽長途の行脚、只かりそめに思ひたちて呉天に白髪の恨を重ぬといへ共耳にふれていまだめに見ぬさかひ若生て帰らばと定なき頼の末をかけ、其日漸早加と云宿にたどり着にけり。痩骨の肩にかゝれる物先くるしむ。只身すがらにと出立侍を、帋子一衣は夜の防ぎ、ゆかた雨具墨筆のたぐひ、あるはさりがたき餞などしたるはさすがに打捨がたくて、路次の煩となれるこそわりなけれ。</p>

</div>


$( '#scrollbar1' ).tinyscrollbar( { axis: 'y'} );

1	$( '#scrollbar1' ).tinyscrollbar( { axis: 'y'} );


#scrollbar2
{
    width: 440px;
    height: 298px;
    padding: 20px;
    border: solid 1px #cccccc;
    margin-bottom: 20px;
}
#scrollbar2 .viewport
{
    width: 440px;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#scrollbar2 .overview
{
    width: 800px;
    position: absolute;
}
#scrollbar2 .scrollbar
{
    border: solid 1px #cccccc;
    position: relative;
    width: 100%;
    height: 20px;
}
#scrollbar2 .thumb
{
    background-color: #ffd200;
    background: -moz-linear-gradient(top, #ffd200, #ffb400);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffd200), to(#ffb400));
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

#scrollbar2

{

width: 440px;

height: 298px;

padding: 20px;

border: solid 1px #cccccc;

margin-bottom: 20px;

}

#scrollbar2 .viewport

{

width: 440px;

height: 100%;

overflow: hidden;

position: relative;

}

#scrollbar2 .overview

{

width: 800px;

position: absolute;

}

#scrollbar2 .scrollbar

{

border: solid 1px #cccccc;

position: relative;

width: 100%;

height: 20px;

}

#scrollbar2 .thumb

{

background-color: #ffd200;

background: -moz-linear-gradient(top, #ffd200, #ffb400);

background: -webkit-gradient(linear, left top, left bottom, from(#ffd200), to(#ffb400));

width: 20px;

height: 20px;

margin-bottom: 10px;

cursor: pointer;

overflow: hidden;

position: absolute;

}


<h2>上！</h2>
<div id="scrollbar2">
    <div class="scrollbar"><div class="thumb"></div></div>
    <div class="viewport">
         <div class="overview">
            <p>月日は百代の過客にして行かふ年も又旅人也。舟の上に生涯をうかべ、馬の口とらえて老をむかふる物は日〃旅にして旅を栖とす。古人も多く旅に死せるあり。予もいづれの年よりか片雲の風にさそはれて、漂白の思ひやまず、海濱にさすらへ、去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、春立る霞の空に白川の関こえんと、そゞろ神の物につきて心をくるはせ、道祖神のまねきにあひて、取もの手につかず。もゝ引の破をつゞり、笠の緒付かえて、三里に灸すゆるより、松嶋の月先心にかゝりて、住る方は人に譲り、杉風が別墅に移るに、草の戸も住替る代ぞひなの家</p>
            <p>弥生も末の七日、明ぼのゝ空朧〃として、月は在明にて光おさまれる物から不二の峯幽にみえて、上野谷中の花の梢又いつかはと心ぼそし。むつまじきかぎりは宵よりつどひて舟に乗て送る。千じゆと云所にて船をあがれば、前途三千里のおもひ胸にふさがりて幻のちまたに離別の泪をそゝく。行春や鳥啼魚の目は泪</p>
            <p>ことし元禄二とせにや、奥羽長途の行脚、只かりそめに思ひたちて呉天に白髪の恨を重ぬといへ共耳にふれていまだめに見ぬさかひ若生て帰らばと定なき頼の末をかけ、其日漸早加と云宿にたどり着にけり。痩骨の肩にかゝれる物先くるしむ。只身すがらにと出立侍を、帋子一衣は夜の防ぎ、ゆかた雨具墨筆のたぐひ、あるはさりがたき餞などしたるはさすがに打捨がたくて、路次の煩となれるこそわりなけれ。</p>
         </div>
     </div>
</div>

1

2

3

4

5

6

7

8

9

10

11

<p>月日は百代の過客にして行かふ年も又旅人也。舟の上に生涯をうかべ、馬の口とらえて老をむかふる物は日〃旅にして旅を栖とす。古人も多く旅に死せるあり。予もいづれの年よりか片雲の風にさそはれて、漂白の思ひやまず、海濱にさすらへ、去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、春立る霞の空に白川の関こえんと、そゞろ神の物につきて心をくるはせ、道祖神のまねきにあひて、取もの手につかず。もゝ引の破をつゞり、笠の緒付かえて、三里に灸すゆるより、松嶋の月先心にかゝりて、住る方は人に譲り、杉風が別墅に移るに、草の戸も住替る代ぞひなの家</p>

<p>弥生も末の七日、明ぼのゝ空朧〃として、月は在明にて光おさまれる物から不二の峯幽にみえて、上野谷中の花の梢又いつかはと心ぼそし。むつまじきかぎりは宵よりつどひて舟に乗て送る。千じゆと云所にて船をあがれば、前途三千里のおもひ胸にふさがりて幻のちまたに離別の泪をそゝく。行春や鳥啼魚の目は泪</p>

<p>ことし元禄二とせにや、奥羽長途の行脚、只かりそめに思ひたちて呉天に白髪の恨を重ぬといへ共耳にふれていまだめに見ぬさかひ若生て帰らばと定なき頼の末をかけ、其日漸早加と云宿にたどり着にけり。痩骨の肩にかゝれる物先くるしむ。只身すがらにと出立侍を、帋子一衣は夜の防ぎ、ゆかた雨具墨筆のたぐひ、あるはさりがたき餞などしたるはさすがに打捨がたくて、路次の煩となれるこそわりなけれ。</p>

</div>


$( '#scrollbar2' ).tinyscrollbar( { axis: 'x'} );

1	$( '#scrollbar2' ).tinyscrollbar( { axis: 'x'} );


#scrollbar3
{
    width: 440px;
    height: 298px;
    padding: 20px;
    border: solid 1px #cccccc;
    margin-bottom: 20px;
}
#scrollbar3 .viewport
{
    width: 400px;
    height: 100%;
    overflow: hidden;
    position: relative;
    float: right;
}
#scrollbar3 .overview
{
    position: absolute;
}
#scrollbar3 .scrollbar
{
    border: solid 1px #cccccc;
    position: relative;
    float: left; /*ここで位置指定*/
    width: 20px;
}
#scrollbar3 .thumb
{
    background-color: #ffd200;
    background: -moz-linear-gradient(top, #ffd200, #ffb400);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffd200), to(#ffb400));
    width: 20px;
    margin-bottom: 10px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

#scrollbar3

{

width: 440px;

height: 298px;

padding: 20px;

border: solid 1px #cccccc;

margin-bottom: 20px;

}

#scrollbar3 .viewport

{

width: 400px;

height: 100%;

overflow: hidden;

position: relative;

float: right;

}

#scrollbar3 .overview

{

position: absolute;

}

#scrollbar3 .scrollbar

{

border: solid 1px #cccccc;

position: relative;

float: left; /*ここで位置指定*/

width: 20px;

}

#scrollbar3 .thumb

{

background-color: #ffd200;

background: -moz-linear-gradient(top, #ffd200, #ffb400);

background: -webkit-gradient(linear, left top, left bottom, from(#ffd200), to(#ffb400));

width: 20px;

margin-bottom: 10px;

cursor: pointer;

overflow: hidden;

position: absolute;

}


<div id="scrollbar3">
    <div class="scrollbar"><div class="thumb"></div></div>
    <div class="viewport">
         <div class="overview">
            <p>月日は百代の過客にして行かふ年も又旅人也。舟の上に生涯をうかべ、馬の口とらえて老をむかふる物は日〃旅にして旅を栖とす。古人も多く旅に死せるあり。予もいづれの年よりか片雲の風にさそはれて、漂白の思ひやまず、海濱にさすらへ、去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、春立る霞の空に白川の関こえんと、そゞろ神の物につきて心をくるはせ、道祖神のまねきにあひて、取もの手につかず。もゝ引の破をつゞり、笠の緒付かえて、三里に灸すゆるより、松嶋の月先心にかゝりて、住る方は人に譲り、杉風が別墅に移るに、草の戸も住替る代ぞひなの家</p>
            <p>弥生も末の七日、明ぼのゝ空朧〃として、月は在明にて光おさまれる物から不二の峯幽にみえて、上野谷中の花の梢又いつかはと心ぼそし。むつまじきかぎりは宵よりつどひて舟に乗て送る。千じゆと云所にて船をあがれば、前途三千里のおもひ胸にふさがりて幻のちまたに離別の泪をそゝく。行春や鳥啼魚の目は泪</p>
            <p>ことし元禄二とせにや、奥羽長途の行脚、只かりそめに思ひたちて呉天に白髪の恨を重ぬといへ共耳にふれていまだめに見ぬさかひ若生て帰らばと定なき頼の末をかけ、其日漸早加と云宿にたどり着にけり。痩骨の肩にかゝれる物先くるしむ。只身すがらにと出立侍を、帋子一衣は夜の防ぎ、ゆかた雨具墨筆のたぐひ、あるはさりがたき餞などしたるはさすがに打捨がたくて、路次の煩となれるこそわりなけれ。</p>
         </div>
     </div>
</div>

1

2

3

4

5

6

7

8

9

10

<p>月日は百代の過客にして行かふ年も又旅人也。舟の上に生涯をうかべ、馬の口とらえて老をむかふる物は日〃旅にして旅を栖とす。古人も多く旅に死せるあり。予もいづれの年よりか片雲の風にさそはれて、漂白の思ひやまず、海濱にさすらへ、去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、春立る霞の空に白川の関こえんと、そゞろ神の物につきて心をくるはせ、道祖神のまねきにあひて、取もの手につかず。もゝ引の破をつゞり、笠の緒付かえて、三里に灸すゆるより、松嶋の月先心にかゝりて、住る方は人に譲り、杉風が別墅に移るに、草の戸も住替る代ぞひなの家</p>

<p>弥生も末の七日、明ぼのゝ空朧〃として、月は在明にて光おさまれる物から不二の峯幽にみえて、上野谷中の花の梢又いつかはと心ぼそし。むつまじきかぎりは宵よりつどひて舟に乗て送る。千じゆと云所にて船をあがれば、前途三千里のおもひ胸にふさがりて幻のちまたに離別の泪をそゝく。行春や鳥啼魚の目は泪</p>

<p>ことし元禄二とせにや、奥羽長途の行脚、只かりそめに思ひたちて呉天に白髪の恨を重ぬといへ共耳にふれていまだめに見ぬさかひ若生て帰らばと定なき頼の末をかけ、其日漸早加と云宿にたどり着にけり。痩骨の肩にかゝれる物先くるしむ。只身すがらにと出立侍を、帋子一衣は夜の防ぎ、ゆかた雨具墨筆のたぐひ、あるはさりがたき餞などしたるはさすがに打捨がたくて、路次の煩となれるこそわりなけれ。</p>

</div>


$( '#scrollbar3' ).tinyscrollbar( { axis: 'y'} );

1	$( '#scrollbar3' ).tinyscrollbar( { axis: 'y'} );


#scrollbar4
{
    width: 440px;
    height: 298px;
    padding: 20px;
    border: solid 1px #cccccc;
    margin-bottom: 20px;
}
#scrollbar4 .viewport
{
    width: 400px;
    height: 280px;
    overflow: hidden;
    position: relative;
}
#scrollbar4 .overview
{
    width: 800px;
    position: absolute;
}
#scrollbar4 .scrollbar
{
    border: solid 1px #cccccc;
    position: relative;
    width: 100%;
    height: 20px;
}
#scrollbar4 .thumb
{
    background-color: #ffd200;
    background: -moz-linear-gradient(top, #ffd200, #ffb400);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffd200), to(#ffb400));
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

#scrollbar4

{

width: 440px;

height: 298px;

padding: 20px;

border: solid 1px #cccccc;

margin-bottom: 20px;

}

#scrollbar4 .viewport

{

width: 400px;

height: 280px;

overflow: hidden;

position: relative;

}

#scrollbar4 .overview

{

width: 800px;

position: absolute;

}

#scrollbar4 .scrollbar

{

border: solid 1px #cccccc;

position: relative;

width: 100%;

height: 20px;

}

#scrollbar4 .thumb

{

background-color: #ffd200;

background: -moz-linear-gradient(top, #ffd200, #ffb400);

background: -webkit-gradient(linear, left top, left bottom, from(#ffd200), to(#ffb400));

width: 20px;

height: 20px;

margin-bottom: 10px;

cursor: pointer;

overflow: hidden;

position: absolute;

}


<div id="scrollbar4">
    <div class="viewport">
         <div class="overview">
            <p>月日は百代の過客にして行かふ年も又旅人也。舟の上に生涯をうかべ、馬の口とらえて老をむかふる物は日〃旅にして旅を栖とす。古人も多く旅に死せるあり。予もいづれの年よりか片雲の風にさそはれて、漂白の思ひやまず、海濱にさすらへ、去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、春立る霞の空に白川の関こえんと、そゞろ神の物につきて心をくるはせ、道祖神のまねきにあひて、取もの手につかず。もゝ引の破をつゞり、笠の緒付かえて、三里に灸すゆるより、松嶋の月先心にかゝりて、住る方は人に譲り、杉風が別墅に移るに、草の戸も住替る代ぞひなの家</p>
            <p>弥生も末の七日、明ぼのゝ空朧〃として、月は在明にて光おさまれる物から不二の峯幽にみえて、上野谷中の花の梢又いつかはと心ぼそし。むつまじきかぎりは宵よりつどひて舟に乗て送る。千じゆと云所にて船をあがれば、前途三千里のおもひ胸にふさがりて幻のちまたに離別の泪をそゝく。行春や鳥啼魚の目は泪</p>
            <p>ことし元禄二とせにや、奥羽長途の行脚、只かりそめに思ひたちて呉天に白髪の恨を重ぬといへ共耳にふれていまだめに見ぬさかひ若生て帰らばと定なき頼の末をかけ、其日漸早加と云宿にたどり着にけり。痩骨の肩にかゝれる物先くるしむ。只身すがらにと出立侍を、帋子一衣は夜の防ぎ、ゆかた雨具墨筆のたぐひ、あるはさりがたき餞などしたるはさすがに打捨がたくて、路次の煩となれるこそわりなけれ。</p>
         </div>
     </div>
    <div class="scrollbar"><div class="thumb"></div></div>
</div>

1

2

3

4

5

6

7

8

9

10

<p>月日は百代の過客にして行かふ年も又旅人也。舟の上に生涯をうかべ、馬の口とらえて老をむかふる物は日〃旅にして旅を栖とす。古人も多く旅に死せるあり。予もいづれの年よりか片雲の風にさそはれて、漂白の思ひやまず、海濱にさすらへ、去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、春立る霞の空に白川の関こえんと、そゞろ神の物につきて心をくるはせ、道祖神のまねきにあひて、取もの手につかず。もゝ引の破をつゞり、笠の緒付かえて、三里に灸すゆるより、松嶋の月先心にかゝりて、住る方は人に譲り、杉風が別墅に移るに、草の戸も住替る代ぞひなの家</p>

<p>弥生も末の七日、明ぼのゝ空朧〃として、月は在明にて光おさまれる物から不二の峯幽にみえて、上野谷中の花の梢又いつかはと心ぼそし。むつまじきかぎりは宵よりつどひて舟に乗て送る。千じゆと云所にて船をあがれば、前途三千里のおもひ胸にふさがりて幻のちまたに離別の泪をそゝく。行春や鳥啼魚の目は泪</p>

<p>ことし元禄二とせにや、奥羽長途の行脚、只かりそめに思ひたちて呉天に白髪の恨を重ぬといへ共耳にふれていまだめに見ぬさかひ若生て帰らばと定なき頼の末をかけ、其日漸早加と云宿にたどり着にけり。痩骨の肩にかゝれる物先くるしむ。只身すがらにと出立侍を、帋子一衣は夜の防ぎ、ゆかた雨具墨筆のたぐひ、あるはさりがたき餞などしたるはさすがに打捨がたくて、路次の煩となれるこそわりなけれ。</p>

</div>

</div>


$( '#scrollbar4' ).tinyscrollbar( { axis: 'x'} );

1	$( '#scrollbar4' ).tinyscrollbar( { axis: 'x'} );


#scrollbar5
{
    width: 440px;
    height: 298px;
    padding: 20px;
    border: solid 1px #cccccc;
    margin-bottom: 20px;
}
#scrollbar5 .viewport
{
    width: 440px;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#scrollbar5 .overview
{
    position: absolute;
}
#scrollbar5 .scrollbar
{
    border: solid 1px #cccccc;
    background-color: #fff;
    filter: alpha(opacity=80);
    -moz-opacity:0.8;
    opacity:0.8;
    position: absolute;
    z-index: 9999;
    left: 230px; /*ここで位置指定*/
    width: 20px;
}
#scrollbar5 .thumb
{
    background-color: #ffd200;
    background: -moz-linear-gradient(top, #ffd200, #ffb400);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffd200), to(#ffb400));
    width: 20px;
    margin-bottom: 10px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

#scrollbar5

{

width: 440px;

height: 298px;

padding: 20px;

border: solid 1px #cccccc;

margin-bottom: 20px;

}

#scrollbar5 .viewport

{

width: 440px;

height: 100%;

overflow: hidden;

position: relative;

}

#scrollbar5 .overview

{

position: absolute;

}

#scrollbar5 .scrollbar

{

border: solid 1px #cccccc;

background-color: #fff;

filter: alpha(opacity=80);

-moz-opacity:0.8;

opacity:0.8;

position: absolute;

z-index: 9999;

left: 230px; /*ここで位置指定*/

width: 20px;

}

#scrollbar5 .thumb

{

background-color: #ffd200;

background: -moz-linear-gradient(top, #ffd200, #ffb400);

background: -webkit-gradient(linear, left top, left bottom, from(#ffd200), to(#ffb400));

width: 20px;

margin-bottom: 10px;

cursor: pointer;

overflow: hidden;

position: absolute;

}


<div id="scrollbar5">
    <div class="scrollbar"><div class="thumb"></div></div>
    <div class="viewport">
         <div class="overview">
            <p>月日は百代の過客にして行かふ年も又旅人也。舟の上に生涯をうかべ、馬の口とらえて老をむかふる物は日〃旅にして旅を栖とす。古人も多く旅に死せるあり。予もいづれの年よりか片雲の風にさそはれて、漂白の思ひやまず、海濱にさすらへ、去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、春立る霞の空に白川の関こえんと、そゞろ神の物につきて心をくるはせ、道祖神のまねきにあひて、取もの手につかず。もゝ引の破をつゞり、笠の緒付かえて、三里に灸すゆるより、松嶋の月先心にかゝりて、住る方は人に譲り、杉風が別墅に移るに、草の戸も住替る代ぞひなの家</p>
            <p>弥生も末の七日、明ぼのゝ空朧〃として、月は在明にて光おさまれる物から不二の峯幽にみえて、上野谷中の花の梢又いつかはと心ぼそし。むつまじきかぎりは宵よりつどひて舟に乗て送る。千じゆと云所にて船をあがれば、前途三千里のおもひ胸にふさがりて幻のちまたに離別の泪をそゝく。行春や鳥啼魚の目は泪</p>
            <p>ことし元禄二とせにや、奥羽長途の行脚、只かりそめに思ひたちて呉天に白髪の恨を重ぬといへ共耳にふれていまだめに見ぬさかひ若生て帰らばと定なき頼の末をかけ、其日漸早加と云宿にたどり着にけり。痩骨の肩にかゝれる物先くるしむ。只身すがらにと出立侍を、帋子一衣は夜の防ぎ、ゆかた雨具墨筆のたぐひ、あるはさりがたき餞などしたるはさすがに打捨がたくて、路次の煩となれるこそわりなけれ。</p>
         </div>
     </div>
</div>

1

2

3

4

5

6

7

8

9

10

<p>月日は百代の過客にして行かふ年も又旅人也。舟の上に生涯をうかべ、馬の口とらえて老をむかふる物は日〃旅にして旅を栖とす。古人も多く旅に死せるあり。予もいづれの年よりか片雲の風にさそはれて、漂白の思ひやまず、海濱にさすらへ、去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、春立る霞の空に白川の関こえんと、そゞろ神の物につきて心をくるはせ、道祖神のまねきにあひて、取もの手につかず。もゝ引の破をつゞり、笠の緒付かえて、三里に灸すゆるより、松嶋の月先心にかゝりて、住る方は人に譲り、杉風が別墅に移るに、草の戸も住替る代ぞひなの家</p>

<p>弥生も末の七日、明ぼのゝ空朧〃として、月は在明にて光おさまれる物から不二の峯幽にみえて、上野谷中の花の梢又いつかはと心ぼそし。むつまじきかぎりは宵よりつどひて舟に乗て送る。千じゆと云所にて船をあがれば、前途三千里のおもひ胸にふさがりて幻のちまたに離別の泪をそゝく。行春や鳥啼魚の目は泪</p>

<p>ことし元禄二とせにや、奥羽長途の行脚、只かりそめに思ひたちて呉天に白髪の恨を重ぬといへ共耳にふれていまだめに見ぬさかひ若生て帰らばと定なき頼の末をかけ、其日漸早加と云宿にたどり着にけり。痩骨の肩にかゝれる物先くるしむ。只身すがらにと出立侍を、帋子一衣は夜の防ぎ、ゆかた雨具墨筆のたぐひ、あるはさりがたき餞などしたるはさすがに打捨がたくて、路次の煩となれるこそわりなけれ。</p>

</div>


$( '#scrollbar5' ).tinyscrollbar( { axis: 'y'} );

1	$( '#scrollbar5' ).tinyscrollbar( { axis: 'y'} );

Company

Our Solutions

Support

News

Blog

カテゴリーから探す

年別から見る

スクロールバーを上下左右どこでも出せるJqueryプラグイン

合わせて読みたい

2024/04/05

2024/03/15

2024/03/01

2024/02/22

2024/05/17

2024/05/02

2024/04/19

2024/04/05

2024/03/15

2024/03/01

2024/02/22

2024/05/17

2024/05/02

2024/04/19

2024/04/05

2024/03/15

2024/03/01

2024/02/22