2

HTML5/CSS、Asynch で作成したインスタント チャット プログラムがあります。Javascript と PHP。divユーザーの利便性のために、ユーザーのチャット ボックスが一番下までスクロールされていることを常に確認する間隔があります。これは、ユーザーが前のメッセージを表示するために上にスクロールしたいときに問題になったのでonscroll、間隔を停止するイベントを試みました。私はこれを機能させることができなかったのでonmouseover、onmouseoutイベントを使用して間隔を開始および停止することで、より長い道のりを歩んできました。

デスクトップ コンピューターにはマウスが表示されるため、これは問題なく機能します。ただし、プログラムが主に設計されているWindows phoneなどのモバイルデバイスの場合、最初にメッセージボックスをタップする必要があるため(おそらく最初に非表示のモバイルマウスをチャットボックスに移動するため)、次にスクロールする必要があるため、問題があります影響を受けずにスクロールする指の動き。

これは、モバイル ユーザーに最初にタップしてからスクロールするように伝えることができるため、大きな問題ではありませんが、イベントをうまく使用するonscrollと、デスクトップ ユーザーとの使いやすさが一致すると思います。

onscrollイベントに関する既知の問題はありますか? 私はJSイベントに精通しており、それらを適切に使用できるとあえて言いますが、FFまたはIEでうまく機能していないイベントはこれだけです。

考えや助けをいただければ幸いです、リー。

scrollcheck のオン/オフを管理する現在のイベントは次のとおりです。ScrollCheck() はスクロール位置をチェックし、一番下にない場合は移動する関数であり、scrollInterval は間隔の ID を保持するグローバル変数です。

document.getElementById('messages').onmouseover = function()
{
    clearInterval(scrollInterval);
}

document.getElementById('messages').onmouseout = function()
{
    scrollInterval = setInterval(ScrollCheck, 300);
}

私は単にonmouseoverイベントをonscroll運のないものに置き換えました。

4

1 に答える 1

4

チャット ページを作成するときは、新しいメッセージが追加されたときだけスクロールを確認します。

var currentScroll = elem.scrollTop, oldmaxScroll = elem.scrollHeight-elem.clientHeight;
// add new message(s) here
var newmaxScroll = elem.scrollHeight-elem.clientHeight;
if( currentScroll == oldmaxScroll) elem.scrollTop = newmaxScroll;
于 2012-09-05T15:30:08.753 に答える