CSS 通过在 div 内单击并拖动而不是单击滚动条来滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3864739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll by clicking and dragging inside div instead of clicking scrollbar
提问by Joshua Slocum
This CSS is for a DIV in an MVC2 application. The overflow:auto line adds a horizontal scrollbar to the div which is needed since the table in the div is very wide and extends past the edge of the page.
此 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 */
}
Eventually there are going to be multiple tables stacked and the horizontal scroll bar is going to be below the bottom of the screen.
最终会有多个表格堆叠，水平滚动条将位于屏幕底部下方。
Is there a way to allow the users to click and drag inside the div to make it scroll instead of actually having to click the scrollbar?
有没有办法允许用户在 div 内单击并拖动以使其滚动而不是实际单击滚动条？
回答by MKN Web Solutions
A very minimized JQueryapproach to apply this functionality:
应用此功能的一种非常简化的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;
});
}
To apply it utilize:
要应用它，请使用：
$(document).ready(function(){
$("#divToScroll").attachDragger();
});
回答by Peter Kruithof
You need to implement three consecutive mouse event handlers in javascript for this:
为此，您需要在 javascript 中实现三个连续的鼠标事件处理程序：
- The mousedown handler should trigger a drag start by enabling the mousemove event handler (see 2)
- The mousemove handler should map the vertical mouse position to the scrollTop property of the div
- The mouseup handler should trigger a drag stop by disabling the mousemove event handler
- mousedown 处理程序应该通过启用 mousemove 事件处理程序来触发拖动开始（参见 2）
- mousemove 处理程序应该将垂直鼠标位置映射到 div 的 scrollTop 属性
- mouseup 处理程序应该通过禁用 mousemove 事件处理程序来触发拖动停止
Note that I don't think this is good user interface design: you're basically removing the ability to select text inside this div. Besides, the user can scroll using the mouse wheel, so I don't see the need for this.
请注意，我认为这不是一个好的用户界面设计：您基本上删除了在此 div 中选择文本的能力。此外，用户可以使用鼠标滚轮滚动，所以我认为没有必要这样做。
