带有水平滑动内容的底部div

Question

我需要一个总是位于页面底部的div，左边是172px，右边是383px。

此div将包含一些图像和文本以及左右按钮。例如，当您将鼠标悬停在右侧按钮时，在达到div的宽度限制后，“不可见”的内容将从右侧开始显示，滑动左侧的内容。

我尝试使用position:fixed; bottom:0px，但我无法保留div，并且当屏幕尺寸发生变化时，它的宽度不会改变...

例如，这正是我想要的（底部的黑色div）：

如果您知道任何jquery插件可以执行我想要的操作，或者您知道如何执行此类操作，请帮助我！

Answer 1

如果您使用position: fixed，则无法应用保证金。您可以指定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 set overflow: hidden并添加一些调整div的scrollLeft的函数，然后添加一些控件，以便在它们悬停时调用这些函数。这是一个例子：http://jsfiddle.net/rustyjeans/FtSGn/

Answer 2

这不应该太难。您想要一个包含具有查看器尺寸的div。然后，在那个内部有一个div，其位置绝对和尺寸超出了观察者的宽度。当箭头悬停在使用jquery上以更改内部div的“left”css属性时。这有帮助吗？

编辑： 外部div应该具有“position：relative;”确保内部div相对于其边缘定位。