使っています反応スワイプ可能なビューdiv
私のプロジェクトでは、タッチ スワイプ イベントを有効にします。内にある異なる 間をスワイプできます<SwipeableViews/>
。 3 つの異なる div があり、そのうちの最初の div には画像のリストがあります。残りの 2 つの div には何もありません。
export default class Photos extends React.Component {
render() {
const styles = {
slide: {
padding: '15px',
minHeight: '500px',
color: '#fff',
},
slide1: {
background: '#FEA900',
overflowY: 'hidden'
},
slide2: {
background: '#B3DC4A',
},
slide3: {
background: '#6AC0FF',
}
}
return(
<div id="profile_photos">
<div id="profile_photos_nav">
<span class="photo_nav" id="photo_timeline">
<button class="active_btn">Timeline Photos</button>
</span>
<span class="photo_nav" id="photo_profile">
<button>Profile Photos</button>
</span>
<span class="clear_both"></span>
</div>
<SwipeableViews>
<div style={Object.assign({}, styles.slide, styles.slide1)}>
<img src="img/img3.jpg"/>
<img src="img/img5.jpg"/>
<img src="img/img6.jpg"/>
<img src="img/img7.jpg"/>
</div>
<div style={Object.assign({}, styles.slide, styles.slide2)}>
slide n°2
</div>
<div style={Object.assign({}, styles.slide, styles.slide3)}>
slide n°3
</div>
</SwipeableViews>
</div>
);
}
}
ただし、slide2
との間をスワイプするのは非常にスムーズです。しかし、とslide3
の間をスワイプすると、少しぎくしゃくしてスムーズではありません。Chrome コンソールで確認すると、次のエラーが表示されます。slide1
slide2
スクロールのスムーズさを向上させるために、長時間実行されるタイマー タスクを延期しました。crbug.com/574343 を参照してください。
:3000/#/プロフィール/写真?_k=4qkf5g:1
1 番目の div から画像を削除すると、再び非常にスムーズに動作するようになります。1 番目の div に画像がある状態で、1 番目の div と 2 番目の div 間のスワイプをスムーズにするにはどうすればよいでしょうか。助けてください。
ベストアンサー1
要素が移動する可能性があることをブラウザに伝えるために、CSS プロパティ「will-change」を試してみる価値があるかもしれません。