1

divコンテンツの一部しか表示されない が必要です。ユーザーがマウスを水平に使用して (つまり、左から右へのマウスの移動)、 のどの部分divが表示されるかを変更してもらいたいと考えています。

これどうやってするの？

4

2 に答える 2

2

HTML と CSS

あなたの質問を正しく理解していれば、xdivピクセル幅のがあり、その内容はyピクセル幅で、x > yです。つまり、の内容はそれ自体よりも広いです。divdiv

次の 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 が必要です。これを実現する 1 つの方法は、 のスクロール位置を変更することouter-divです。にはメソッドがありElement.scrollToます。他の JavaScript フレームワークにも同様のものがあります。

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

例については、このフィドルを参照してください。

于 2012-05-24T23:38:33.763 に答える
1

CSSoverflowプロパティを使用します。

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

scrollLeft プロパティを使用して、div を左右にスクロールできます。

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

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

于 2012-05-24T23:40:31.557 に答える