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

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

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

我尝试使用

位置：fixed；底部：0px

，但我无法设置div的边距，当屏幕大小改变时，div的宽度也不会改变

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

---

如果你知道任何jquery插件可以满足我的要求，或者你知道如何做类似的事情，请帮助我

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

编辑：

---

外部div应具有“位置：相对”；以确保内部div相对于其边距进行定位

如果您使用的是

位置：固定

，则无法应用边距。不过，您可以指定

left

和

right

属性

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

我知道这不完全是你想要的，但是你可以在这个div上设置

空白

和

溢出

属性，使它显示一个水平滚动条

white-space: nowrap;
overflow: auto;

用户可以使用底部的滚动条移动div的内容。下面是一个示例：

---

要使用jQuery set

overflow:hidden

并添加一些函数来调整div的

scrollLeft

，然后添加一些控件，这些控件在悬停时调用这些函数。下面是一个示例：

好的，修复div成功了。但当达到div限制时，div的内容会不断“断线”。如何修复它？

空白：nowrap

应该阻止内容被破坏；除非它包含

或像div这样的块元素。如果您有块元素，您需要在这些元素上设置

display:inline block

，使它们彼此相邻显示。哦，我想使用jquery移动div的内容，我该怎么做？