只使div的一部分可见

Question

我想要div仅部分显示其内容。我希望用户水平使用鼠标（即从左到右的鼠标移动）来改变div的哪一部分可见。

我该怎么做？

Answer 1

HTML和CSS

如果我正确理解了您的问题，那么您的div x 像素宽，其内容 y 像素宽 x ＆gt; ý。换句话说，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。

Answer 2

使用CSS overflow属性：

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

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

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

jsFiddle：http://jsfiddle.net/vHEPv/