1

私は見落とし続けているいくつかのアマチュアの間違いを犯したに違いないと思いますが、私はそれを理解できないようです.

1ページのスムーズスクロールWebサイトを作成しています。スクロールすると、ブラウザーが方向を検出し、適切な 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 が実際には 6 になる場合は正しいですが、それぞれ 1 と 5 である必要があります。コンソールには、attachEvents を追加するために使用される y 変数の正しい値が表示されるため、ここでは少しわかりません。

4

0 に答える 0