如何改善我的滚动功能，驯服灵​​敏度并扭转动作。 Jquery的

Question

你好我创建了一个网站，它围绕滚动来触发加载下一个＆＃34;页面＆＃34;。每个页面都是一个带有类的div，通过向下滚动显示和隐藏它。我想通过上传加载上一节来扭转这种情况。使用USB鼠标，通过稍微转动鼠标滚轮，转换发生时，此过渡非常顺利。然而，在我的笔记本电脑上，跟踪器垫有一个非常敏感的滚动，一次改变多个div。

该网站的链接是：www.alexanderJrichardson.com。

提前谢谢。

这是一些相关的代码：

    $(document).ready(function(){
        $(this).scrollTop(0);
    });
        var currentView = 'Page1';
        var display = $('.' + currentView).css('display');
        if (display == 'block') {
           change('currentView')();
        }
        $(window).scroll(function(){
            if($(window).scrollTop() > 5){
              switch(currentView){
                 case "Page1":
                 changePage1();
                 break;
                 case "Page2":
                 changePage2();
                 break;
                 case "Page3":
                 changePage3();
                 break;
                 case "Page4":
                 changePage4();
                 break;
                 case "Page5":
                 changePage5();
              }
            }
        });

        function changePage5(){
                   setTimeout(function() {          
                   $('.menuDiv').css("display", "none");
                   }, 100);
                   $('.fadeInRight').toggleClass("fadeOutRight").toggleClass("fadeInRight");
                   $('.fadeInLeft').toggleClass("fadeOutLeft").toggleClass("fadeInLeft");
                   $('.fadeInUp').toggleClass("fadeOutUp").toggleClass("fadeInUp");
                   $('.fadeInDown').toggleClass("fadeOutDown").toggleClass("fadeInDown");
                   $('.fadeOutRight').toggleClass("fadeInRight").toggleClass("fadeOutRight");
                   $('.fadeOutLeft').toggleClass("fadeInLeft").toggleClass("fadeOutLeft");
                   $('.fadeOutUp').toggleClass("fadeInUp").toggleClass("fadeOutUp");
                   $('.fadeOutDown').toggleClass("fadeInDown").toggleClass("fadeOutDown");
                   setTimeout(function() {
                   $('.Page1').css("display", "block");
                   }, 100);
                   $('.Page2').css("display", "none");
                   $('.Page3').css("display", "none");
                   $('.Page4').css("display", "none");
                   $('.Page5').css("display", "none");  
                   currentView = "Page1";
       };

Answer 1

如果允许滚动，请使用一些布尔值来确定：

from flask_app import app
from flask import jsonify,abort,make_response,request
from flask.ext.sqlalchemy import SQLAlchemy
from flask.ext.cache import Cache
from datetime import datetime, time

app.config['CACHE_TYPE'] = 'simple'
app.cache = Cache(app)

@app.route('/top', methods=['GET'])
@app.cache.cached(timeout=60)
def top():
    now = datetime.now()
    now_time = now.time()
    if now_time >= time(10,30) and now_time <= time(16,30):
       print "within time, use data save in cache"
       # function that use last data query from url, save in cache
    else:
       page = requests.get('http://www.abvfc.com')
       data = re.findall(r'items:(.*)',page.content)
return jsonify(data)

如果$(window).scroll(function(){ if (!scrollAllowed) { return; } //your scrolling code here scrollAllowed = false; setTimeout(function() { scrollAllowed = true; }, timeout); }); 为100，这将阻止首先滚动0.1秒。 不要使用＆＃34;魔法＆＃34;数字，请使用timeout变量。这将允许未来的aesy变化。此外，请避免使用timeout，我们changePage5()等功能。这更加灵活。

编辑完整代码，以达到理想的效果。

changePage(index)

注意：我不确定它是否适用于所有修改。我不知道你如何运作$(document).ready(function(){ $(this).scrollTop(0); }); //number of pages you have var viewCount = 5; var scrollAllowed = true; var timeout = 100; var currentView = 'Page1'; var display = $('.' + currentView).css('display'); if (display == 'block') { change('currentView')(); } $(window).scroll(function() { if (!scrollAllowed) { return; } if($(window).scrollTop() > 5) { changePage(currentView.substring(4)); } scrollAllowed = false; setTimeout(function() { scrollAllowed = true; }, timeout); }); function changePage(index){ setTimeout(function() { $('.menuDiv').css("display", "none"); }, timeout); $('.fadeInRight').toggleClass("fadeOutRight").toggleClass("fadeInRight"); $('.fadeInLeft').toggleClass("fadeOutLeft").toggleClass("fadeInLeft"); $('.fadeInUp').toggleClass("fadeOutUp").toggleClass("fadeInUp"); $('.fadeInDown').toggleClass("fadeOutDown").toggleClass("fadeInDown"); $('.fadeOutRight').toggleClass("fadeInRight").toggleClass("fadeOutRight"); $('.fadeOutLeft').toggleClass("fadeInLeft").toggleClass("fadeOutLeft"); $('.fadeOutUp').toggleClass("fadeInUp").toggleClass("fadeOutUp"); $('.fadeOutDown').toggleClass("fadeInDown").toggleClass("fadeOutDown"); //this hides all pages for (var i = 1; i <= viewCount; i++) { $(".Page" + i).css("display", "none"); } //choose next page number index++; if (index > viewCount) { //loop from last to first index = 1; } setTimeout(function() { $('.Page' + index).css("display", "block"); }, timeout); currentView = "Page" + index; }; ，所以我假设他们做了同样的事情。如果这不起作用，您可能需要返回使用changePageN