1

我想我一定犯了一些我一直忽略的业余错误，但我似乎无法弄清楚。

我正在制作一个单页平滑滚动网站。如果您滚动，浏览器会检测到方向，然后将您滚动到相应的 div。但是，当我滚动时，每次都会传递一个不正确的页码。

这是相关的javacript代码：

var mousewheelevt;
var wheeldirection;
var wheeldirectiontype;
function ScrollToPage(pageNumber, directionNumber, directionNumberType) {
    console.log('pageNumber: ' + pageNumber);
    var direction;
    var newPageNumber;
    var directionType; //0=up, 1=down
    console.log('directionNumberType: ' + directionNumberType);
    console.log('directionNumber: ' + directionNumber);
    if (directionNumberType == 0){
        //non ff
        if (directionNumber > 0) {
            directionType = 0; //up
        } else {
            directionType = 1; //down
        }
    } else {
        //ff
        if (directionNumber < 0) {
            directionType = 0; //up
        } else {
            directionType = 1; //down
        }
    }
    console.log('directionType: ' + directionType);
    console.log('pageNumber: ' + pageNumber);
    if (directionType == 0) {
        direction = 'up';
        if(pageNumber > 1) {
            newPageNumber = pageNumber - 1;
        } else {
            newPageNumber = 1
        }
    } else {
        direction = 'down';
        if(pageNumber < 5) {
            newPageNumber = pageNumber + 1;
        } else {
            newPageNumber = 5;
        }
    }
    $.scrollTo( $('#Page_' + newPageNumber), 800);
    console.log(direction + ' - ' + newPageNumber);
}
$(document).ready(function() {
    var y;
    if(/Firefox/i.test(navigator.userAgent)) {
        mousewheelevt = "DOMMouseScroll";
        wheeldirectiontype = 1;
    } else {
        mousewheelevt = "mousewheel";   //FF doesn't recognize mousewheel as of FF3.x  
        wheeldirectiontype = 0;
    }   
    for (y = 1; y <= 5; y++) {
        console.log(y);
        if (document.attachEvent) {//if IE (and Opera depending on user setting)  
            if(wheeldirectiontype == 0) {
                document.getElementById('Page_' + y).attachEvent("on"+mousewheelevt, function(e){ScrollToPage(y, w.wheelDelta, wheeldirectiontype)});
            } else {
            document.getElementById('Page_' + y).attachEvent("on"+mousewheelevt, function(e){ScrollToPage(y, e.detail, wheeldirectiontype)});
            }
        } else if (document.addEventListener) {//WC3 browsers  
            if(wheeldirectiontype == 0) {
                document.getElementById('Page_' + y).addEventListener(mousewheelevt, function(e){ScrollToPage(y, e.wheelDelta, wheeldirectiontype)}, false); 
            } else {
                document.getElementById('Page_' + y).addEventListener(mousewheelevt, function(e){ScrollToPage(y, e.detail, wheeldirectiontype)}, false);
            }
        }
        console.log(y);
        $("#Page_" + y).wipetouch({
            wipeUp: function(result) {ScrollToPage(y,1,0);},
            wipeDown: function(result) {ScrollToPage(y,0,0);}
        });
    }
});

这是html：

<body>
<div id="Page_1" class="Landscape">
            Ankerrui 2
</div>
<div id="Page_2" class="Landscape">
            Voorwoord
</div>
<div id="Page_3" class="Landscape">
            Beschrijving
</div>
<div id="Page_4" class="Landscape">
            In de buurt
</div>
<div id="Page_5" class="Landscape">
            Foto's
</div>
</body>

该页面在第一页上加载，当我向下滚动时，它滚动到底部页面，控制台显示 6 作为 pageNumber。当我向上滚动时，它停留在最后一页，控制台也显示 6 作为 pageNumber。如果 pageNumber 实际上是 6，这是正确的，但它应该分别是 1 和 5。控制台确实显示了用于添加 attachEvents 的 y 变量的正确值，所以我在这里有点无能为力。

4

0 回答 0