Internet Explorer Buggy CSS 左侧答案

【问题标题】：Internet Explorer Buggy CSS LeftInternet Explorer Buggy CSS 左侧
【发布时间】：2015-06-11 13:09:08
【问题描述】：

我有一个 html 页面，我希望 div 随页面垂直滚动，但不水平滚动（其余内容消失在它下面）；

从previous question 我找到了一个很好的答案，但是我想知道是否有办法修复一个小错误。

当使用滚动条的箭头或键盘上的箭头键向左滚动时，绿色框会变得很刺眼，试图跟上。这在 Firefox 中不会发生。

我想知道它是 jquery 代码（如下）还是 Internet Explorer 本身？

$('#Container').scroll(function() {
    $('#Const').css('left', $('#Container').scrollLeft());
});

我尝试过使用 jquery 的动画，但它的作用大致相同。我也尝试过使用 Internet Explorer 中的“平滑滚动”设置，但这也无济于事。

【问题讨论】：

我认为这是关于放弃 JavaScript 解决方案以支持纯 css。我在玩设置位置：固定在绿色盒子上，左，上，下都是 0px。还有更多工作要做，但它避免了在您的 css 与 js 之战中造成的不和谐效果????
@ne1410s 我不确定是否可以只做一个纯 css 解决方案：S 因为固定通常意味着我无法垂直滚动或其他什么。
@user4749485 您的代码似乎消除了使用鼠标（快速）移动滚动条的轻微移动，但是使用键盘箭头键或滚动条箭头的锯齿仍然存在:(
@user4749485 哇，这确实解决了它....不完全确定它为什么起作用

标签： javascript jquery html css internet-explorer

【解决方案1】：

请检查此fiddle。我删除了 jquery 并简单地使用了 CSS。希望对您有所帮助。

div.Container{
   height: 300px;
   border: 2px solid #F00; 
   width: 800px;
    padding: 3px;
    overflow: auto;
    
    /* POSITION */
    position:fixed;
    z-index : 1;
}

div.Const{
   border: 2px solid #0F0;
   width: 200px; 
    height: 250px;
	float:left;
	position:fixed;
    overflow-y:hidden;
    z-index : -1;
}
div.Main{
  border: 2px solid #00F;
  width: 3000px;
  height: 200px;
  margin-left: 220px;
  top:0px;
  float:left;
    z-index : 1;
}

<div id="Container" class="Container">
    <div id="Const" class="Const"> 
    </div>
    <div id="Main" class="Main">
    </div> 
</div>

【讨论】：

这样的问题是绿色框不能再垂直滚动（需要发生）