javascript - 如何停止在特定元素上的特定方向滚动?
问题描述
所以,我在 JavaScript(+ jQuery,JS 库)中有这段代码:
var $curr = $(".scroll");
$('body').on('wheel', function(event) {
if (event.originalEvent.deltaY > 0) {
$curr = $curr.nextUntil('#home');
window.location.hash = $($curr).attr('id');
}
else {
$curr = $curr.prevUntil('#discord');
window.location.hash = $($curr).attr('id');
}
});
* {
font-family: Poppins;
}
::-webkit-scrollbar {
width: 0;
}
html {
scroll-behavior: smooth;
}
body {
overflow: hidden;
margin: 0;
}
section {
height: 100vh;
}
#home {
background: red;
}
#pricing {
background: green;
}
#discord {
background: yellow;
}
.scroll {
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="home" class="scroll">Home</section>
<section id="pricing">Pricing</section>
<section id="discord">Discord</section>
目前,向下滚动时,它将转到其下方的兄弟部分,向上滚动时,它将转到其上方的兄弟部分,但是,当您查看时#discord
,如果向下滚动,您将被重定向到https:/ /yoursite.com/website.html#undefined然后您将无法再向上或向下滚动(查看#home 时向上滚动也会发生同样的情况)。
我该如何解决?
解决方案
试试下面的。您可能需要根据需要对其进行一些修改。
function jumpTo(id){
if (typeof id !== 'undefined'){
$("div.log").append("<br>jump to: " + id);
var top = $("#" + id).position().top;
$('html').scrollTop(top);
//window.location.hash = id;
}
}
// Below is one way to tackle the issue of getting 'undefined' when next() and prev() cannot find the following element.
// Think of a double-linkedlist and these are the method to navigate it; however, they don't stop at the ends when they don't find a next element and the thing crashes returning 'undefined'
// We keep a reference to the original code
$.fn.oldNext = $.fn.next;
$.fn.oldPrev = $.fn.prev;
// We override next().
// If there are elements, we return them else we return reference to discord section
$.fn.next = function(selector){
var selector = selector || '';
return this.oldNext(selector).length ? this.oldNext(selector) : $("#discord");
}
// We override prev().
// If there are elements, we return them else we return reference to home section
$.fn.prev = function(selector){
var selector = selector || '';
return this.oldPrev(selector).length ? this.oldPrev(selector) : $("#home");
}
// Wait for all the DOMs in the page to be loaded prior to execute this code
$(function() {
// Lets obtain the selector object of the home section and jump to it.
var $curr = $("#home");
jumpTo("home");
// Self Explanatory
$('body').on('wheel', function(event) {
// I am implementing my own logger here
$("div.log").append("<br> " + $curr.prev('section').attr('id'));
// deltaY return a positive or negative value depending of the direction the wheel its turned.
if (event.originalEvent.deltaY > 0) {
// jQuery next() method, without modifying it, returns undefined when can't find a next element. Good policy to check prior using.
if (typeof $curr.next('section') !== 'undefined'){
$curr = $curr.next('section');
}else{
$curr = $("#home");
}
} else {
// jQuery prev() method, without modifying it, returns undefined when can't find a previous element. Good policy to check prior using.
if (typeof $curr.prev('section') !== 'undefined'){
$curr = $curr.prev('section');
}else{
$curr = $("#discord");
}
}
var id = $curr.attr('id');
jumpTo(id);
});
});
html, body {
margin: 0;
padding: 0;
width: 100%
}
section {
width: 100%;
height: 100vh;
}
div.log {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100vh
border: 1px black solid;
color: black;
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="home" class="scroller">Home</section>
<section id="pricing" class="scroller">Pricing</section>
<section id="discord" class="scroller">Discord</section>
<div class="log">Log goes here</div>
推荐阅读
- java - java springdoc @ApiResponses 如何定义一个列表作为返回对象使用
- heroku - 升级到没有 webpacker 的 Rails 6.0 | Heroku 生产中没有 scss / bootstrap
- windows - Electron-installer-windows 在 macOS 上不起作用
- awk - 将文件的最后一行捕获为整数变量并在 awk 命令中使用
- reactjs - React JS 中的 findDOMNode 替代方案
- comparison - 如何比较两个多类混淆矩阵的性能?
- python - 同时显示实时数据和命令行输入
- react-native - 如何在滚动视图下传递触摸事件以查看本机反应
- python - 诗歌:找不到命令
- c++ - 为特定用户创建计划任务