Добрый день. Подскажите, пожалуйста, плагин для горизонтального скроллинга. Есть таблица, которая выходит за пределы границ блока. Мне нужно, чтобы она прокручивалась (или при нажатии стрелки двигалась влево, вправо) внутри блока.
Заранее спасибо!
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуМногие браузеры нормально понимают прокручивание по стрелкам без всяких дополнительных плагинов. Ну, а для тех, которые работать не хотят, можно попробовать такой вариант.
HTML
<div id="container">
<table>
<tr>
</tr>
</table>
</div>
CSS
#container {
width: 500px;
overflow-x: scroll;
}
td {
padding: 50px;
border: 1px solid #900;
text-align: center;
}
JS
// к теме не относится
var td = '', i = 0;
for(i; i <= 20; i++){
td += '<td>' + i + '</td>';
}
$('tr').append(td);
// --- --- По теме --- --- //
var container = $('#container');
var tblWidth = $('table').width();
var duration = 5000;
$(document).on('keydown',function(e){
if(e.which == 39) {
container.animate({
scrollLeft: tblWidth
}, duration, 'linear');
} else if(e.which == 37) {
container.animate({
scrollLeft: 0
}, duration, 'linear');
}
});
$(document).keyup(function(){
container.stop(true);
});
(!) Т.к. на jsFiddle используются фреймы, то для начала тестирования - кликнуть в поле вывода результата.
Custom controls from outside of the slider.
Легко настраивается, под все нужды.