Question

我有一个带overflow:auto的div和一个滚动条，我希望能够拖动内容滚动。我不需要能够选择文本。是否有捷径可寻？一个jQuery插件会很好，否则普通的旧JavaScript会很好。

我似乎还没有说清楚。我想滚动一个固定高度的div。我没有拿起滚动条，而是想要在相反方向上单击并拖动文本。就像在iPhone上一样。就像在Photoshop中按住空格并拖动一样。

-------------------
|               | |
|               | |
|               |||
|               | |
|         <----------- click here and drag to scroll.
|               | |
|               | |
-------------------

Answer 1

这是一个很好的拖动和滚动div实现 https://github.com/mvlandys/jquery.dragscrollable

下面是我发布的原始链接。看起来有人编辑了我的答案。

http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html

Answer 2

你的意思是当你移动滚动条时内容应该滚动吗？

为您想要拖动的内容创建新的div，并将其放在您正在滚动的div上。检查给出的代码。

<div style="position:relative; overflow:hidden;">
    <div id="dragableContent"
    style="float: left;display: none;background:none repeat scroll 0 0 white; border:1px solid #323C45; border-width:0px 1px 0px 1px;"></div>
    <div> This is you content div...</div>
</div>

然后在页面加载时，您可以在设置其内容HTML后使div可见。

$(document).ready(function() {
    stripColumnFromDiv('Your content Div ID');
    var scrollingDiv = $("#dragableContent");
    scrollingDiv.css({'position':'absolute','display':'block'});
});

其中stripColumnFromDiv函数将元素中的数据设置为新的空dragableContent。

我希望这是你想要的，并帮助你。

感谢。

Answer 3

Jquery UI中有一个名为draggable的插件通过这个，您可以将任何元素更改为可拖动对象

以下是演示的链接 http://jqueryui.com/demos/draggable/

这很简单

<script type="text/javascript">
$(function() {
    $("#draggable").draggable();
});
</script>

也可以在div中滚动它。查看演示页

有没有一种简单的方法可以在文本框架中单击并拖动滚动？

3 个答案: