teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

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

2021/09/27 04:38

投稿

inari1973
inari1973

スコア35

title CHANGED
@@ -1,1 +1,1 @@
1
- Drawer.jsが急におかしくなった。 【iOS15 Safari】
1
+ Drawer.jsが急におかしくなった。 【iOS15 Safari ハンバーガーメニュー
body CHANGED
@@ -4,214 +4,41 @@
4
4
  Drawer.jsとiScroll.jsを使って
5
5
  横からメニューがでるようにしています。
6
6
 
7
+ [http://git.blivesta.com/drawer/](http://git.blivesta.com/drawer/)
8
+ Drawer.jsの作者のページ
9
+
10
+ [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)
11
+ Drawer.jsのコード
12
+
13
+ [https://github.com/cubiq/iscroll/blob/master/build/iscroll.js](https://github.com/cubiq/iscroll/blob/master/build/iscroll.js)
14
+ iscroll.jsのコード
15
+
16
+ [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)
17
+ drawer.cssのコード
18
+
7
19
  iOS15にバージョンアップして新しいSafariにしたところ
8
20
  メニューをスクロールさせようとすると
9
21
  すぐに閉じるようになってしまいました。
10
22
  (ゆっくりスクロールさせると閉じにくい)
11
23
 
12
- ios15でもchromeや、AndroidPCでは問題なく動きます。
24
+ ios15chromeや、Androidのchrome、PC(Win10)のchromeやedgeでは問題なく動きます。
13
25
 
14
26
  iOS15になりsafariのデザインが刷新されたことが
15
- 原因かもしれません
27
+ 原因だと思われますが・・
16
28
 
17
29
  どのように解決すれば良いか分かりませんので
18
30
  お知恵を借りることができれば嬉しいです。
19
31
 
20
- http://git.blivesta.com/drawer/
21
-
22
32
  ### 試したこと
23
33
 
24
- https://teratail.com/questions/127838
34
+ [https://teratail.com/questions/127838](https://teratail.com/questions/127838)
25
35
  (Drawer.jsの動きが急におかしくなった)
36
+ →上記の通りに修正すると症状が悪化します。現在は上記の修正は不要だと思います。
26
37
 
27
- https://cruw.co.jp/blog/drawer-js-bug/
38
+ [https://cruw.co.jp/blog/drawer-js-bug/](https://cruw.co.jp/blog/drawer-js-bug/)
28
39
  (Jqueryプラグイン「drawer」でiPhoneのスクロールができない問題対処法)
29
40
 
30
- https://sublimelife.hatenablog.com/entry/2018/06/21/183718
41
+ [https://sublimelife.hatenablog.com/entry/2018/06/21/183718](https://sublimelife.hatenablog.com/entry/2018/06/21/183718)
31
42
  (jQueryライブラリ「drawer.js」のスクロールがおかしくなった)
32
43
 
33
- などの解決策を試しましたが直りませんでした。
44
+ などの解決策を試しましたが直りませんでした。
34
-
35
- ```ここに言語を入力
36
- /*!
37
- * jquery-drawer v3.2.2
38
- * Flexible drawer menu using jQuery, iScroll and CSS.
39
- * http://git.blivesta.com/drawer
40
- * License : MIT
41
- * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
42
- */
43
-
44
- ;(function umd(factory) {
45
- 'use strict';
46
- if (typeof define === 'function' && define.amd) {
47
- define(['jquery'], factory);
48
- } else if (typeof exports === 'object') {
49
- module.exports = factory(require('jquery'));
50
- } else {
51
- factory(jQuery);
52
- }
53
- }(function Drawer($) {
54
- 'use strict';
55
- var namespace = 'drawer';
56
- var touches = typeof document.ontouchstart != 'undefined';
57
- var __ = {
58
- init: function init(options) {
59
- options = $.extend({
60
- iscroll: {
61
- mouseWheel: true,
62
- preventDefault: true
63
- },
64
- showOverlay: true
65
- }, options);
66
-
67
- __.settings = {
68
- state: false,
69
- events: {
70
- opened: 'drawer.opened',
71
- closed: 'drawer.closed'
72
- },
73
- dropdownEvents: {
74
- opened: 'shown.bs.dropdown',
75
- closed: 'hidden.bs.dropdown'
76
- }
77
- };
78
-
79
- __.settings.class = $.extend({
80
- nav: 'drawer-nav',
81
- toggle: 'drawer-toggle',
82
- overlay: 'drawer-overlay',
83
- open: 'drawer-open',
84
- close: 'drawer-close',
85
- dropdown: 'drawer-dropdown'
86
- }, options.class);
87
-
88
- return this.each(function instantiateDrawer() {
89
- var _this = this;
90
- var $this = $(this);
91
- var data = $this.data(namespace);
92
-
93
- if (!data) {
94
- options = $.extend({}, options);
95
- $this.data(namespace, { options: options });
96
-
97
- __.refresh.call(_this);
98
-
99
- if (options.showOverlay) {
100
- __.addOverlay.call(_this);
101
- }
102
-
103
- $('.' + __.settings.class.toggle).on('click.' + namespace, function toggle() {
104
- __.toggle.call(_this);
105
- return _this.iScroll.refresh();
106
- });
107
-
108
- $(window).on('resize.' + namespace, function close() {
109
- __.close.call(_this);
110
- return _this.iScroll.refresh();
111
- });
112
-
113
- $('.' + __.settings.class.dropdown)
114
- .on(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed, function onOpenedOrClosed() {
115
- return _this.iScroll.refresh();
116
- });
117
- }
118
-
119
- }); // end each
120
- },
121
-
122
- refresh: function refresh() {
123
- this.iScroll = new IScroll(
124
- '.' + __.settings.class.nav,
125
- $(this).data(namespace).options.iscroll
126
- );
127
- },
128
-
129
- addOverlay: function addOverlay() {
130
- var $this = $(this);
131
- var $overlay = $('<div>').addClass(__.settings.class.overlay + ' ' + __.settings.class.toggle);
132
-
133
- return $this.append($overlay);
134
- },
135
-
136
- toggle: function toggle() {
137
- var _this = this;
138
-
139
- if (__.settings.state) {
140
- return __.close.call(_this);
141
- } else {
142
- return __.open.call(_this);
143
- }
144
- },
145
-
146
- open: function open() {
147
- var $this = $(this);
148
-
149
- if (touches) {
150
- document.addEventListener('touchmove.' + namespace, function disableTouch(event) {
151
- event.preventDefault();
152
- }, {passive: false});
153
- }
154
-
155
- return $this
156
- .removeClass(__.settings.class.close)
157
- .addClass(__.settings.class.open)
158
- .drawerCallback(function triggerOpenedListeners() {
159
- __.settings.state = true;
160
- $this.trigger(__.settings.events.opened);
161
- });
162
- },
163
-
164
- close: function close() {
165
- var $this = $(this);
166
-
167
- if (touches) $this.off('touchmove.' + namespace);
168
-
169
- return $this
170
- .removeClass(__.settings.class.open)
171
- .addClass(__.settings.class.close)
172
- .drawerCallback(function triggerClosedListeners() {
173
- __.settings.state = false;
174
- $this.trigger(__.settings.events.closed);
175
- });
176
- },
177
-
178
- destroy: function destroy() {
179
- return this.each(function destroyEach() {
180
- var _this = this;
181
- var $this = $(this);
182
- $('.' + __.settings.class.toggle).off('click.' + namespace);
183
- $(window).off('resize.' + namespace);
184
- $('.' + __.settings.class.dropdown).off(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed);
185
- _this.iScroll.destroy();
186
- $this
187
- .removeData(namespace)
188
- .find('.' + __.settings.class.overlay)
189
- .remove();
190
- });
191
- }
192
-
193
- };
194
-
195
- $.fn.drawerCallback = function drawerCallback(callback) {
196
- var end = 'transitionend webkitTransitionEnd';
197
- return this.each(function setAnimationEndHandler() {
198
- var $this = $(this);
199
- $this.on(end, function invokeCallbackOnAnimationEnd() {
200
- $this.off(end);
201
- return callback.call(this);
202
- });
203
- });
204
- };
205
-
206
- $.fn.drawer = function drawer(method) {
207
- if (__[method]) {
208
- return __[method].apply(this, Array.prototype.slice.call(arguments, 1));
209
- } else if (typeof method === 'object' || !method) {
210
- return __.init.apply(this, arguments);
211
- } else {
212
- $.error('Method ' + method + ' does not exist on jQuery.' + namespace);
213
- }
214
- };
215
-
216
- }));
217
- ```

3

質問内容の修正

2021/09/27 04:38

投稿

inari1973
inari1973

スコア35

title CHANGED
File without changes
body CHANGED
@@ -7,21 +7,18 @@
7
7
  iOS15にバージョンアップして新しいSafariにしたところ
8
8
  メニューをスクロールさせようとすると
9
9
  すぐに閉じるようになってしまいました。
10
+ (ゆっくりスクロールさせると閉じにくい)
10
11
 
11
12
  ios15でもchromeや、AndroidやPCでは問題なく動きます。
12
13
 
13
- iOS15になりsafariのデザインが刷新され
14
+ iOS15になりsafariのデザインが刷新されたことが
14
- アドレスバーが画面下部に表示されるようになったことなどが
15
- 原因だと思ってい
15
+ 原因かもしれせん
16
16
 
17
17
  どのように解決すれば良いか分かりませんので
18
18
  お知恵を借りることができれば嬉しいです。
19
19
 
20
- 元のサイトも同じ症状がでているようです。
21
20
  http://git.blivesta.com/drawer/
22
21
 
23
- 使用しているコードは上記のURLからdrawer.js v3.2.2(CDNではないもの)とhttps://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.jsになります。
24
-
25
22
  ### 試したこと
26
23
 
27
24
  https://teratail.com/questions/127838

2

コードを追加

2021/09/27 04:11

投稿

inari1973
inari1973

スコア35

title CHANGED
File without changes
body CHANGED
@@ -33,4 +33,188 @@
33
33
  https://sublimelife.hatenablog.com/entry/2018/06/21/183718
34
34
  (jQueryライブラリ「drawer.js」のスクロールがおかしくなった)
35
35
 
36
- などの解決策を試しましたが直りませんでした。
36
+ などの解決策を試しましたが直りませんでした。
37
+
38
+ ```ここに言語を入力
39
+ /*!
40
+ * jquery-drawer v3.2.2
41
+ * Flexible drawer menu using jQuery, iScroll and CSS.
42
+ * http://git.blivesta.com/drawer
43
+ * License : MIT
44
+ * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
45
+ */
46
+
47
+ ;(function umd(factory) {
48
+ 'use strict';
49
+ if (typeof define === 'function' && define.amd) {
50
+ define(['jquery'], factory);
51
+ } else if (typeof exports === 'object') {
52
+ module.exports = factory(require('jquery'));
53
+ } else {
54
+ factory(jQuery);
55
+ }
56
+ }(function Drawer($) {
57
+ 'use strict';
58
+ var namespace = 'drawer';
59
+ var touches = typeof document.ontouchstart != 'undefined';
60
+ var __ = {
61
+ init: function init(options) {
62
+ options = $.extend({
63
+ iscroll: {
64
+ mouseWheel: true,
65
+ preventDefault: true
66
+ },
67
+ showOverlay: true
68
+ }, options);
69
+
70
+ __.settings = {
71
+ state: false,
72
+ events: {
73
+ opened: 'drawer.opened',
74
+ closed: 'drawer.closed'
75
+ },
76
+ dropdownEvents: {
77
+ opened: 'shown.bs.dropdown',
78
+ closed: 'hidden.bs.dropdown'
79
+ }
80
+ };
81
+
82
+ __.settings.class = $.extend({
83
+ nav: 'drawer-nav',
84
+ toggle: 'drawer-toggle',
85
+ overlay: 'drawer-overlay',
86
+ open: 'drawer-open',
87
+ close: 'drawer-close',
88
+ dropdown: 'drawer-dropdown'
89
+ }, options.class);
90
+
91
+ return this.each(function instantiateDrawer() {
92
+ var _this = this;
93
+ var $this = $(this);
94
+ var data = $this.data(namespace);
95
+
96
+ if (!data) {
97
+ options = $.extend({}, options);
98
+ $this.data(namespace, { options: options });
99
+
100
+ __.refresh.call(_this);
101
+
102
+ if (options.showOverlay) {
103
+ __.addOverlay.call(_this);
104
+ }
105
+
106
+ $('.' + __.settings.class.toggle).on('click.' + namespace, function toggle() {
107
+ __.toggle.call(_this);
108
+ return _this.iScroll.refresh();
109
+ });
110
+
111
+ $(window).on('resize.' + namespace, function close() {
112
+ __.close.call(_this);
113
+ return _this.iScroll.refresh();
114
+ });
115
+
116
+ $('.' + __.settings.class.dropdown)
117
+ .on(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed, function onOpenedOrClosed() {
118
+ return _this.iScroll.refresh();
119
+ });
120
+ }
121
+
122
+ }); // end each
123
+ },
124
+
125
+ refresh: function refresh() {
126
+ this.iScroll = new IScroll(
127
+ '.' + __.settings.class.nav,
128
+ $(this).data(namespace).options.iscroll
129
+ );
130
+ },
131
+
132
+ addOverlay: function addOverlay() {
133
+ var $this = $(this);
134
+ var $overlay = $('<div>').addClass(__.settings.class.overlay + ' ' + __.settings.class.toggle);
135
+
136
+ return $this.append($overlay);
137
+ },
138
+
139
+ toggle: function toggle() {
140
+ var _this = this;
141
+
142
+ if (__.settings.state) {
143
+ return __.close.call(_this);
144
+ } else {
145
+ return __.open.call(_this);
146
+ }
147
+ },
148
+
149
+ open: function open() {
150
+ var $this = $(this);
151
+
152
+ if (touches) {
153
+ document.addEventListener('touchmove.' + namespace, function disableTouch(event) {
154
+ event.preventDefault();
155
+ }, {passive: false});
156
+ }
157
+
158
+ return $this
159
+ .removeClass(__.settings.class.close)
160
+ .addClass(__.settings.class.open)
161
+ .drawerCallback(function triggerOpenedListeners() {
162
+ __.settings.state = true;
163
+ $this.trigger(__.settings.events.opened);
164
+ });
165
+ },
166
+
167
+ close: function close() {
168
+ var $this = $(this);
169
+
170
+ if (touches) $this.off('touchmove.' + namespace);
171
+
172
+ return $this
173
+ .removeClass(__.settings.class.open)
174
+ .addClass(__.settings.class.close)
175
+ .drawerCallback(function triggerClosedListeners() {
176
+ __.settings.state = false;
177
+ $this.trigger(__.settings.events.closed);
178
+ });
179
+ },
180
+
181
+ destroy: function destroy() {
182
+ return this.each(function destroyEach() {
183
+ var _this = this;
184
+ var $this = $(this);
185
+ $('.' + __.settings.class.toggle).off('click.' + namespace);
186
+ $(window).off('resize.' + namespace);
187
+ $('.' + __.settings.class.dropdown).off(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed);
188
+ _this.iScroll.destroy();
189
+ $this
190
+ .removeData(namespace)
191
+ .find('.' + __.settings.class.overlay)
192
+ .remove();
193
+ });
194
+ }
195
+
196
+ };
197
+
198
+ $.fn.drawerCallback = function drawerCallback(callback) {
199
+ var end = 'transitionend webkitTransitionEnd';
200
+ return this.each(function setAnimationEndHandler() {
201
+ var $this = $(this);
202
+ $this.on(end, function invokeCallbackOnAnimationEnd() {
203
+ $this.off(end);
204
+ return callback.call(this);
205
+ });
206
+ });
207
+ };
208
+
209
+ $.fn.drawer = function drawer(method) {
210
+ if (__[method]) {
211
+ return __[method].apply(this, Array.prototype.slice.call(arguments, 1));
212
+ } else if (typeof method === 'object' || !method) {
213
+ return __.init.apply(this, arguments);
214
+ } else {
215
+ $.error('Method ' + method + ' does not exist on jQuery.' + namespace);
216
+ }
217
+ };
218
+
219
+ }));
220
+ ```

1

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

2021/09/24 06:57

投稿

inari1973
inari1973

スコア35

title CHANGED
@@ -1,1 +1,1 @@
1
- Drawer.jsがスクロールできなくなった 【iOS15 Safari】
1
+ Drawer.jsが急におかしくなった 【iOS15 Safari】
body CHANGED
@@ -8,8 +8,10 @@
8
8
  メニューをスクロールさせようとすると
9
9
  すぐに閉じるようになってしまいました。
10
10
 
11
+ ios15でもchromeや、AndroidやPCでは問題なく動きます。
12
+
11
13
  iOS15になりsafariのデザインが刷新され
12
- アドレスバーが画面下部に表示されるようになったことが
14
+ アドレスバーが画面下部に表示されるようになったことなど
13
15
  原因だと思っています。
14
16
 
15
17
  どのように解決すれば良いか分かりませんので
@@ -18,6 +20,8 @@
18
20
  元のサイトも同じ症状がでているようです。
19
21
  http://git.blivesta.com/drawer/
20
22
 
23
+ 使用しているコードは上記のURLからdrawer.js v3.2.2(CDNではないもの)とhttps://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.jsになります。
24
+
21
25
  ### 試したこと
22
26
 
23
27
  https://teratail.com/questions/127838