在ms邊上的javascript同步滾動

Question

我使用js來支持Web項目上的滾動。 它工作得很好，除了微軟的邊緣。

在邊緣它首先滾動頁面的內容和一個位後，它執行從我的js滾動。我沒有在滾動功能上使用preventDefault，因爲我不用我的js滾動整個內容。

予製備的JSFiddle其示出了該問題。 我也發現這個問題Lag in scrolling behavior on IE 10 and IE Edge modes它有同樣的問題，但沒有得到答案。這個問題的作者寫了這個JSFiddle作爲例子，這導致了我嘗試它的同樣的問題。

這裏也是我上的jsfiddle製備的樣品：

if($(window).width() >= 300) { 
 

 
\t \t // scroll function 
 
    $(window).scroll(function (e) { 
 

 
\t \t setDefaultOffsets(); 
 

 
     //e.preventDefault(); 
 
     //e.stopPropagation(); 
 
     //e.returnValue = false; 
 

 
     var offset = $(window).scrollTop(); 
 
     localStorage.setItem('scrollTop', offset); 
 

 
     $("#teaser").css({top: (TeaseDefaultTop - offset) + 'px'}); 
 

 
     if ((PreOffset - offset) <= SwitchPos) { 
 
      $('#controlbar').css({top: SwitchPos + 'px'}); 
 
     } else { 
 
      $('#controlbar').css({top: (PreOffset - offset) + 'px'}); 
 

 
     } 
 

 
     return false; 
 
    }); 
 

 
    $(function() { 
 

 
\t \t setDefaultOffsets(); 
 
     var previousOffset = localStorage.getItem('scrollTop'); 
 

 
     if (previousOffset > maxScrollOffset) { 
 
      previousOffset = maxScrollOffset; 
 
     } 
 

 
     if (previousOffset > 100) { 
 
      window.scroll(0, previousOffset); 
 
     } else { 
 
      setTimeout(function() { 
 
       if ($(window).scrollTop() == 0) { 
 
        $('html, body').animate({ 
 
         scrollTop: $('#teaser').offset().top 
 
        }, 1000); 
 
       } 
 
      }, 500); 
 

 
     } 
 
    }); 
 

 
    $(window).scrollTop(0.5) 
 
} 
 

 
function setDefaultOffsets() { 
 
\t // difderent values for the different media querys 
 
\t if($(window).width() > 0) { 
 
\t \t maxScrollOffset = 100; 
 
\t \t TeaseDefaultTop = 101; 
 
\t \t PreOffset = 300; 
 
\t \t SwitchPos = 101; 
 
\t } 
 
}

html, body { 
 
    min-width: 100%; 
 
    min-height: 500%; 
 
} 
 

 
#header { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: lightblue; 
 
    position: fixed; 
 
    top:0px; 
 
    left: 0px; 
 
    z-index: 7; 
 
} 
 

 
#teaser { 
 
    
 
    color: transparent; 
 
    height: 200px; 
 
    width: 100%; 
 
    background-image: url(http://i.imgur.com/NwOWE.jpg); 
 
    background-position: 0px 0px; 
 
    background-repeat: repeat; 
 
    background-size: auto 200px; 
 
    position: fixed; 
 
    top: 101px; 
 
    left: 0px; 
 
    z-index: 3; 
 
    } 
 
    
 
    #controlbar { 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: lightgreen; 
 
    position: fixed; 
 
    top: 252px; 
 
    left: 0px; 
 
    z-index: 5; 
 
    } 
 
    
 
    #content { 
 
    margin-top: 350px; 
 
    } 
 
    
 
    #slogan { 
 
    cursor: pointer; 
 
    background-color: rgba(220, 140, 40, 0.6); 
 
    width: auto; 
 
    display: inline-block; 
 
    position: absolute; 
 
    z-index: 4; 
 
    left: 10%; 
 
    padding: 10px; 
 
    top:200px; 
 
    } 
 
    
 
    #demo1 { 
 
    cursor: pointer; 
 
    background-color: rgba(40, 140, 220, 0.8); 
 
    width: auto; 
 
    display: inline-block; 
 
    position: absolute; 
 
    z-index: 6; 
 
    right: 10%; 
 
    padding: 10px; 
 
    top:300px; 
 
    } 
 
    
 
    #demo2 { 
 
    cursor: pointer; 
 
    background-color: rgba(140, 220, 40, 0.8); 
 
    width: auto; 
 
    display: inline-block; 
 
    position: absolute; 
 
    z-index: 6; 
 
    right: 10%; 
 
    padding: 10px; 
 
    top:200px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> 
 
<div id='header'> 
 
Header with Menue, Logo and stuff 
 
</div> 
 
<div id='teaser'> 
 
Teaser Image 
 
</div> 
 
<div id='slogan'> 
 
A slogan or something else (just 3-10 words). 
 
</div> 
 
<div id='demo1'> 
 
For demonstartion 
 
</div> 
 
<div id='demo2'> 
 
For demonstartion 
 
</div> 
 
<div id='controlbar'> 
 
Some Elements like Print, PDF Buttons, search form, breadcrumbs .... 
 
</div> 
 
<div id='content'> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 
 
</div>

// Source of image and a bit of the code: 
    // https://jsfiddle.net/0z8mvewo/ 

是否有人知道這個問題的變通方法/解決方案？

編輯： 這真的很奇怪，我找不到更多的資料關於這個問題的任何地方。這個問題是否只發生在虛擬機上？ 我是一名mac用戶，我在Microsoft Edge上的測試是在VMWare Fusion上託管的虛擬機上完成的。 我測試了在macbook pro觸摸板和普通的Logitech鼠標上的滾動。

Answer 1

您準備的jsfiddle不爲我工作，但我看了看其他撥弄兩箱。

第一：還有就是要做到這一點沒有什麼好辦法。改變瀏覽器的具體行爲從來就不是一個好主意。

第二：I「黑客」它與上面的兩個盒子的透明層。如果您願意，您可以將其更改爲恰好位於右側框上的圖層。

步驟1）總結那些盒子

<div id="wrapper"> 
    <div id="box1">...</div> 
    <div id="box2">...</div> 
</div> 

步驟2）將所述包裝內的另一個DIV。在這些添加的div中添加anonther div。

<div id="scrollableOverlay"><div id="inScrollableOverlay"></div> 

步驟3）將大小設置爲最大值，溢出屬性的方式與您想要滾動的方框相同。此外使其透明。

#scrollableOverlay { 
    position:absolute; 
    top:0;left:0; 
    width:100%; 
    height:100%; 
    opacity:0; 
    overflow-y:scroll; 
} 

步驟4）添加一些JavaScript來設置步驟2中content-div的大小並將滾動事件附加到它。如果事件觸發，則同時滾動兩個框。

$('#inScrollableOverlay').css('height', $('#box2').prop("scrollHeight")); 
$('#scrollableOverlay').on('scroll', function() { 
    $('#box1, #box2').scrollTop($(this).scrollTop()); 
}); 

工作小提琴：http://jsfiddle.net/n9ryLdaw/3/

但有一個新的問題：你不能因爲之前的隱層的框來選擇文本。這些解決方案只有在不需要這種用戶交互時纔可實施！

更好的方法是阻止滾動事件並同時觸發兩個框的滾動，但由於滾動事件在ms邊不可預防，因此在編寫本文時不起作用。