携帯端末の画面をスクロールしてタッチすると、別のアンカーに直接触れることを避ける方法を教えてください。

私はhybirdモバイルアプリケーションを開発する際に問題があります。モバイルデバイスの画面をスクロールしてタッチすると、別のアンカーにリダイレクトされないようにする方法を知りたいですか？携帯端末の画面をスクロールしてタッチすると、別のアンカーに直接触れることを避ける方法を教えてください。

たとえば、私は非常に多くのタグを持ち、非常に大きな高さ属性を持つページを持っているので、ページはスクロールします。しかし、ページがスクロールしているとき、単にページのスクロールを止めて、コンテンツには、私は画面に触れる。しかし、予期せずにタグのアンカーをトリガーしたので、別のアンカーにリダイレクトする。私は悪いユーザーエクスペリエンスを望んでいない、私は画面をタッチすると、、私は別のアンカーを得ることができるタグをクリックします。

私はまた、質問をより理解しやすくするための簡単なjsfidleを持っています。

https://jsfiddle.net/6h57hwwf/

その

<body> 
<div> 
<a href="http://www.google.com">www.google.com</a> 
</div> 
<div> 
<a href="http://www.bing.com">www.facebook.com</a> 
</div> 
<div> 
<a href="http://www.google.com">www.google.com</a> 
</div> 
<div> 
<a href="http://www.bing.com">www.facebook.com</a> 
</div> 
<div> 
<a href="http://www.google.com">www.google.com</a> 
</div> 
<div> 
<a href="http://www.bing.com">www.facebook.com</a> 
</div> 
<div> 
</html>

出典

2017-05-21 zhang olve

モバイルデバイスでこれをテストしましたか？タッチするまで、または手動でスクロールする必要があるまで、画面は自動スクロールしていますか？ –

はい、私は携帯電話でテストしましたが、実際に問題があります。手ですばやくスクロールすると、ページのコンテンツは約3秒間スクロールし続けます。画面にもう一度触れると、画面の内容はスクロールしなくなりますが、タグがあると通常は別の場所にリダイレクトされます。 –

あなたはどの電話を使用していますか？ iPhone 6であなたのフィドルをテストしたところ、ブラウザでスクロールすると、画面に触れてスクロールを止めることができます。しかし、本当にURLやタグを押す場合は、もう一度画面を押す必要があります。 –

のためのいくつかのコアコードはここにかかわらず、根本的なブラウザの一つの解決策だ：アンカーのどれをレンダリングしない、スクロール時に容器全体を覆う透明な要素を追加スクロールが停止してから500ms以内に非表示にすることができます。

const mask = document.getElementById('mask'); 
mask.style.visibility = 'hidden'; 

const showMask =() => { 
if (mask.style.visibility === 'hidden') 
    mask.style.visibility = 'visible'; 
} 

const hideMask =() => { 
    if (mask.style.visibility === 'visible') 
    mask.style.visibility = 'hidden'; 
} 
const debounced = _.debounce(hideMask, 1000); 
window.addEventListener('scroll', e => { 
showMask(); 
debounced(); 
});

https://jsfiddle.net/8bz7dd7p/1/

Iは例示のためのマスクの色を追加注意、また、マスクを非表示にする機能がデバウンスされるべきです。

出典

2017-05-21 11:33:41 Sheng

携帯端末の画面をスクロールしてタッチすると、別のアンカーに直接触れることを避ける方法を教えてください。

答えて

関連する問題