使用JS/jQuery滚动已溢出的div内容:应用滚动 [英] Use JS/jQuery to scroll a div's content that has overflow: scroll applied

问题描述

所以我有一个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内容:应用滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！