css - 通过在 div 内单击并拖动而不是单击滚动条来滚动

Question

此 CSS 用于 MVC2 应用程序中的 DIV。 overflow:auto 行向 div 添加了一个水平滚动条，这是必需的，因为 div 中的表格非常宽并且超出了页面的边缘。

#main
{
    padding: 30px 30px 15px 30px;
    overflow:auto;/* this adds horizontal scroll*/
    background-color: #fff;
    margin-bottom: 30px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
}

最终会有多个表格堆叠在一起，水平滚动条将位于屏幕底部下方。

有没有办法允许用户在 div 中单击并拖动以使其滚动，而不是实际必须单击滚动条？

Answer 1

应用此功能的非常精简的 JQuery 方法:

$.fn.attachDragger = function(){
    var attachment = false, lastPosition, position, difference;
    $( $(this).selector ).on("mousedown mouseup mousemove",function(e){
        if( e.type == "mousedown" ) attachment = true, lastPosition = [e.clientX, e.clientY];
        if( e.type == "mouseup" ) attachment = false;
        if( e.type == "mousemove" && attachment == true ){
            position = [e.clientX, e.clientY];
            difference = [ (position[0]-lastPosition[0]), (position[1]-lastPosition[1]) ];
            $(this).scrollLeft( $(this).scrollLeft() - difference[0] );
            $(this).scrollTop( $(this).scrollTop() - difference[1] );
            lastPosition = [e.clientX, e.clientY];
        }
    });
    $(window).on("mouseup", function(){
        attachment = false;
    });
}

要应用它，请使用:

$(document).ready(function(){
 $("#divToScroll").attachDragger();
});