javascript在ms edge上同步滚动

Question

我使用 js 来支持 Web 元素上的滚动。它运行良好，但在 Microsoft Edge 上除外。

在边缘它首先滚动页面的内容，稍后它从我的 js 执行滚动。我没有在滚动功能上使用 preventDefault，因为我没有使用我的 js 滚动整个内容。

我准备了一个JSFiddle这表明了问题。我也发现了这个问题 Lag in scrolling behavior on IE 10 and IE Edge modes有同样的问题，但没有得到答案。题主写了这个JSFiddle例如，这会导致与我尝试的问题相同的问题。

这也是我在 JSFiddle 上准备的示例:

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

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

		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 () {

		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() {
	// difderent values for the different media querys
	if($(window).width() > 0) {
		maxScrollOffset = 100;
		TeaseDefaultTop = 101;
		PreOffset = 300;
		SwitchPos = 101;
	}
}

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 触摸板和普通罗技鼠标的滚动。

Answer 1

您准备的 JSFiddle 对我不起作用，但我看了一下另一个带有两个盒子的 fiddle 。

第一:没有好的办法做到这一点。更改浏览器的特定行为绝不是一个好主意。

第二:我在两个盒子上方用透明层“破解”了它。如果愿意，您可以将其更改为右侧框上方的图层。

第 1 步)包装这些盒子

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

步骤 2) 在包装器中插入另一个 div。在这些添加的 div 中添加另一个 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());
});

工作 fiddle :http://jsfiddle.net/n9ryLdaw/3/

但是有一个新问题:由于前面有隐藏层，您无法从框中选择文本。这些解决方案仅在不需要此类用户交互时才可行!

更好的方法是阻止滚动事件并同时触发两个框的滚动，但这在撰写本文时不起作用，因为在 ms edge 中无法阻止滚动事件。