0

注:非常によく似た質問が寄せられていることは承知していますが、モバイル Web は新しく不安定なため、数年前の議論は時代遅れになっている可能性があります。

<div>Androidブラウザーで単純なスクロールを作成しようとしています。これは、固定サイズとoverflow-y: auto準拠ブラウザーで行うことで実現できます。残念ながら、モバイル Webkit ブラウザーはその属性をサポートしていないようです。この機能または同等のものを他にどのように作成できますか?

可能であれば、CSS ソリューションを希望します。JavaScript ウィジェットのiScrollとDojo Mobile のリストを見たことがありますが、これらは私がやろうとしていることに対してやり過ぎのように思えます。iScroll ページには、「最新の Android リビジョンはこの機能をサポートしています (ただし、サポートは最適ではありません)」と記載されているので、Android 4.0 でこの問題が修正されたのではないかと思います。

4

1 に答える 1

1

標準のタッチ イベントを使用して、多くの異なるデバイスで効果を上げてきました。重いプラグインではなく単純な解決策である場合はtouchstart touchmove、touchendイベント top を使用して動きを計算し、scrollTop を変更します。

デバイス間で標準的な CSS の方法を見つけることができませんでしたが、Webkit には独自のものがある可能性があります。

PS これは過去 3 か月間のものです。

[アップデート]

これらのイベントは他のイベントと同じように使用できます。

var startX = 0;
var startY = 0;
var ele = document.getElementById('myScrollableDiv');
ele.addEventListener('touchstart', function(ev){
    startX = ev.screenX;
    startY = ev.screenY;
});

ele.document.getElementById('myScrollableDiv').addEventListener('touchmove', function(ev){
    movementX = startX - ev.screenX;
    movementY = startY - ev.screenY;
    ele.style.scrollLeft = ele.style.scrollLeft + movementX;
    ele.style.scrollTop = ele.style.scrollTop + movementY;
    ev.preventDefault();
});

これは完全にメモリからのものであるため、現時点では実行できないテストが必要であり、その時点で使用したコードも持っていません (ただし、それは jQuery でした)。この方法は最終的にうまく機能しますが、解決すべき点がいくつかあります。うまくいけば、それがあなたが仕事をするのに十分な要点です.

于 2012-04-05T15:26:04.783 に答える