javascript同步ms edge上的滚动

Question

我使用js来支持网络项目上的滚动。它的工作非常好，除了在微软的边缘。

它首先滚动页面的内容，然后再执行js中的滚动操作。我没有在滚动函数上使用preventDefault，因为我没有用js滚动整个内容。

我准备了一个显示问题的JSFiddle。我还发现了IE10和IE边缘模式下滚动行为的滞后这个问题，它有同样的问题，但没有得到答案。这个问题的作者写了这个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上的测试是在托管在VMWare融合上的虚拟机上完成的。我测试了macbook触摸屏和一个普通的logitech鼠标的滚动。

Answer 1

你准备好的JSFiddle对我不起作用，但我看了看另一个摆弄两个盒子的小提琴。

首先，没有好的方法来做到这一点。改变浏览器的特定行为从来不是一个好主意。

第二:我“黑”了两个盒子上面的透明层。如果您愿意的话，可以将其更改为一个刚好位于正确框上的图层。

第一步)包扎那些箱子

<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步中的内容-div的大小，并将滚动事件附加到其中。如果事件触发，则同时滚动两个框。

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

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

，但是有一个新的问题:您不能从框中选择文本，因为它前面隐藏了一层。只有当不需要这样的用户交互时，这些解决方案才是可行的！！

一个更好的方法是阻止滚动事件并同时为两个框触发滚动，但是在编写时这是行不通的，因为滚动事件在ms edge中是不可预防的。