见小提琴:http: //jsfiddle.net/mrcarllister/Z2GjN/
基本上,除了单击并拖动锚点/链接时,我已经让单击-拖动-滚动正常工作。
似乎只有当鼠标光标停留在释放链接上时,才会跟随 url(例如,如果您拖动得足够远并且链接离开窗口,则效果很好。)
;(function($){
$.fn.scrollsync = function( options ){
var settings = $.extend(
{
targetSelector:':first',
axis: 'xy'
},options || {});
function scrollHandler(event) {
if (event.data.xaxis){
event.data.followers.scrollLeft(event.data.target.scrollLeft());
}
if (event.data.yaxis){
event.data.followers.scrollTop(event.data.target.scrollTop());
}
}
settings.target = this.filter(settings.targetSelector).filter(':first');
settings.followers=this.not(settings.target); // the rest of elements
settings.xaxis= (settings.axis=='xy' || settings.axis=='x') ? true : false;
settings.yaxis= (settings.axis=='xy' || settings.axis=='y') ? true : false;
if (!settings.xaxis && !settings.yaxis) return;
settings.target.bind('scroll', settings, scrollHandler);
};
})( jQuery );
;(function($){
$.fn.dragscrollable = function( options ){
var settings = $.extend(
{
dragSelector:'>:first',
acceptPropagatedEvent: true,
preventDefault: true
},options || {});
var dragscroll= {
mouseDownHandler : function(event) {
if (event.which!=1 ||
(!event.data.acceptPropagatedEvent && event.target != this)){
return false;
}
event.data.lastCoord = {left: event.clientX, top: event.clientY};
$.event.add( document, "mouseup",
dragscroll.mouseUpHandler, event.data );
$.event.add( document, "mousemove",
dragscroll.mouseMoveHandler, event.data );
if (event.data.preventDefault) {
event.preventDefault();
return false;
}
},
mouseMoveHandler : function(event) {
var delta = {left: (event.clientX - event.data.lastCoord.left),
top: (event.clientY - event.data.lastCoord.top)};
event.data.scrollable.scrollLeft(
event.data.scrollable.scrollLeft() - delta.left);
event.data.scrollable.scrollTop(
event.data.scrollable.scrollTop() - delta.top);
event.data.lastCoord={left: event.clientX, top: event.clientY}
if (event.data.preventDefault) {
event.preventDefault();
return false;
}
},
mouseUpHandler : function(event) {
$.event.remove( document, "mousemove", dragscroll.mouseMoveHandler);
$.event.remove( document, "mouseup", dragscroll.mouseUpHandler);
if (event.data.preventDefault) {
event.preventDefault();
return false;
}
}
}
this.each(function() {
var data = {scrollable : $(this),
acceptPropagatedEvent : settings.acceptPropagatedEvent,
preventDefault : settings.preventDefault }
$(this).find(settings.dragSelector).
bind('mousedown', data, dragscroll.mouseDownHandler);
});
};
})( jQuery );
</p>
我很确定我必须'return:false;' 对于锚点,但我不确定如何仅在拖动/滚动时执行此操作。
任何帮助,将不胜感激。
编辑- 伊恩的建议有效,但我只需要一些修改:
- 仅上下滚动(不向左或向右)
- 仅限于内容/ div 大小 - 并且不再滚动。
--->>>>>>>>>>>>>
干杯,
卡尔