0

スクロールイベントをキャプチャする他のすべての手段を有効にしたまま、スクロールバーのドラッグを無効にしたいと考えています。

スクロールバーでマウスダウン イベントをキャプチャする手段も十分です (そのトピックのほとんどのテキストは、不可能を示しています)。問題を解決するために外部ライブラリを使用したくありません。以下に説明する問題を解決するための他の手段は大歓迎です。

このソリューションは、現在のバージョンの Google Chrome でのみ機能する必要があります。

    document.getElementById('mainTable').parentNode.addEventListener("scroll",function(e){
        ...

        //Other code logic and syntax omitted

        ...
        //Logic for deriving if scrolling up or down is accomplished by comparing
        //the previously recorded .scrollTop value to the current value of the div 
        //containing the table 'mainTable' of datapoints
        if(scrollDownEvent){
           document.getElementById("mainTable").parentNode.scrollTo(0,.75*totHeight);
        }else if(scrollUpEvent){
           document.getElementById("mainTable").parentNode.scrollTo(0,.25*totHeight);
        }else{

        }
    }

背景 いくつかの非常に簡単な背景情報。各ポイントに大量のデータを含む数百万のデータ ポイントがあります。

200 個のデータ ポイントを html の table/tr/td セットアップに読み込みます。オブジェクトの javascript 配列に 400 個のデータ ポイントをキャッシュします (任意の時点で上下に約 100 個)。

ユーザーが下にスクロールしたときに、表示されているデータポイントの端がキャッシュされたデータ ポイントの端に近づくと、より多くのポイントがハードドライブからキャッシュに読み込まれます (html5 ファイル システム API 経由)。スクロール イベント属性の状態がどれだけ下にスクロールされたかに応じて、テーブルの反対側の端からいくつのデータ ポイントが削除され、新しいデータ ポイントがテーブルのターゲット エッジにロードされるかが定義されます。スクロール イベントを処理した後、テーブルの高さの 25% またはテーブルの 75% までスクロールします。

私が直面している問題は、スクロール イベントがスクロール バーのドラッグと他のスクロール イベントの手段とでは異なる方法で発生するように見えることです。スクロールバーのドラッグイベントをスクロールイベントとしてキャプチャしていますが、スクロールバーを一番下までドラッグすると（コードは完全に下にドラッグしないと機能します）、何らかの形で上書きするように見えることがあります上にスクロールするための私のJavaScriptコード - その結果、下にスクロールできなくなり、スクロールイベントを発生させることができなくなります。

以下からキャプチャされたスクロール イベントに問題はありません。

  • マウスホイールの移動
  • 上下の矢印をマウスでクリック
  • スクロールバーに相対的な上部/下部領域でのマウス クリック
  • スクロールバーに相対的な上部/下部領域でのマウスダウン。
  • 上下矢印ボタンでのマウスダウン
  • キーボードの上/下矢印のキーダウン
4

1 に答える 1

0

私は独自のスクロールバーを作成することにはなりませんでした。また、外部のスクロールバー ライブラリも使用しませんでした。スクロールバーのサムの位置を計算し、マウスの位置を追跡して、スクローラーがロックアップする原因となっていたスクローラーの上限/下限を処理することで、問題を解決しました。

マウス オーバー スクロール バーのサム コード

いくつかの要素に mousemove イベントを追加しました。スクロールバーの物理的な位置と幅を計算しました。マウスがそれらの場所に移動すると、マウスオーバー イベントを適切に処理しました。mainTable の親の高さを見て、それを mainTable の高さと比較することで、thumar 自体の高さを計算することもできました。scrollTop を見て、thumar の位置を計算することができました。

document.getElementById("mainTable").parentNode.addEventListener("mousemove", function(e){
    var mainTab = document.getElementById("mainTable");
    if(mainTab.offsetWidth <= e.offsetX){
        var scrollbarHeight = mainTab.parentNode.offsetHeight - 36; //36 =height of up and down arrows
        var scrollbarThumbHeight = (scrollbarHeight/mainTab.offsetHeight)*scrollbarHeight;
        var childScrollTop = mainTab.parentNode.scrollTop
        var relativeThumbPosition = (childScrollTop/mainTab.offsetHeight) + 18; // 18=height of up arrow
        if(e.offsetY >= relativeThumbPosition && e.offsetY <= relativeThumbPosition+scrollbarThumbHeight){
            console.log("mouse-move thumbar:\t" + e.which);
            //execute specific mouse over code here
        }else{
            //execute any non-mouse over specific code here
        }
    }
})

次の方法で最終的に問題が解決しました

スクロールバーのサムが下部または上部にスタック - 処理
これはmousemoveドキュメント本文のイベント リスナー内にあります

おそらくこれを行うには、イベントリスナーを追加および削除するというより良い方法があります（必要な場合にのみ実行します）。しかし、私はリスナーを追加し、常にチェックしました。より効率的です。スクロール位置がスクロールバー トラックの上部または下部に固定されているかどうかを確認します。そうであれば、無限スクロールバーを適切に処理します。

var mainTab = document.getElementById("mainTable");
if(mainTab.parentNode.scrollTop == 0){
    if(cnTable.buffStart != 0){
        upEvent(27);
    }else if (cnTable.tableStart != 0){
        upEvent(27);
    }
}else if(mainTab.parentNode.scrollTop + mainTab.parentNode.offsetHeight >= totHeight ){
    if(cnTable.buffStop < cnDAO.currentIndexes.length -1){
        downEvent(27);
    }else if (cnTable.tableStop < cnTable.buffer.length-1){
        downEvent(27);
    }
}

upEvent最後に、および内にあるスクロール位置を設定するためのdownEvent
コード 次のコードは、上記の問題のコードとほぼ同じです。

上記のように、位置を処理しました。次のコードは、位置を変更するために使用したものです。位置の計算にはさらに多くのコードがありますが、一般的なケースのみを示すことにしました (すべての行がすべてであるわけではありません)。同じ高さなので、上下のイベントに表示されていないコードで適切に調整する必要がありました)

var totHeight = document.getElementById("mainTable").offsetHeight -1;
document.getElementById("mainTable").parentNode.scrollTo(0,.24*totHeight);

と

var totHeight = document.getElementById("mainTable").offsetHeight -1;
document.getElementById("mainTable").parentNode.scrollTo(0,.76*totHeight);
于 2013-12-20T16:14:17.093 に答える