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中实现三个连续的鼠标事件处理程序：

mousedown处理程序应该通过启用mousemove事件处理程序来触发拖动启动（参见2）
mousemove处理程序应将垂直鼠标位置映射到div
mouseup处理程序应通过禁用mousemove事件处理程序

请注意，我不认为这是良好的用户界面设计：您基本上无法在此div中选择文本。此外，用户可以使用鼠标滚轮滚动，所以我认为没有必要。

通过在div中单击并拖动而不是单击滚动条来滚动

2 个答案: