javascript - 只显示 div 的一部分

Question

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

我怎样才能做到这一点？

Answer 1

HTML 和 CSS

如果我正确理解了您的问题，则您的 adiv为x像素宽，其内容为y像素宽，其中x > y。换句话说，div的内容比它div本身更宽。

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

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

CSSoverflow: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);
});

有关示例，请参见此小提琴。

Answer 2

使用 CSSoverflow属性：

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

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

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

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