アクティブなページと問題が来ました(スクロールジッタ)

html 5とcss 3の成熟に伴い、ページの展示はますますきらびやかになり、特に各サイトの特別テーマ活動に現れている.今は簡略な枠を書いた.
実現思想:スクロールバーがスクロールすると、スクロール下部が次の画面に切り替えられ、上部にスクロールすると前の画面に切り替わる.ボタンをクリックすると、対応する画面にスクロールします.
コードの簡略化:
1、スクロールバーのスクロール方向、-1を下に、1を上に、注意:ieを使う場合は、ie 9以上のブラウザで効果を見てください.

document.addEventListener(mousewheel,function(e){
    e = e || window.event;
    if(!isFirefox){
        direct = e.wheelDelta>0?-1:1;
    }
    else{
        direct = e.detail<0?-1:1;
    }
},false);

2、その画面にスクロール

$(document).scroll(function(){
    rollH = $(this).scrollTop();
    if(islock){
        if((rollH===docH-winH) && (direct === 1 )){
            num++;
            if(num>5){
                num = 5;
                return;
            }
            if(!((num===5)||(num===0))){
                islock = false;
            }
            running(num);
        }
        else if((rollH ===0)&&(direct === -1)){
            num--;
            if(num<0){
                num = 0;
                return;
            }
            if(!((num===5)||(num===0))){
                islock = false;
            }
            running(num);
        }
    }
});

3、スクロールを切り替え、切り替えた時点でスクロールバーを非表示にし、終了後に表示します.第1のスクリーンを除いて、他のスクリーンは先端から1 pxの距離があります.

var islock = true;
test.animate({"left":"0px","top":"0px"},500,function(){
    $(document).scrollTop(0);
    setTimeout(function(){
        islock=true;
        $(document).scrollTop(1);
        $("body").removeClass("bodyon");
    },500);
});

var num = 0;
var direct = 0;
var islock = true;
var isFirefox =/firefox/ig.test(navigator.userAgent);
var mousewheel = isFirefox?"DOMMouseScroll":"mousewheel";
var docH = $(document).height();
var winH = $(window).height();
var rollH = 0;
var test = $("#test");
function running(num){
$("body").addClass("bodyon");
$(document).scrollTop(0);
$(".mbtns input").removeClass("on").eq(num).addClass("on");
switch(num){
case 0:
test.animate({"left":"0px","top":"0px"},500,function(){$(document).scrollTop(0);setTimeout(function(){islock=true;$(document).scrollTop(1);$("body").removeClass("bodyon");},500);});
break;
case 1:
test.animate({left:"-2000px",top:"-2000px"},500,function(){$(".mem7").addClass("mrun7");setTimeout(function(){islock=true;$(document).scrollTop(1);$("body").removeClass("bodyon");},500);});
break;
case 2:
test.animate({left:"0px",top:"-3000px"},500,function(){$(".mem8").addClass("mrun8");setTimeout(function(){islock=true;$(document).scrollTop(1);$("body").removeClass("bodyon");},500);});
break;
case 3:
test.animate({left:"-1000px",top:"-4000px"},500,function(){setTimeout(function(){islock=true;$(document).scrollTop(1);$("body").removeClass("bodyon");$("body").removeClass("bodyon");},500);});
break;
case 4:
test.animate({left:"-3000px",top:"-5000px"},500,function(){setTimeout(function(){islock=true;$(document).scrollTop(1);$("body").removeClass("bodyon");},500);});
break;
case 5:
test.animate({left:"0px",top:"-6000px"},500,function(){setTimeout(function(){islock=true;$(document).scrollTop(1);$("body").removeClass("bodyon");},500);});
break;
}
}
$(".mbtns input").click(function(){
islock = false;
num = $(this).index();
running(num);
});
document.addEventListener(mousewheel,function(e){
e = e || window.event;
if(!isFirefox){
direct = e.wheelDelta>0?-1:1;
}
else{
direct = e.detail<0?-1:1;
}
},false);
$(window).resize(function(){
docH = $(document).height();
winH = $(window).height();
});
$(document).scroll(function(){
rollH = $(this).scrollTop();
if(islock){
if((rollH===docH-winH) && (direct === 1 )){
num++;
if(num>5){
num = 5;
return;
}
if(!((num===5)||(num===0))){islock = false;}
running(num);
}
else if((rollH ===0)&&(direct === -1)){
num--;
if(num<0){
num = 0;
return;
}
if(!((num===5)||(num===0))){islock = false;}
running(num);
}
}
});



実行コード
 
問題:スクロールバーがスクロールすると、青いブロックが震え、特にie 9とchromeの下で明らかになります.興味のある方は書いてみてくださいねO(∩∩)O












var exmp1_1=$(".exmp1_1"),exmp1_2=$(".exmp1_2");
var exmp2_1=$(".exmp2_1"),exmp2_2=$(".exmp2_2");
$(document).scroll(function(){
var tmp = $(this).scrollTop();
if(tmp<800){
test1(tmp);
}
else if(tmp>800 && tmp <1600){
test2(tmp);
}
});
function test1(m){
exmp1_1.css("top",m+"px");
exmp1_2.css("top",(-m+686)+"px");
}
function test2(m){
exmp2_1.css("top",(m-800)*2+"px");
exmp2_2.css("top",(-m+800+686)+"px");
}



実行コード