config.maxScroll = $('.scroll-x table').outerWidth() - $('.scroll-x').outerWidth();
config.speed = 30;
$('.scroll-x')[0] ? $('.scroll-x')[0].onmousewheel = function(event) {
if($(this).width() == $(this).find('table').width()){
return;
};
var event = event ? event : window.event;
var dir = event.wheelDelta;
var k = event.wheelDelta ? event.wheelDelta : -event.detail * 10;
$(this)[0].scrollTop = $(this)[0].scrollTop - k;
if (dir > 0) { // 向右
config.tableScroll += config.speed;
if (config.tableScroll >= config.maxScroll) {
config.tableScroll = config.maxScroll;
}
} else { // 向左
config.tableScroll -= config.speed;
if (config.tableScroll <= 0) {
config.tableScroll = 0;
}
}
$(this).scrollLeft(config.tableScroll);
return false;
} : '';
$('.scroll_speed').click(function() {
$(this).addClass('btn-primary');
$(this).siblings('.scroll_speed').removeClass('btn-primary')
config.speed = $(this).data('speed') ? $(this).data('speed') : config.speed;
});
<div class="scroll-x">
<table></table>
</div>