質問編集履歴

より見やすく、リンクなども挿入

2021/09/27 04:38

投稿

inari1973

スコア35

test CHANGED Viewed

	@@ -1 +1 @@
1	- Drawer.jsが急におかしくなった。【iOS15　Safari】
1	+ Drawer.jsが急におかしくなった。【iOS15　Safari　ハンバーガーメニュー】

test CHANGED Viewed

@@ -7,6 +7,30 @@
 Drawer.jsとiScroll.jsを使って
 横からメニューがでるようにしています。
+[http://git.blivesta.com/drawer/](http://git.blivesta.com/drawer/)
+Drawer.jsの作者のページ
+[https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.js](https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.js)
+Drawer.jsのコード
+[https://github.com/cubiq/iscroll/blob/master/build/iscroll.js](https://github.com/cubiq/iscroll/blob/master/build/iscroll.js)
+iscroll.jsのコード
+[https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.css](https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.css)
+drawer.cssのコード
@@ -20,13 +44,13 @@
-ios15でもchromeや、AndroidやPCでは問題なく動きます。
+ios15のchromeや、Androidのchrome、PC（Win10）のchromeやedgeでは問題なく動きます。
 iOS15になりsafariのデザインが刷新されたことが
-原因かもしれません。
+原因だと思われますが・・。
@@ -36,398 +60,28 @@
-http://git.blivesta.com/drawer/
 ### 試したこと
-https://teratail.com/questions/127838
+[https://teratail.com/questions/127838](https://teratail.com/questions/127838)
 （Drawer.jsの動きが急におかしくなった）
+→上記の通りに修正すると症状が悪化します。現在は上記の修正は不要だと思います。
-https://cruw.co.jp/blog/drawer-js-bug/
+[https://cruw.co.jp/blog/drawer-js-bug/](https://cruw.co.jp/blog/drawer-js-bug/)
 （Jqueryプラグイン「drawer」でiPhoneのスクロールができない問題対処法）
-https://sublimelife.hatenablog.com/entry/2018/06/21/183718
+[https://sublimelife.hatenablog.com/entry/2018/06/21/183718](https://sublimelife.hatenablog.com/entry/2018/06/21/183718)
 （jQueryライブラリ「drawer.js」のスクロールがおかしくなった）
 などの解決策を試しましたが直りませんでした。
-```ここに言語を入力
-/*!
- * jquery-drawer v3.2.2
- * Flexible drawer menu using jQuery, iScroll and CSS.
- * http://git.blivesta.com/drawer
- * License : MIT
- * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
- */
-;(function umd(factory) {
-  'use strict';
-  if (typeof define === 'function' && define.amd) {
-    define(['jquery'], factory);
-  } else if (typeof exports === 'object') {
-    module.exports = factory(require('jquery'));
-  } else {
-    factory(jQuery);
-  }
-}(function Drawer($) {
-  'use strict';
-  var namespace = 'drawer';
-  var touches = typeof document.ontouchstart != 'undefined';
-  var __ = {
-    init: function init(options) {
-      options = $.extend({
-        iscroll: {
-          mouseWheel: true,
-          preventDefault: true
-        },
-        showOverlay: true
-      }, options);
-      __.settings = {
-        state: false,
-        events: {
-          opened: 'drawer.opened',
-          closed: 'drawer.closed'
-        },
-        dropdownEvents: {
-          opened: 'shown.bs.dropdown',
-          closed: 'hidden.bs.dropdown'
-        }
-      };
-      __.settings.class = $.extend({
-        nav: 'drawer-nav',
-        toggle: 'drawer-toggle',
-        overlay: 'drawer-overlay',
-        open: 'drawer-open',
-        close: 'drawer-close',
-        dropdown: 'drawer-dropdown'
-      }, options.class);
-      return this.each(function instantiateDrawer() {
-        var _this = this;
-        var $this = $(this);
-        var data = $this.data(namespace);
-        if (!data) {
-          options = $.extend({}, options);
-          $this.data(namespace, { options: options });
-          __.refresh.call(_this);
-          if (options.showOverlay) {
-            __.addOverlay.call(_this);
-          }
-          $('.' + __.settings.class.toggle).on('click.' + namespace, function toggle() {
-            __.toggle.call(_this);
-            return _this.iScroll.refresh();
-          });
-          $(window).on('resize.' + namespace, function close() {
-            __.close.call(_this);
-            return _this.iScroll.refresh();
-          });
-          $('.' + __.settings.class.dropdown)
-            .on(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed, function onOpenedOrClosed() {
-              return _this.iScroll.refresh();
-            });
-        }
-      }); // end each
-    },
-    refresh: function refresh() {
-      this.iScroll = new IScroll(
-        '.' + __.settings.class.nav,
-        $(this).data(namespace).options.iscroll
-      );
-    },
-    addOverlay: function addOverlay() {
-      var $this = $(this);
-      var $overlay = $('<div>').addClass(__.settings.class.overlay + ' ' + __.settings.class.toggle);
-      return $this.append($overlay);
-    },
-    toggle: function toggle() {
-      var _this = this;
-      if (__.settings.state) {
-        return __.close.call(_this);
-      } else {
-        return __.open.call(_this);
-      }
-    },
-    open: function open() {
-      var $this = $(this);
-      if (touches) {
-        document.addEventListener('touchmove.' + namespace, function disableTouch(event) {
-          event.preventDefault();
-        }, {passive: false});
-      }
-      return $this
-        .removeClass(__.settings.class.close)
-        .addClass(__.settings.class.open)
-        .drawerCallback(function triggerOpenedListeners() {
-          __.settings.state = true;
-          $this.trigger(__.settings.events.opened);
-        });
-    },
-    close: function close() {
-      var $this = $(this);
-      if (touches) $this.off('touchmove.' + namespace);
-      return $this
-        .removeClass(__.settings.class.open)
-        .addClass(__.settings.class.close)
-        .drawerCallback(function triggerClosedListeners() {
-          __.settings.state = false;
-          $this.trigger(__.settings.events.closed);
-        });
-    },
-    destroy: function destroy() {
-      return this.each(function destroyEach() {
-        var _this = this;
-        var $this = $(this);
-        $('.' + __.settings.class.toggle).off('click.' + namespace);
-        $(window).off('resize.' + namespace);
-        $('.' + __.settings.class.dropdown).off(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed);
-        _this.iScroll.destroy();
-        $this
-          .removeData(namespace)
-          .find('.' + __.settings.class.overlay)
-          .remove();
-      });
-    }
-  };
-  $.fn.drawerCallback = function drawerCallback(callback) {
-    var end = 'transitionend webkitTransitionEnd';
-    return this.each(function setAnimationEndHandler() {
-      var $this = $(this);
-      $this.on(end, function invokeCallbackOnAnimationEnd() {
-        $this.off(end);
-        return callback.call(this);
-      });
-    });
-  };
-  $.fn.drawer = function drawer(method) {
-    if (__[method]) {
-      return __[method].apply(this, Array.prototype.slice.call(arguments, 1));
-    } else if (typeof method === 'object' || !method) {
-      return __.init.apply(this, arguments);
-    } else {
-      $.error('Method ' + method + ' does not exist on jQuery.' + namespace);
-    }
-  };
-}));
-```

質問内容の修正

2021/09/27 04:38

投稿

inari1973

スコア35

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -16,17 +16,17 @@
 すぐに閉じるようになってしまいました。
+（ゆっくりスクロールさせると閉じにくい）
 ios15でもchromeや、AndroidやPCでは問題なく動きます。
-iOS15になりsafariのデザインが刷新され
+iOS15になりsafariのデザインが刷新されたことが
-アドレスバーが画面下部に表示されるようになったことなどが
-原因だと思っています。
+原因かもしれません。
@@ -36,16 +36,10 @@
-元のサイトも同じ症状がでているようです。
 http://git.blivesta.com/drawer/
-使用しているコードは上記のURLからdrawer.js　v3.2.2（CDNではないもの）とhttps://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.jsになります。
 ### 試したこと

コードを追加

2021/09/27 04:11

投稿

inari1973

スコア35

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -69,3 +69,371 @@
 などの解決策を試しましたが直りませんでした。
+```ここに言語を入力
+/*!
+ * jquery-drawer v3.2.2
+ * Flexible drawer menu using jQuery, iScroll and CSS.
+ * http://git.blivesta.com/drawer
+ * License : MIT
+ * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
+ */
+;(function umd(factory) {
+  'use strict';
+  if (typeof define === 'function' && define.amd) {
+    define(['jquery'], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory(require('jquery'));
+  } else {
+    factory(jQuery);
+  }
+}(function Drawer($) {
+  'use strict';
+  var namespace = 'drawer';
+  var touches = typeof document.ontouchstart != 'undefined';
+  var __ = {
+    init: function init(options) {
+      options = $.extend({
+        iscroll: {
+          mouseWheel: true,
+          preventDefault: true
+        },
+        showOverlay: true
+      }, options);
+      __.settings = {
+        state: false,
+        events: {
+          opened: 'drawer.opened',
+          closed: 'drawer.closed'
+        },
+        dropdownEvents: {
+          opened: 'shown.bs.dropdown',
+          closed: 'hidden.bs.dropdown'
+        }
+      };
+      __.settings.class = $.extend({
+        nav: 'drawer-nav',
+        toggle: 'drawer-toggle',
+        overlay: 'drawer-overlay',
+        open: 'drawer-open',
+        close: 'drawer-close',
+        dropdown: 'drawer-dropdown'
+      }, options.class);
+      return this.each(function instantiateDrawer() {
+        var _this = this;
+        var $this = $(this);
+        var data = $this.data(namespace);
+        if (!data) {
+          options = $.extend({}, options);
+          $this.data(namespace, { options: options });
+          __.refresh.call(_this);
+          if (options.showOverlay) {
+            __.addOverlay.call(_this);
+          }
+          $('.' + __.settings.class.toggle).on('click.' + namespace, function toggle() {
+            __.toggle.call(_this);
+            return _this.iScroll.refresh();
+          });
+          $(window).on('resize.' + namespace, function close() {
+            __.close.call(_this);
+            return _this.iScroll.refresh();
+          });
+          $('.' + __.settings.class.dropdown)
+            .on(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed, function onOpenedOrClosed() {
+              return _this.iScroll.refresh();
+            });
+        }
+      }); // end each
+    },
+    refresh: function refresh() {
+      this.iScroll = new IScroll(
+        '.' + __.settings.class.nav,
+        $(this).data(namespace).options.iscroll
+      );
+    },
+    addOverlay: function addOverlay() {
+      var $this = $(this);
+      var $overlay = $('<div>').addClass(__.settings.class.overlay + ' ' + __.settings.class.toggle);
+      return $this.append($overlay);
+    },
+    toggle: function toggle() {
+      var _this = this;
+      if (__.settings.state) {
+        return __.close.call(_this);
+      } else {
+        return __.open.call(_this);
+      }
+    },
+    open: function open() {
+      var $this = $(this);
+      if (touches) {
+        document.addEventListener('touchmove.' + namespace, function disableTouch(event) {
+          event.preventDefault();
+        }, {passive: false});
+      }
+      return $this
+        .removeClass(__.settings.class.close)
+        .addClass(__.settings.class.open)
+        .drawerCallback(function triggerOpenedListeners() {
+          __.settings.state = true;
+          $this.trigger(__.settings.events.opened);
+        });
+    },
+    close: function close() {
+      var $this = $(this);
+      if (touches) $this.off('touchmove.' + namespace);
+      return $this
+        .removeClass(__.settings.class.open)
+        .addClass(__.settings.class.close)
+        .drawerCallback(function triggerClosedListeners() {
+          __.settings.state = false;
+          $this.trigger(__.settings.events.closed);
+        });
+    },
+    destroy: function destroy() {
+      return this.each(function destroyEach() {
+        var _this = this;
+        var $this = $(this);
+        $('.' + __.settings.class.toggle).off('click.' + namespace);
+        $(window).off('resize.' + namespace);
+        $('.' + __.settings.class.dropdown).off(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed);
+        _this.iScroll.destroy();
+        $this
+          .removeData(namespace)
+          .find('.' + __.settings.class.overlay)
+          .remove();
+      });
+    }
+  };
+  $.fn.drawerCallback = function drawerCallback(callback) {
+    var end = 'transitionend webkitTransitionEnd';
+    return this.each(function setAnimationEndHandler() {
+      var $this = $(this);
+      $this.on(end, function invokeCallbackOnAnimationEnd() {
+        $this.off(end);
+        return callback.call(this);
+      });
+    });
+  };
+  $.fn.drawer = function drawer(method) {
+    if (__[method]) {
+      return __[method].apply(this, Array.prototype.slice.call(arguments, 1));
+    } else if (typeof method === 'object' || !method) {
+      return __.init.apply(this, arguments);
+    } else {
+      $.error('Method ' + method + ' does not exist on jQuery.' + namespace);
+    }
+  };
+}));
+```

使用しているコードのバージョンの詳細を記入

2021/09/24 06:57

投稿

inari1973

スコア35

test CHANGED Viewed

	@@ -1 +1 @@
1	- Drawer.jsが~~スクロールできな~~くなった【iOS15　Safari】
1	+ Drawer.jsが急におかしくなった。【iOS15　Safari】

test CHANGED Viewed

@@ -18,9 +18,13 @@
+ios15でもchromeや、AndroidやPCでは問題なく動きます。
 iOS15になりsafariのデザインが刷新され
-アドレスバーが画面下部に表示されるようになったことが
+アドレスバーが画面下部に表示されるようになったことなどが
 原因だと思っています。
@@ -35,6 +39,10 @@
 元のサイトも同じ症状がでているようです。
 http://git.blivesta.com/drawer/
+使用しているコードは上記のURLからdrawer.js　v3.2.2（CDNではないもの）とhttps://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.jsになります。