テキストを強調表示してドラッグしてスクロールしようとしています。あなたが気づいているように、これは標準のoverflow: auto
要素の標準的な動作ですが、私はKelvin LuckのjQuery jScrollPaneの礼儀正しいスクロールバーでそれをしようとしています。jScrollPane要素のスクロール
私はここにフィドル作成しました:トップボックス(デフォルトoverflow: auto
ボックス)で作品をハイライト表示し、スクロール、基本的にあなたが見ることができるようDEMO
をしかし、第二に、それは問題を配合すること、ないと、一度底に達すると、それはあなたの選択をINVERTS!
私の質問はこれです(これです):これを修正する方法はありますか?もしそうなら、どうですか?
私はかなりこれに取り組んできたとsetTimeout()
しかし使用してわずかな解決策を見つけた
は、それが意図したとおりに動作しないと、誰もが喜んでいる場合、私は持って支援することUPDATEここに新しいフィドルにそれをフォーク:jsFiddle
コードそのものです:
pane = $('#scrolldiv2');
pane.jScrollPane({animateEase: 'linear'});
api = pane.data('jsp');
$('#scrolldiv2').on('mousedown', function() {
$(this).off().on('mousemove', function(e) {
rel = $(this).relativePosition();
py = e.pageY - rel.y;
$t = $(this);
if (py >= $(this).height() - 20) {
scroll = setTimeout(scrollBy, 400, 20);
}
else if (py < 20) {
scroll = setTimeout(scrollBy, 400, -20);
}
else {
clearTimeout(scroll);
}
})
}).on('mouseup', function() {
$(this).off('mousemove');
clearTimeout(scroll);
})
var scrollBy = function(v) {
if (api.getContentPositionY < 20 & v == -20) {
api.scrollByY(v + api.getContentPositionY);
clearTimeout(scroll);
} else if (((api.getContentHeight - $t.height()) - api.getContentPositionY) < 20 & v == 20) {
api.scrollByY((api.getContentHeight - $t.height()) - api.getContentPositionY);
clearTimeout(scroll);
} else {
api.scrollByY(v, true)
scroll = setTimeout(scrollBy, 400, v)
}
}
$.fn.extend({
relativePosition: function() {
var t = this.get(0),
x, y;
if (t.offsetParent) {
x = t.offsetLeft;
y = t.offsetTop;
while ((t = t.offsetParent)) {
x += t.offsetLeft;
y += t.offsetTop;
}
}
return {
x: x,
y: y
}
},
})
素晴らしい、あなたは実際に私の頭痛をクリアしました!ありがとう!私がそれを見ると、それはとてもシンプルですが、何か別のやり方をしようとしているときは、言いたいことをするのは難しいでしょう! –