Fat*_*win 7 html javascript jquery
我添加了以下代码以便用鼠标滚动(滚动点击+拖动,而不是通过鼠标滚轮).到目前为止,这么好 - 像魅力一样:
var clicked = false, clickY;
$(document).on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickY = e.pageY;
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('html').css('cursor', 'row-resize');
$(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
}
我试图更改此滚动行为,以便每个方向单击+拖动鼠标移动跳转到下一个/最近的哈希后,例如10px拖动.换句话说,鼠标向上滚动应跳转到当前位置上方的下一个哈希值,向下滚动应跳转到下面的下一个哈希值.
任何相关问题似乎都没有涵盖这一点.
编辑:
我想我需要更换
$(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
通过以下链接中的部分解决方案.不幸的是,这似乎高于我的技能水平:
解:
我用赛义德Ataee的回答,真的很高兴关于代码,但换成下面一个我在的地方就已经在鼠标滚轮代码部分,刚好更好的工作,在我结束(我相信他是好的,只是给人一种另类这里):
$('#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();
});
我想这就是你的答案。
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>