IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

【見本あり】ドラッグスクロール可能なリストを1行で実現する -オプションでエンドレススクロールも可能-【jQueryPlugin】| listmousedragscroll.js

f:id:Surprisedblog:20190916181242j:plain

 

投稿日:2019-09-16

マウスドラッグスクロール(mouse drag scroll)が可能なリストを実現する【listmousedragscroll.js】

スマートフォンのようになぞるようにしてスクロールができる、JavaScriptのライブラリである「jQuery」の【jQueryPlugin(jqueryプラグイン)】です。jqueryとプラグインファイルを読み込めば、一行でマウスドラッグによるスクロールが可能なリストが実現できます。

オプションには横幅、縦幅の指定や無限スクロール(endless scroll)の設定などができます。
(開発者環境で正常な動作を確認したブラウザ:chrome,MS Edge,Firefox)

 

 

 

 

listmousedragscroll.js

jQueryとプラグインファイル

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- plugin -->
<script src="https://cdn.it-the-best.com/jquery/plugin/listmousedrag/2.4/listmousedragscroll.min.js"></script>

 

 

DEMO

</> sample HTML 
<ul class="sample">
<li style="background-color: aqua"><p>1</p></li>
<li style="background-color: blue"><p>2</p></li>
<li style="background-color: chartreuse"><p>3</p></li>
<li style="background-color: darkgoldenrod"><p>4</p></li>
<li style="background-color: firebrick"><p>5</p></li>
<li style="background-color: gold"><p>6</p></li>
<li style="background-color: silver"><p>7</p></li>
<li style="background-color: violet"><p>8</p></li>
</ul>

<style>
.sample{
text-align: center;
vertical-align: center;
font-size: 100%;
}
.sample>li{
width:100%;
height:100%;
}
</style>

 

通常のリスト要素

スタイルなし

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

 

横向きリスト

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

.sample.yoko{
overflow: auto;
white-space: nowrap;
}
.sample.yoko>li{
display:inline-block;
}

 

 

plugin使用 

指定なし

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

 

$(".sample1").setListmousedragscroll();

 

 

縦幅・横幅・ ループの指定

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

 

$(".sample2").setListmousedragscroll({"width":"500","height":"100px","loop":true});
$(".sample2").css("max-width","100%");

 

 

ループ・スクロールバー(dot)の指定

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

 

$(".sample3").setListmousedragscroll({"loop":true,"scrollbar":"dot"});

 

 

縦幅・ループ(垂直方向:縦向きリスト)の指定

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

 

$(".sample4").setListmousedragscroll({"height":100,"loop":"v"});

 

 

 

使用方法

.setListmousedragscroll(method,options)

スクロール要素にしたい親要素を指定することで、マウスドラッグによるスクロールが可能になります。
初期設定として横リストにするスタイルとクラスの追加をします。

 .setListmousedragscroll()

 

メソッド・オプションの指定がない場合、横リストのスタイルとドラッグスクロールの機能だけが設定されます。 

 

 

メソッド

setStyle

横リストにするスタイルの追加とクラスの追加だけ行うので、ドラッグスクロールなしの横リストの設定に使用できます。

.setListmousedragscroll("setStyle")

このメソッドは指定しなくても呼び出されます。

 

 

オプション

オプションの指定方法は {key:value}で指定します。

例)  $(".sample").setListmousedragscroll( {"width":"100%","height":"100"} )

 

 

縦幅の指定ー{"height":"縦幅"}

指定した要素の縦幅の指定ができます。

例)  $(".sample").setListmousedragscroll( {"height":"200"} )

 

 

横幅の指定ー{"width":"横幅"}

指定した要素の横幅の指定ができます。

例)  $(".sample").setListmousedragscroll( {"width":"200px"} )

 

 

ループスクロールの指定/垂直リストの指定ー{"loop":true/"true"/"v"}

エンドレスなスクロールを実現します。valueには"true"、またはtrueを指定します。

valueに"v"を指定することで垂直リストのスタイルが適用され、縦方向にエンドレスなスクロールが可能になります。

例)  $(".sample").setListmousedragscroll({"loop":"true"})
       $(".sample").setListmousedragscroll({"loop":"v"})

 

要素のスタイルによってはスクロールにずれが生じる場合があります。
以下のクラスを追加することで改善できる可能性があります。

・横スクロールにずれがある場合
"scroll-2"
・縦スクロールにずれがある場合
"v-scroll-2"

 

ークローン生成

最後尾と先頭が同時に見えているとスクロールにずれが生じます。それを防ぐために初期設定として最後尾の要素のクローンを生成して、先頭に配置しています。

"listmousedragscroll-loop-no-clone"

このクラスを追加することで無効にすることができます

ループによるクローン追加によってスクロールの初期位置がずれる可能性があります。
プラグインの設定をしてからスクロール位置を変更する方法例はコチラです。

例) $(".sample").setListmousedragscroll({"height":100,"loop":"true"});
      $(".sample").scrollTop($(".sample").outerWidth(true));

 

ページ読み込み後の変更

例) window.addEventListener('load', function() {
          $(".sample").scrollTop($(".sample").outerWidth(true));
      });

 

指定要素まで画面スクロールして要素を表示させる方法

例) var top=$(window).scrollTop();//現在の画面スクロール位置
      $(".sample")[0].scrollIntoView(true);//指定要素までスクロールして表示
      $(window).scrollTop(top);//画面スクロールを戻す

 

 

スクロールバーの指定

・ドットスクロールバー:{"scrollbar":"dot"}

ドットスクロールバーをクリックで要素まで自動スクロールされます。(垂直方向リストの場合は無効)

例)  $(".sample").setListmousedragscroll({"scrollbar":"dot"})


ースクロールボタン:ドットスクロールボタンの左右に設置。スクロールボタンをクリックでスクロールが可能。長押し可能。

"listmousedragscroll-scrollbar-no-button"

このクラスを追加で無効。

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>listmousedragscroll.js sample</title>

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- plugin -->
<script src="https://cdn.it-the-best.com/jquery/plugin/listmousedrag/2.4/listmousedragscroll.min.js"></script>

</head>
<body>

<div id="sample1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

<ul id="sample2" class="listmousedragscroll-loop-no-clone">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

<style>
#sample1{
width: 100%;
height: 100%;
}
#sample1>*,#sample2>*{
width: 100%;
height:100px;
background-color: aqua;
}
</style>

<script>
$("#sample1").setListmousedragscroll();
$("#sample2").setListmousedragscroll({"width":"100%","height":"100%","loop":true});
</script>

</body>
</html>

 

更新情報

・2019-09-16

https://cdn.it-the-best.com/jquery/plugin/listmousedrag/2.4/listmousedragscroll.min.js
https://cdn.it-the-best.com/jquery/plugin/listmousedrag/2.4/listmousedragscroll.js