Tôi nghĩ với một chút jQuery bạn có thể đạt được những gì bạn đang tìm kiếm. Ý tưởng cơ bản là xử lý một số sự kiện (onmouseenter, mousedown, vv ...) mà bạn có thể sử dụng để bắt đầu cuộn.
Tưởng tượng bạn có một số đánh dấu trông như thế này:
<div id="parent">
<div class="contentBlock">1</div>
<div class="contentBlock">2</div>
<div class="contentBlock">3</div>
<div class="contentBlock">4</div>
<div class="contentBlock">5</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'>Left</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>Right</span>
Và một vài phong cách để đảm bảo nó sẽ gây ra cửa sổ để di chuyển:
#parent {
width:6000px;
}
.contentBlock {
font-size:10em;
text-align:center;
line-height:400px;
height:400px;
width:500px;
margin:10px;
border:1px solid black;
float:left;
}
.panner {
border:1px solid black;
display:block;
position:fixed;
width:50px;
height:50px;
top:45%;
}
.active{
color:red;
}
#panLeft {
left:0px;
}
#panRight {
right:0px;
}
Bạn có thể sử dụng một sự kết hợp của phong cách, setInterval và jQuery.scrollLeft() để đạt được hiệu quả bạn muốn.
(function() {
var scrollHandle = 0,
scrollStep = 5,
parent = $(window);
//Start the scrolling process
$(".panner").on("mouseenter", function() {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function() {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function() {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
}());
Full jsFiddle chứng minh phương pháp này: http://jsfiddle.net/jwcarroll/atAHh/
Cảm ơn điều này là hoàn toàn hoàn hảo! Bạn đã giải quyết một cơn đau đầu lớn! Và với một thay đổi rất nhỏ, bạn có thể chuyển đổi nó để di chuyển onmousedown (nếu có ai quan tâm, tôi đã thay đổi fiddle ở đây để làm việc onmousedown không di chuột: http://jsfiddle.net/atAHh/2/). – user2634764
@ user2634764 - Không sao cả. Rất vui được giúp :) – Josh