通过在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();
});

Answer 2

为此，您需要在 javascript 中实现三个连续的鼠标事件处理程序：

1. mousedown 处理程序应通过启用 mousemove 事件处理程序来触发拖动开始（参见 2）
2. mousemove 处理程序应将垂直鼠标位置映射到 div 的scrollTop 属性
3. mouseup 处理程序应通过禁用 mousemove 事件处理程序来触发拖动停止

请注意，我认为这不是一个好的用户界面设计：您基本上删除了在此 div 内选择文本的功能。此外，用户可以使用鼠标滚轮滚动，所以我认为没有必要这样做。