前提・実現したいこと
react-calendar-timelineを使用してサンプルコードを書いているのですが、
このComponentはカレンダー部分でピンチイン・ピンチアウトすると、カレンダーの時間軸がzoom されるようになっています。
実現したい動きは、
①カレンダー部分でピンチイン・ピンチアウトすれば、カレンダーの時間軸がzoomされる。この時ブラウザのzoomは作動しない。
②カレンダー以外の部分でピンチイン・ピンチアウトすれば、ブラウザのzoomが動作する。
例えば、このcodepenのサンプルだとcodepenの部分はブラウザの拡大縮小が動作し、カレンダー上ではカレンダーの拡大縮小が動作します。
まさにこのような動きを実現したいです。
1.カレンダーのところでピンチイン・ピンチアウトしてみてください。
2.カレンダーじゃないところでピンチイン・ピンチアウトしてみてください。
https://codepen.io/xmityaz/pen/wGZRoq
発生している問題・エラーメッセージ
しかしスマートフォンやiPadでピンチイン・ピンチアウトすると、
ブラウザの拡大縮小がカレンダーの時間軸のzoomと同時に動いてしまい、zoomがしずらくなってしまいます。
該当のソースコード
javascript
1import React from 'react'; 2import ReactDOM from 'react-dom'; 3 4 5import Timeline from 'react-calendar-timeline' 6// make sure you include the timeline stylesheet or the timeline will not be styled 7import 'react-calendar-timeline/lib/Timeline.css' 8import moment from 'moment' 9 10const groups = [ 11 { id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }, { id: 3, title: 'group 3' }, 12 { id: 4, title: 'group 4' }, { id: 5, title: 'group 5' }, { id: 6, title: 'group 6' }, 13 ]; 14 15const items = [ 16 {id: 1, group: 1, title: 'item 1', start_time: moment(), end_time: moment().add(1, 'hour')}, 17 {id: 2, group: 2, title: 'item 2', start_time: moment().add(-0.5, 'hour'),end_time: moment().add(0.5, 'hour')}, 18 {id: 3, group: 1, title: 'item 3', start_time: moment().add(2, 'hour'), end_time: moment().add(3, 'hour')} 19] 20 21ReactDOM.render( 22 <div> 23 <div>aaaaaaaaaaaa</div> 24 <div>aaaaaaaaaaaa</div> 25 <div>aaaaaaaaaaaa</div> 26 <div>aaaaaaaaaaaa</div> 27 <div>aaaaaaaaaaaa</div> 28 Rendered by react! 29 <div> 30 <Timeline 31 groups={groups} 32 items={items} 33 defaultTimeStart={moment().add(-12, 'hour')} 34 defaultTimeEnd={moment().add(12, 'hour')} 35 /> 36 </div> 37 38 </div>, 39 document.getElementById('root'));
javascript
1import React from 'react'; 2import ReactDOM from 'react-dom'; 3 4 5import Timeline from 'react-calendar-timeline' 6// make sure you include the timeline stylesheet or the timeline will not be styled 7import 'react-calendar-timeline/lib/Timeline.css' 8import moment from 'moment' 9 10const groups = [ 11 { id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }, { id: 3, title: 'group 3' }, 12 { id: 4, title: 'group 4' }, { id: 5, title: 'group 5' }, { id: 6, title: 'group 6' }, 13 ]; 14 15const items = [ 16 {id: 1, group: 1, title: 'item 1', start_time: moment(), end_time: moment().add(1, 'hour')}, 17 {id: 2, group: 2, title: 'item 2', start_time: moment().add(-0.5, 'hour'),end_time: moment().add(0.5, 'hour')}, 18 {id: 3, group: 1, title: 'item 3', start_time: moment().add(2, 'hour'), end_time: moment().add(3, 'hour')} 19] 20 21ReactDOM.render( 22 <div> 23 <div>aaaaaaaaaaaa</div> 24 <div>aaaaaaaaaaaa</div> 25 <div>aaaaaaaaaaaa</div> 26 Rendered by react! 27 <div> 28 <Timeline 29 groups={groups} 30 items={items} 31 defaultTimeStart={moment().add(-12, 'hour')} 32 defaultTimeEnd={moment().add(12, 'hour')} 33 /> 34 </div> 35 36 </div>, 37 document.getElementById('root'));
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6 <meta name="theme-color" content="#000000"> 7 <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> 8 <title></title> 9</head> 10<body style="width: 100%"> 11<noscript> 12 You need to enable JavaScript to run this app. 13</noscript> 14<div id="root"></div> 15</body> 16</html>
試したこと
1.user-scalable=noをつけてみる。
→ これはうまくいきませんでした。ブラウザの拡大縮小も禁止できず。
html
1<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
2.カレンダーからのTouchMove、TouchStartイベントをキャンセルする。
これもうまくいきませんでした。
jsx
1ReactDOM.render( 2 <div> 3 <div>aaaaaaaaaaaa</div> 4 <div>aaaaaaaaaaaa</div> 5 <div>aaaaaaaaaaaa</div> 6 Rendered by react! 7 <div 8 onTouchMove={(e) => { 9 e.stopPropagation(); 10 e.preventDefault(); 11 }} 12 onTouchStart={(e) => { 13 e.stopPropagation(); 14 e.preventDefault(); 15 }} 16 > 17 <Timeline 18 groups={groups} 19 items={items} 20 defaultTimeStart={moment().add(-12, 'hour')} 21 defaultTimeEnd={moment().add(12, 'hour')} 22 /> 23 </div> 24 25 </div>, 26 document.getElementById('root'));
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/25 18:32
2019/06/26 06:45
2019/06/30 09:14 編集
2019/06/30 10:10