ms edge上的javascript同步滚动

我使用js支持web项目上的滚动。 它工作得非常好，除了微软的edge

在edge上，它确实会首先滚动页面的内容，然后执行MyJS中的滚动。我没有在scroll函数中使用preventDefault，因为我不会用js滚动整个内容

我准备了一份报告来说明问题所在。 我还发现这个问题也有同样的问题，但没有得到答案。问题的作者将此作为示例编写，这导致了与我尝试的问题相同的问题

下面是我在JSFIDLE上准备的示例：

if（$（window）.width（）>=300）{
//滚动功能
$（窗口）。滚动（功能（e）{
setDefaultOffsets（）；
//e、 预防默认值（）；
//e、 停止传播（）；
//e、 returnValue=false；
var offset=$（window.scrollTop（）；
setItem（'scrollTop'，偏移量）；
$（“#梳理器”）.css（{top:（梳理器defaulttop-offset）+'px'}）；
if（（预偏移-偏移）maxScrollOffset）{
previousOffset=maxScrollOffset；
}
如果（以前的偏移量>100）{
滚动窗口（0，上一个偏移量）；
}否则{
setTimeout（函数（）{
if（$（窗口）.scrollTop（）==0）{
$（'html，body'）。设置动画({
scrollTop:$（“#摘要”）.offset（）.top
}, 1000);
}
}, 500);
}
});
$（窗口）。滚动顶部（0.5）
}
函数setDefaultOffsets（）{
//不同媒体查询的不同值
如果（$（窗口）.width（）>0）{
maxScrollOffset=100；
顶部=101；
预偏移=300；
开关位置=101；
}
}

html，正文{
最小宽度：100%；
最小高度：500%；
}
#标题{
宽度：100%；
高度：100px；
背景颜色：浅蓝色；
位置：固定；
顶部：0px；
左：0px；
z指数：7；
}
#挑逗者{
颜色：透明；
高度：200px；
宽度：100%；
背景图片：url(http://i.imgur.com/NwOWE.jpg); 
背景位置：0px 0px；
背景重复：重复；
背景尺寸：自动200px；
位置：固定；
top:101px；
左：0px；
z指数：3；
}
#控制条{
高度：50px；
宽度：100%；
背景颜色：浅绿色；
位置：固定；
顶部：252px；
左：0px；
z指数：5；
}
#内容{
利润上限：350px；
}
#口号{
光标：指针；
背景色：rgba（220,140,40,0.6）；
宽度：自动；
显示：内联块；
位置：绝对位置；
z指数：4；
左：10%；
填充：10px；
顶部：200px；
}
#演示1{
光标：指针；
背景色：rgba（40,140,220,0.8）；
宽度：自动；
显示：内联块；
位置：绝对位置；
z指数：6；
右：10%；
填充：10px；
顶部：300px；
}
#演示2{
光标：指针；
背景色：rgba（140,220,40,0.8）；
宽度：自动；
显示：内联块；
位置：绝对位置；
z指数：6；
右：10%；
填充：10px；
顶部：200px；
}

标题与菜单，标志和东西
挑逗图像
口号或其他东西（只有3-10个字）。
演示
演示
一些元素，如打印、PDF按钮、搜索表单、面包屑。。。。
我们需要一个好的环境，一个好的环境，一个好的环境。

您准备好的JSFIDLE对我不起作用，但我查看了另一个摆弄这两个盒子的小提琴

第一：没有什么好办法。更改浏览器的特定行为从来不是一个好主意

第二：我用两个盒子上面的透明层“黑”了它。如果愿意，可以将其更改为正好位于右框上方的层

步骤1）包装那些盒子

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

步骤4）添加一些javascript来设置步骤2中content div的大小，并将scroll事件附加到它。如果事件触发，则同时滚动两个框

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

工作小提琴：

但有一个新问题：由于文本前面有隐藏层，因此无法从框中选择文本。只有在不需要这样的用户交互的情况下，这些解决方案才是可行的

---

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

感谢您给出的清晰答案。我看到我上一篇文章中的剪报在stackoverflow上不起作用，但在JSFIDLE页面上它对我起作用。你对透明区域的想法很好，但遗憾的是，我在那个区域有内容，必须是可点击的。正如我所看到的，这个问题没有更多的解决办法。我必须过度考虑我使用的div设置，并创建一个解决方案，在这个解决方案中我不使用js滚动，或者相反；使用js滚动所有内容（我开始讨厌edge:（））。

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

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