使用JS/jQuery滚动已溢出的div内容:应用滚动

问题描述：

所以我有一个div，里面有一堆比div宽的内容.我已经设置了overflow-x: scroll，一切都很好.但是，我想在页面上有两个链接，这些链接使用户可以在div内左右滚动内容(模仿标准的滚动条箭头功能).有可能吗?

So I have a div, with a bunch of content inside it that is wider than the div. I have set overflow-x: scroll and all is well. However I'd like to have two links on my page that allow the user to scroll the content within the div left and right (mimicking the standard scrollbar arrow functionality). Is that possible?

答

使用jQuery，可以像以下示例一样处理滚动:

With jQuery the scrolling can be handled like in this example:

$(function(){
    var iv;
    var div = $('#content');
    $('#left').mousedown(function(){
        iv = setInterval(function(){
            div.scrollLeft( div.scrollLeft() - 4);
        },20);
    });
    $('#right').mousedown(function(){
        iv = setInterval(function(){
            div.scrollLeft( div.scrollLeft() + 4);
        },20);
    });
    $('#left,#right').on('mouseup mouseleave', function(){
        clearInterval(iv);
    });
});

JSFiddle:
http://jsfiddle.net/jdNa9/1/(基本示例)
http://jsfiddle.net/jdNa9/3/(CSS有所更新)

JSFiddle:
http://jsfiddle.net/jdNa9/1/ (basic example)
http://jsfiddle.net/jdNa9/3/ (with a bit updated CSS)

使用JS/jQuery滚动已溢出的div内容:应用滚动

相关推荐