javascript - 具有水平滑动内容的底部 div

Question

我需要一个始终位于页面底部的 div，左边距为 172px，右边距为 383px。

这个 div 将有一些图像和文本以及左右按钮。例如，当您将鼠标悬停在右键上时，“不可见”的内容在达到 div 的宽度限制后，将从右侧开始出现，向左滑动内容。

我尝试使用 position:fixed; bottom:0px，但我无法为 div 添加边距，并且当屏幕尺寸改变时它的宽度也不会改变...

例如，这正是我想要的(底部的黑色 div):

如果你知道任何 jquery 插件可以做我想要的，或者如果你知道如何做这样的事情，请帮助我!

Answer 1

如果您使用的是 position: fixed，则不能应用 margin 。不过，您可以指定 left 和 right 属性。

position: fixed;
right: 383px;
bottom: 0;
left: 172px;

我知道这不完全是你想要的，但你可以在那个 div 上设置 white-space 和 overflow 属性来制作它将显示水平滚动条。

white-space: nowrap;
overflow: auto;

用户会使用底部的滚动条来移动 div 的内容。这是一个例子:http://jsfiddle.net/rustyjeans/5nv84/

要使用 jQuery，请设置 overflow: hidden 并添加一些调整 div 的 scrollLeft 的函数，然后添加一些在悬停时调用这些函数的控件。这是一个例子:http://jsfiddle.net/rustyjeans/FtSGn/