IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【見本あり】JavaScriptでリストをドラッグスクロールする「jQueryプラグイン」 - オプションでエンドレススクロール,慣性スクロールも可能 | listmousedragscroll.js

jQuery-プラグイン-マウスドラッグスクロール jQuery プラグイン マウスドラッグスクロール jQuery-プラグイン JavaScript-jQuery JavaScript プラグイン-マウスドラッグスクロール

f:id:Surprisedblog:20190916181242j:plain

 

投稿日：2019-09-16

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

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

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

サンプル

 

 

シンプルなマウスドラッグスクロールのみを実現したい場合はコチラの記事がおすすめです。

 www.it-the-best.com

 

 

 

 

 

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.6.1/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"});

 

慣性スクロールの指定

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

 

$(".sample5").setListmousedragscroll({"height":100,"inertia":"true","loop":true});

 

 

 

使用方法

.setListmousedragscroll(method,options)

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

 .setListmousedragscroll()

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

 

コード
$(".list").setListmousedragscroll({"height":"auto","width":"auto","inertia":"true","loop":true,"scrollbar":"dot"});

 

メソッド
  • setStyle

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

 

 

 

ークローン生成

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

このクラスを追加することでクローンを生成し、配置します。

"listmousedragscroll-loop-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"

 

 

慣性スクロールの指定-{"inertia":"true"|true}

慣性スクロールを実現します。

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

 

 

 

例

<!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.5.1/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

 

2019-11-07

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

・ドラッグ後のクリック判定を防止
・スクロールバーをドットにした場合に、スマホでスクロールできなくなる問題を解消
・スクロールバーをドットにした場合に、進むボタンを押しても表示されている要素の次の要素を表示しない問題を解消

 

 

 

2019-11-14

バージョン2.5.1を公開

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

・iosで慣性スクロールに対応
・ループ処理の改善。右側にループできない現象を解消。

 

2020-06-21

バージョン2.6.1を公開

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

・ループ処理の改善、クリックスクロールの処理の改善、慣性スクロールの追加。
・クローンの追加を初期設定ではなく、特定のクラスが追加されているときに追加する仕様に変更。

 

2020-10-10

バージョン2.6.2を公開

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

・ドットスクロールバーを表示したときに、スクロール要素が横幅を飛び出して表示される。→飛び出さないよう修正。
・その他不具合の修正。

 

 

当記事で記載しているコード、外部ファイル※1のコードはコピーしてご自由にお使いください。ただし、再配布、転載、引用など第三者への公開・使用目的で使用する場合は、必ず下記の著作権の表示をお願い致します。

Copyright (c) 2020 https://www.it-the-best.com https://www.it-the-best.com/entry/jquery-plugin-mousedragscroll

※1：jQuery以外の外部ファイル