2014-11-03 29 views
0

這應該證明問題。它只發生在FF中。 Chrome按預期行事。在Firefox上設置scrollTop導致反彈

我想要做的(參考下面的jsfiddle)停止滾動藍色部分,當底部與紅色部分的底部齊平時。在FF上會有輕微的延遲,然後反彈。

function adjustPosition() { 
    var padding = $(window).height() - (checkoutBtn().offset().top - $(window).scrollTop() + checkoutBtn().height()); 
    $(window).scrollTop(menuBox().height() - $(window).height() + menuBox().offset().top + padding); 
} 

function needsPositioned(wheelDelta) { 
    return ((checkoutBtn().offset().top + checkoutBtn().height() + 10) >= (menuBox().offset().top + menuBox().height())) && wheelDelta < 0 
} 

function checkScrollPosition($event) { 
    var wheelDelta = ($event.wheelDelta || ($event.detail*-1)); 
    if (needsPositioned(wheelDelta)) { 
     db_adjustPosition($event); 
     $event.preventDefault(); 
     $event.returnValue = false; 
     return false; 
    } 
    return true; 
} 

function adjustHeight($event) { 
    if ($event && ($event.type === 'mousewheel' || $event.type === 'DOMMouseScroll' || $event.type === 'resize')) { 
     if (!checkScrollPosition($event)) { 
      return false; 
     } 
    } 
} 

http://jsfiddle.net/martyphee/pu1qncaL/3/

更新: 我似乎已經找到了問題。這是與OSX慣性設置。一旦我把它關掉,反彈就會消失。任何想法如何打擊?

回答

0

你可以使身體100%身高並禁用滾動。之後,您可以在允許滾動的主體內創建一個div。這將禁用動量滾動/反彈效果。

在文檔滾動做:

event.stopPropagation(); 

https://api.jquery.com/event.stopPropagation/

也許不需要JS,嘗試對身體標記這個CSS代碼:

-webkit-overflow-scrolling: none;