Сделайте только часть div видимой

Question

Я хочу div, что только частично его содержимое видно. Я хочу, чтобы пользователь использовал свою мышь горизонтально (т. Е. Движение мыши влево-вправо), чтобы изменить, какая часть div видна.

Как я могу это сделать?

Answer 1

HTML, и CSS

Если я правильно понимаю ваш вопрос, у вас есть div что х пикселей в ширину, а его содержимое у пикселей в ширину где х>у , Другими словами, содержимое div шире, чем сам div.

Следующий HTML и CSS являются примером того, как скрыть часть из div если х = 250 и у = 500:

​<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; 
} 

Вы можете прокручивать DIV влево или вправо, используя свойство scrollLeft:

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

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