スイッチング効果を平準化するために、最初の画面と2番目の画面の間にスクロールするマウスホイールを作りたかったのです。私は多くの問題に遭遇しました。その後、KKの助けを借りて、私はついにこの問題を解決しました。私はとても幸せだったので、私はそれを録音しました:
私の最初のコードは次のようになります:
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"/> <style> div {width:700px; height:1000px;}。red {background-color:red;}。yellow {background-color:Yellow;} </div> <div> </div> <div> </div> <div> </div> </body> <script src = "../ jquery/jquery.min.js"> </script> <script src = "test.js"> </script> </html> $(document).ready(function(){var height = $(window).height(); //ブラウザウィンドウで現在見える領域のサイズを取得します。 window.event; if((e.wheeldelta <0 || e.detail> 0)&& scrolltop> = 0 && scrolltop <height){//別のブラウザー$(document.body)。 if((e.wheeldelta> 0 || e.detail <0)&& scrolltop> = height && scrolltop <= height+20){//異なるブラウザー$(document.body).anime({scrolltop:0}、 "fast"); $(document.documentelement).Animate({scrolltop:0;イベントif(document.addeventlistener){document.addeventlistener( 'dommousescroll'、scrollfunc、false);} window.onmousewheel = document.onmousewheel = scrollfunc;IEとFirefoxでこのようなコードをテストしましたが、オンマウスホイールイベントは常にGoogleで複数回トリガーされます。これは非常に迷惑なことです。なぜそれが複数回トリガーされるのですか?デバッグ後、マウスをスクロールするたびに、1つの小さなグリッドと1つの小さなグリッドでゆっくりとスクロールするのではなく、常に一度にたくさんスクロールすることがわかりました。これにより、スクロール時にオンマウスホイールイベントが何度もトリガーされ、ScrollFunc関数が呼び出されます。関数のアニメート関数が実行されない場合、それは連続的に呼ばれ、スクロールバーがロールダウンできず、ページがロールアップできません。そこで、上記のJSコードを次のように変更しました。
$(document).ready(function(){var height = $(window).height(); var scrollfunc = function(e){document.onmousewheel = undefined; var scrolltop = document.body.scrolltop || document.documentelement.scrolltop; scrolltop> = 0 && scrolltop <height){$(document.body).anime({scrolltop:height}、 "fast"、 "linear"、function(){document.onmousewheel = scrollfunc;}); $(document.documentelement).anime({scrolltop:height:heightop: "fast" "" fast: "" "fast:heightop:" "" fast: "" scrollfunc;});} else if((e.wheeldelta> 0 || e.detail <0)&& scrolltop> = height && scrolltop <= height+20){$(document.body)。 scrollfunc;}); $(document.documentlement).animate({scrolltop:0}、 "fast"、 "linear"、function(){document.onmousewheel = scrollfunc;});}}; if(document.addeventlistener){document.addeventListener( 'dommouseScroll'、scrollfunc、false);} document.onmousewheel = scrollfunc;});OK、コードは現在正常に機能していますが、私は初心者であり、コードは十分に記述されていないので、KKから再び言われました。彼のプロンプトで、私は冗長コードを変更しました:
$(document).ready(function(){var height = $(window).height(); var width = $(windo).width(); var body; if(navigator.useragent.indexof( "firefox")> 0 || navigator.useragent.indexof( "msie")> 0) isfinish = true; var scrollfunc = function(e){if(isfinish){var scrolltop = body.scrolltop; e = e || if((e.wheeldelta <0 || e.detail> 0)&& scrolltop> = 0&&scroltop <heigh(heigh) || e.detail <0)&& scrolltop> = height && scrolltop <= height+20){scroll(0);}}}}} {height){isfinish = false; $(body).anime({scrolltop:height}、 "fast"、 "linear" true;});}; if(navigator.useragent.indexof( "firefox")> 0){if(document.addeventlistener){document.addeventlistener( 'dommouseScroll'、scrollfunc、false);}}}}最後に、紹介のコードを取得しました。私はこの問題を解決することで多くのことを学んだと言わざるを得ません。将来、私たちは「書くことを減らし、もっとやる」という目標に向かって一生懸命働かなければなりません! ! !
執筆に何か問題がある場合は、すべてのマスターからアドバイスをお願いします。謙虚に学びます。