【lightbox2】disableScrolling を true にしても、スマホでスクロールできてしまう問題【jQuery】

前回、[こんなこと](https://qiita.com/4cres/items/d1a6b4ec317956005fff) があり、2.10.0 で試しています。

lightbox2 のオプションには `disableScrolling` があり、`true` にすると Litebox が開いてる間はスクロールできなくなります。

> オプションの参考：[簡単に画像のポップアップ！「Lightbox」の実装方法](https://kigiroku.com/frontend/lightbox.html)

しかし、`true` にしても、スマホではスクロールできるバグ？があります。

`html` や `body` タグに `overflow: hidden` を指定するとスクロールできなくなります。

ただし、これはPCのみでスマホではスクロールできてしまいます。

そのため、JavaScriptで制御する必要があります。

`preventDefault();` を使うスクロールを無効化できましたが、新しいブラウザでは効かないようです。

> 参考：[スクロール禁止が overflow:hidden や preventDefault(); でできないときの対処法](https://qiita.com/shge/items/d2ae44621ce2eec183e6#_reference-f78292124cf08d04c4fc)

新しいブラウザで `preventDefault()` を使いたいときは、`passive:false` にする必要があります。

具体的に言うと `addEventListener` の第3引数に `{passive: false}` を指定します。

スクロール禁止・再開を関数化したのが下記です。

```javascript
function scroll_control(event) {
    event.preventDefault();
}
function no_scroll(){
    document.addEventListener("mousewheel", scroll_control, {passive: false});
    document.addEventListener("touchmove", scroll_control, {passive: false});
}
function return_scroll(){
    document.removeEventListener("mousewheel", scroll_control, {passive: false});
    document.removeEventListener('touchmove', scroll_control, {passive: false});
}
```

> 引用元： [マウスによるスクロールやスマホのスワイプを制御するjs(passive: false)](http://reiwinn-web.net/2018/05/21/%E3%83%9E%E3%82%A6%E3%82%B9%E3%81%AB%E3%82%88%E3%82%8B%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%84%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%AE%E3%82%B9%E3%83%AF%E3%82%A4%E3%83%97%E3%82%92%E5%88%B6/)

`no_scroll()` を呼び出せばスクロールが禁止され、`return_scroll()` を呼び出せばスクロール禁止してたのを再開できます。

これらを、`litebox.js`（v2.10.0） に追記します。

追加箇所の抜粋です。

```javascript:litebox.js（最初に関数を記述）
/*!
 * Lightbox v2.10.0
 * by Lokesh Dhakar
 *
 * More info:
 * http://lokeshdhakar.com/projects/lightbox2/
 *
 * Copyright 2007, 2018 Lokesh Dhakar
 * Released under the MIT license
 * https://github.com/lokesh/lightbox2/blob/master/LICENSE
 *
 * @preserve
 */

// scroll control
function scroll_control(event) {
    event.preventDefault();
}
function no_scroll(){
    document.addEventListener("mousewheel", scroll_control, {passive: false});
    document.addEventListener("touchmove", scroll_control, {passive: false});
}
function return_scroll(){
    document.removeEventListener("mousewheel", scroll_control, {passive: false});
    document.removeEventListener('touchmove', scroll_control, {passive: false});
}

```

```javascript:litebox.js（ライトボックスがスタートするときにno_scroll()を実行）
  // Show overlay and lightbox. If the image is part of a set, add siblings to album array.
  Lightbox.prototype.start = function($link) {

    no_scroll();    // この1行を追記しました。

    var self    = this;
    var $window = $(window);

    $window.on('resize', $.proxy(this.sizeOverlay, this));

    $('select, object, embed').css({
      visibility: 'hidden'
    });

    this.sizeOverlay();

    this.album = [];
    var imageNumber = 0;

    function addToAlbum($link) {
      self.album.push({
        alt: $link.attr('data-alt'),
        link: $link.attr('href'),
        title: $link.attr('data-title') || $link.attr('title')
      });
    }
```

```javascript:litebox.js（ライトボックスが終了するときにreturn_scroll()を実行）
  // Closing time. :-(
  Lightbox.prototype.end = function() {

    return_scroll();    // この1行を追記しました。

    this.disableKeyboardNav();
    $(window).off('resize', this.sizeOverlay);
    this.$lightbox.fadeOut(this.options.fadeDuration);
    this.$overlay.fadeOut(this.options.fadeDuration);
    $('select, object, embed').css({
      visibility: 'visible'
    });
    if (this.options.disableScrolling) {
      $('html').removeClass('lb-disable-scrolling');
    }
  };
```