0

人気のある jQuery scrollTo / localScrollプラグインを使用して、ウィンドウをさまざまなアンカー タグに自動的にスクロールする単一ページ ナビゲーション システムを作成しています。問題なく動作していますが、アニメーションをキューに入れるのを防ぐのに問題があります。

アンカーポイントにスキップするために使用している「main_nav」のIDを持つ順序付けられていないリストがあります。

<ul id="main_nav"> 
  <li><a href="#one">One<a> </li> 
  <li><a href="#two">Two</a></li> 
  <li><a href="#three">Three</a> </li> 
  <li><a href="#four">Four</a> </li> 
</ul>

関数を呼び出すとき、jquery stop() 関数を介して現在キューに入れられているアニメーションをクリアすることになっている「stop」というパラメーターがあります。パラメータはプラグインでデフォルトで「true」に設定されていますが、とにかく指定しました。また、プラグインは、スクロールのターゲットとしてウィンドウを参照するようにデフォルト設定されています。私は次のように関数を呼び出しています:

$(document).ready(function() {
  $('#main_nav').localScroll({
    duration:2000,
    stop:true
  });
});

これは機能しますが、「停止」パラメーターは無視されます... 4 つのリンクすべてをすばやく連続してクリックすると、ページが各リンクに次々とスクロールし、合計 8 秒かかります。理想的ではありません！ページ全体をコンテナー div でラップする場合、高さを指定して、overflow:scroll; に設定します。この div を localScroll 関数でターゲットにすると、stop パラメータが機能します。たとえば、次のように呼び出されると、アニメーションのキューイングはなくなります。

$(document).ready(function() {
  $('#main_nav').localScroll({
    target: $('#container'),
    duration:2000,
    stop:true
  });
});

スクロールするターゲットとしてプラグインが div を参照する場合、jquery stop() 関数を実行できるようですが、ターゲットが「window」に設定されている場合、停止関数は機能しません。

ウィンドウオブジェクト用のjQueryラッパーを作成し、それを次のようにターゲットとして参照しようとしました:

$(document).ready(function() {
  $('#main_nav').localScroll({
    target: $('window'),
    duration:2000,
    stop:true
  });
});

...しかし、これも機能しません。プラグイン自体のデフォルト値は次のとおりです。

$localScroll.defaults = {
  duration:1000, // How long to animate.
  axis:'y', // Which of top and left should be modified.
  event:'click', // On which event to react.
  stop:true, // Avoid queuing animations 
  target: window, // What to scroll (selector or element). The whole window by default.
  reset: true // Used by $.localScroll.hash. If true, elements' scroll is resetted before actual scrolling
};

アニメーションのキューイングを停止する方法について誰かアイデアがありますか?

私が使用している：jQuery 1.6.1、scrollTo 1.4.2、localScroll 1.2.7

4

2 に答える 2

0

I FOUND IT!

I don't know why byt object window can't be animated! In console:

$(window).animate({ scrollTop: 110}, 1000);
TypeError
$('body').animate({ scrollTop: 110}, 1000);
[
<body>​…​&lt;/body>​

To solve the problem just simply change target to body

target: $('body')

and this is it :)

于 2011-08-15T09:32:05.597 に答える
0

やってみた

  $('.menu, .up, #send, #ok').localScroll({
    duration: 1800,
    stop: true,
    hash: true,
    onBefore: function(e, elem, $target) { // this = settings
      $target.stop();
    }
  });

しかし、これも機能しません

..それでは、これはjQueryバージョンの問題である可能性があると思います（scrollToと残りは2009年のものです）ので、jquery 1.2.6に戻りましたが、まだ何もありません。これは、scrollToプラグインの問題である可能性があります。

今私はだけを使用して独自のscrollToプラグインを書こうとします.animate()

于 2011-08-15T08:56:29.440 に答える