1

ここでは、次のコードに tinyscrollbar を使用しました。だからここでtinyscrollbarのスクロールイベントを書きますが、うまくいきません。手伝って頂けますか ？

<div id="scrollbar1" class="scrollBox">
  <div class="scrollbar">
    <div class="track">
      <div class="thumb">
        <div class="end"></div>
      </div>
    </div>
  </div>
  <div class="viewport">
    <div class="overview">
    gula id tortor ornare luctus. Integer placerat urna non ligula sollicitudin vestibulum. Nunc vestibulum auctor massa, at varius nibh scelerisque eget. Aliquam convallis,
        </div>
              </div>
                </div>

例を参照してくださいhttp://jsfiddle.net/rushijogle/7u377/7/

 $("#scrollbar1 .viewport").scroll(function(){

  alert("Scroller is scrolling :")

     });

上記の機能が機能していません... adavcneに感謝します:)

4

3 に答える 3

0

たぶん、より期待される動作のために：

デモ

$('#scrollbar1').on('mousemove mouseup mousewheel DOMMouseScroll touchmove touchend', function (e) {
    if ($('body').is('.noSelect') || ((e.type === "mouseup" || e.type === "touchend") && $(e.target).closest('.scrollbar').length)) {
        console.log("Scroller is scrolling :");
    }
});
于 2013-12-09T12:38:20.157 に答える
0

問題は、tinyscrollbar プラグインが実際には「スクロール」していないことです。実際には.overviewコンテナの位置を設定しています。したがって、30 ピクセル上にスクロールすると、次のような css プロパティが生成されますstyle="top:-30px"。

スクロール イベントが登録されていません。残念ながら、プラグインはコールバックを提供しないため、スクロール時に通知されます。

スクロール アクションがあったかどうかをテストし、関数を呼び出す回避策を作成しました。これにより、ユーザーがマウスホイール、トラックパッド、矢印キー、またはスクロールバーをクリックしてスクロールした場合でも同じ結果が得られ、ユーザーがスクロールバーをクリックしただけで実際にはスクロールしない場合はイベントが発生しません。

コードは次のとおりです。

$('#scrollbar1').tinyscrollbar();

// onScroll test function
$.onScroll = function(scrollbar, callback){
    scrollbar = $(".overview", scrollbar);
    var top = scrollbar.css("top");

    setInterval(function(){
       var now = scrollbar.css("top");
       if(now !== top) callback();
       top=now;
    }, 100);   
}

// In use
$.onScroll($("#scrollbar1"), function(){
    console.log("Scroller is scrolling :")
})

そして、ここにフィドルがあります：http://jsfiddle.net/2gc6H/

すべてのスクロール イベントがコンソールに表示されることに注意してください。

于 2013-12-09T12:38:25.250 に答える