只显示 div 的一部分答案

【问题标题】：Make only part of a div visible只显示 div 的一部分
【发布时间】：2012-05-31 13:29:01
【问题描述】：

我想要一个只有部分内容可见的div。我希望用户水平使用他的鼠标（即从左到右的鼠标移动）来更改 div 的哪一部分可见。

我该怎么做？

【问题讨论】：

我认为您必须提供更多信息，您的问题很模糊。如果您只想让某个部分可见，则将 div 细分为多个部分。
看看overflow property
是否希望用户以拖动方式打开/关闭可见区域？
好的，我会尝试更具体一点：div 的可见区域有所改变，有点像水平滚动条，但没有滚动条：如果鼠标指针在 div 内，则可见区域的中心是指针所在的位置。可见区域具有完整的高度和 x 像素宽度。我尝试了溢出部分，但是我在 div 中的文本然后水平调整为可见 div。

【解决方案1】：

HTML 和 CSS

如果我正确理解您的问题，您有一个 x 像素宽的 div，其内容为 y 像素宽，其中 x em> > 是。换句话说，div 的内容比div 本身要宽。

如果 x = 250 和 y = 500，以下 HTML 和 CSS 是如何隐藏部分 div 的示例：

<div id="outer-div" style="width:250px;overflow:hidden;">
<div style="width:500px;">
....
</div>
</div>

CSS overflow:hidden 隐藏了水平滚动条。如果您希望用户看到水平滚动条，请使用overflow:auto。如果你只需要水平滚动条，那么就不需要编写任何 JavaScript。

JavaScript

根据鼠标移动更改div 的哪一部分可见需要JavaScript。实现此目的的一种方法是更改outer-div 的滚动位置。 mootools 有方法Element.scrollTo。其他 JavaScript 框架也有类似的东西。

$('outer-div').addEvent('mousemove', function(event) {
    $('outer-div').scrollTo(event.client.x);
});

请参阅此fiddle 以获取示例。

【讨论】：

【解决方案2】：

使用 CSS overflow 属性：

#element {
    overflow: hidden;
    width: 200px;
}

然后您可以使用 scrollLeft 属性向左或向右滚动 div：

document.getElementById("element").scrollLeft = 100;

【讨论】：