Mousemove /滚动到下一个散列 [英] Mousemove / scroll to next hash
本文介绍了Mousemove /滚动到下一个散列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我添加了下面的代码，以便使用我的鼠标滚动（滚动点击+拖动，而不是鼠标滚轮）。到目前为止，如此优秀 - 像魅力一样：
var clicked = false，clickY;
$（document）.on（{
'mousemove'：function（e）{
click&& updateScrollPos（e）;
}，
' mousedown'：function（e）{
clicked = true;
clickY = e.pageY;
}，
'mouseup'：function（）{
clicked = false;
$（'html'）.css（'cursor'，'auto'）;
}
}）;
$ b $ var updateScrollPos = function（e）{
$（'html'）.css（'cursor'，'row-resize'）;
$（window）.scrollTop（$（window）.scrollTop（）+（clickY - e.pageY））;
}
我试图改变这种滚动行为，以便每个方向点击+拖动鼠标例如，运动会跳转到下一个/最接近的散列一个10px的阻力。换句话说，鼠标向上滚动应该跳到当前位置上的下一个散列，向下滚动应该跳到下一个。
这似乎不是所有相关问题都包括在内。
编辑：
blockquote>
我想我需要替换
$（window）.scrollTop（$（window）.scrollTop（）+（clickY - e.pageY））;
通过后面链接中的部分解决方案。不幸的是，这似乎超出了我的技能水平：
Edit:
I think I need to replace
$(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
by parts of the solution in the link that follows. Unfortunately, this seems to be above my skill level:
how to get nearest anchor from the current mouse position on mouse move
Solution:
I used Saeed Ataee's answer, really happy about that code, but replaced the mouse-wheel code portion with the following one I had in place already, just happened to work better on my end (I am sure his is fine, just giving an alternative here):
$('#nav').onePageNav();
var $current, flag = false;
$('body').mousewheel(function(event, delta) {
if (flag) { return false; }
$current = $('div.current');
if (delta > 0) {
$prev = $current.prev();
if ($prev.length) {
flag = true;
$('body').scrollTo($prev, 1000, {
onAfter : function(){
flag = false;
}
});
$current.removeClass('current');
$prev.addClass('current');
}
} else {
$next = $current.next();
if ($next.length) {
flag = true;
$('body').scrollTo($next, 1000, {
onAfter : function(){
flag = false;
}
});
$current.removeClass('current');
$next.addClass('current');
}
}
event.preventDefault();
});
解决方案
I think this is your answer.
let currentElement = 0,
maxLength = $("div[id^='section']").length,
changeSw = false;
$(document).ready(function() {
var clicked = false,
clickY;
$(document).on({
mousemove: function(e) {
clicked && updateScrollPos(e);
},
mousedown: function(e) {
clicked = true;
changeSw = true;
clickY = e.pageY;
},
mouseup: function() {
clicked = false;
changeSw = false;
$("html").css("cursor", "auto");
}
});
var updateScrollPos = function(e) {
$("html").css("cursor", "row-resize");
// $(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
if (changeSw && clickY - e.pageY > 0) {
currentElement =
(currentElement < maxLength - 1) ? currentElement + 1 : currentElement;
changeSw = false;
clicked = false;
} else if (changeSw && clickY - e.pageY <= 0) {
currentElement = currentElement > 0 ? currentElement - 1 : 0;
changeSw = false;
clicked = false;
}
console.log(currentElement)
$("html, body").animate({
scrollTop: $("#section-" + currentElement).offset().top
},
200
);
};
$(document).on("mousewheel", function(e) {
if (e.originalEvent.wheelDelta > 0) {
currentElement = currentElement > 0 ? currentElement - 1 : 0;
$("html, body").animate({
scrollTop: $("#section-" + currentElement).offset().top
},
200
);
} else {
currentElement =
currentElement < maxLength - 1 ? currentElement + 1 : currentElement;
$("html, body").animate({
scrollTop: $("#section-" + currentElement).offset().top
},
200
);
}
});
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="section-0">Section 1</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="section-1">Section 2</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="section-2">Section 3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="section-3">Section 4</div>
</body>
</html>
这篇关于Mousemove /滚动到下一个散列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
