为什么从右向左滑动（折叠）会创建滚动条，而 LTR 却不会？

Question

tldr：看这里：http://joon.be/dalida/ 将鼠标悬停在黄色“城镇”和蓝色“城镇”上方。黄色的不会创建滚动条，右侧的会创建滚动条。为什么？

长版： 我有一条线从左侧进入，当它悬停在某物上时指向它。 这有效。我试图从右侧做同样的事情，同样的原理只是镜像，并且已经弄清楚如何做到这一点，但它具有创建水平滚动条的奇怪副作用，因为图像部分超出屏幕。在左侧，这种情况不会发生，尽管它的工作原理几乎与我所理解的完全相同。

这是左边的工作代码：

$('.dalidatown').hover(function(){
    $('.dalidapath').stop().animate({width: '903px'});
},function(){
    $('.dalidapath').stop().animate({width: '0px'});
});

“路径”是一个以线条作为背景的 div。这是这个的 CSS：

.path {
    position: absolute;
    border: 0px;
}

.dalidapath {
    width: 0px;
    height: 83px;
    z-index: 10;
    top: 130px;
    left: 50%;
    margin-left: -1110px;
    background-image:url('bin/dalidapath.png'); 
}

现在在右侧，我不能只使用宽度，我还必须使用边距，所以它看起来像这样：

$('.therapietown').hover(function(){
    $('.therapiepath').animate({width: '903px'}, {queue: false}).animate({marginLeft: '97px'}, {queue: false});
},function(){
    $('.therapiepath').animate({width: '0px'}, {queue: false}).animate({marginLeft: '1000px'}, {queue: false});
});          

除了创建滚动条之外，这完成了我想要的一切。 .. 这是相关的CSS：

.path {
    position: absolute;
    border: 0px;
}

.therapiepath {
    width: 0px;
    height: 83px;
    z-index: 10;
    top: 130px;
    left: 50%;
    margin-left: 1000px;
    background-image:url('bin/therapiepath.png'); 
    background-position:right top;
}

所以你可以在这里看到它： http://joon.be/dalida/

Answer 1

不同之处在于，浏览器不会向左滚动超过 0。向右，页面可以根据需要扩展。您可以通过设置overflow:hidden来解决这个问题，尽管这可能最终会导致其他问题，具体取决于您的页面。

Answer 2

简单的答案是，左侧动画有足够的屏幕空间，不需要滚动条。您的解决方案可能是 CSS 解决方案：

尝试将 overflow-x:hidden; 添加到正文

Answer 3

idk 但 body{overflow:hidden} 可以解决滚动条出现的问题。不过，我建议不要这样做，而是创建一个宽度为 100% 的包装器。然后对其应用溢出属性。

Answer 4

我的滚动条没有显示，但您可以在 body 或 html 上添加一个 overflow-y 属性hidden 值将确保滚动条不会出现。

更新：如果您担心支持 IE，您可能只想使用 overflow:hidden;，具体取决于您希望对不同窗口宽度的支持程度。