2015-05-27 88 views
1

我正在寫一個代碼,它激活了100%body.height的滾動。一切工作正常,但我試圖禁用滾動,而動畫最後,以防止進一步不需要的行爲。 我使用這個代碼在滾動時禁用滾動

function animate(x) { 
    var start = new Date(); 
    var id = setInterval(function (e) { 

     var timepassed = new Date() - start; 
     var progress = timepassed/x.duration; 
     if (progress > 1) { 
      progress = 1; 
     } 
     var delta = x.delta(progress); 
     x.step(delta); 
     if (progress == 1) { 
      clearInterval(id); 

     } 

    }, x.delay); 


} 

function fak(e) { 
    e.preventDefault(); 
    return false; 
} 

function move(e) { 
    e.preventDefault(); 
    var wheel = e.wheelDelta; 
    wheel = (wheel == 120) ? "-1" : "1"; 
    var body_height = document.body.offsetHeight; 
    var scrollIt = body_height * wheel; 
    var page = window.pageYOffset; 
    animate({ 
     delay: 10, 
     duration: 700, 
     delta: function (p) { 
      return p; 
     }, 
     step: function (delta) { 
      window.scrollTo(0, page + (delta * scrollIt)); 
     } 
    }); 
    return false; 
} 
document.body.addEventListener("mousewheel", move, false); 
document.body.addEventListener("DOMMouseScroll", move, false); 

我試圖分配功能FAK,在鼠標滾輪,mousescroll區間,然後原來的分配新建分配FY在年底使用

function animate(x) { 
    var start = new Date(); 
    var id = setInterval(function (e) { 
    document.body.addEventListener("mousewheel", fak, false); 
    document.body.addEventListener("DOMMouseScroll", fak, false); 
     var timepassed = new Date() - start; 
     var progress = timepassed/x.duration; 
     if (progress > 1) { 
      progress = 1; 
     } 
     var delta = x.delta(progress); 
     x.step(delta); 
     if (progress == 1) { 
      clearInterval(id); 
    document.body.addEventListener("mousewheel", move, false); 
    document.body.addEventListener("DOMMouseScroll", move, false); 

     } 

    }, x.delay); 


} 

但沒有工作或者恢復到它們。現場演示:http://jsfiddle.net/Trolstover/o2pvo2t8/我忽略了什麼?

+0

我無法伸展,經常不夠。使用調試輸出。一行代碼'console.log(wheel);'你知道答案。 '輪子'是未定義的。 – cari

+0

車輪不是未定義的,並且滾動工作正常,我想要做的是在動畫正在進行時禁用滾動。 – Darlyn

+1

如果你在'var wheel = e.wheelDelta;'之後插入'console.log(wheel);',你可以看到,那個輪子是未定義的... http://jsfiddle.net/o2pvo2t8/1/ – cari

回答

2

我改變了一下你的代碼。

http://jsfiddle.net/o2pvo2t8/2/

只是設置一個標誌,「運行」,而滾動(在動畫的開始()),並在年底將其清除。 並僅在沒有滾動出現時執行mov。

希望它幫助。

var running; 

function animate(x) { 
    running = 1; 
    var start = new Date(); 
    var id = setInterval(function (e) { 

     var timepassed = new Date() - start; 
     var progress = timepassed/x.duration; 
     if (progress > 1) { 
      progress = 1; 
     } 
     var delta = x.delta(progress); 
     x.step(delta); 
     if (progress == 1) { 
      clearInterval(id); 
      running = 0; 
     } 

    }, x.delay); 


} 

function fak(e) { 
    e.preventDefault(); 
    return false; 
} 

function move(e) { 
    e.preventDefault(); 
    if (running==1) return; 
    var wheel = e.wheelDelta; 
    console.log(wheel); 
    wheel = (wheel == 120) ? "-1" : "1"; 
    var body_height = document.body.offsetHeight; 
    var scrollIt = body_height * wheel; 
    var page = window.pageYOffset; 
    animate({ 
     delay: 10, 
     duration: 700, 
     delta: function (p) { 
      return p; 
     }, 
     step: function (delta) { 
      window.scrollTo(0, page + (delta * scrollIt)); 
     } 
    }); 
    return false; 
} 
document.body.addEventListener("mousewheel", move, false); 
document.body.addEventListener("DOMMouseScroll", move, false); 
+0

謝謝,不能相信,解決方案是如此簡單:/ – Darlyn