水平滚动jquery-mousewheel库函数错误(例如:this.On不是函数)

Question

我正在尝试创建一个水平滚动网站，我遵循这个教程使用这个库;然而，我得到了一个"这个"。On不是一个函数"或者类似的错误，某些东西不是函数。

我试过旋转我的网页，但它只是把一切都搞砸了(href锚不工作?)。

我也试着在窗口上绑定。mousewheel，但是没有效果。

是否有其他方法可以做到这一点，还是根本不可能?

HTML

<div class="main-container">
<nav class="main-nav">
<ul class="ul__first">
<li id="logo">
<a href="#">b</a>
</li>
</ul>
<ul class="ul__second">
<li id="border"><a href="#section-one">Homepage</a></li>
<li><a href="#section-two">Two</a></li>
<li><a href="#section-three">Three</a></li>
<li><a href="#section-four">Four</a></li>
</ul>
</nav>
<div class="container">
<section id="section-one" class="section-one">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-two" class="section-two">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p> 
</div>
</section>
<section id="section-three" class="section-three">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-4" class="section-4">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
</div>

CSS

*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


html, 
body, 
.main-container {
scroll-behavior: smooth;
height:100%;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
overflow-y:hidden;
overflow-x:hidden;
}

li {
list-style:none;
transition: all 0.4s;
z-index: 15;
}

li:hover{
transform: scale(1.1);
}

a{
text-decoration: none;
text-transform: uppercase;
color:white;
}

h1{
font-size: 70px;
text-transform: uppercase;
font-family:cursive;
letter-spacing: 10px;
}

h3 {
font-size: 30px;
font-family:fantasy;
}

p {
margin-top: 30px;
font-size: 14px;
font-family:sans-serif;
}

.main-container{
width: 100vw;
height: 100vh;

}



.main-nav {
position: fixed;
display: flex;
padding: 2em 4em;
z-index: 12;
}

.main-nav .ul__second{
position:fixed;
display: flex;
right: 4em;
}

#logo {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
}
.main-nav .ul__second li {
margin-left: 1.5em;
}

.main-nav .ul__second #border {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
align-items: center;
}

.container {
width: 400vw;
display: flex;
flex-direction: row;

}

.container .section-one{
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8em;
}

.container .summer .img {
width: 400px;
height: 600px;
}

.content {
margin-top: 50px;
margin-right: 100px;
text-align: center;
z-index: 10;
}


::-webkit-scrollbar{
display:none;
}

JS

$(function() {
$("html, body, *").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 80);
this.scrollRight -= (delta * 80);
event.preventDefault();
});
});

对不起，格式不对!谢谢你！

Answer 1

错误来自您链接到的mousewheel库。

如果你完全按照你链接的教程，你的问题可能源于旧版本的jquery(1.3.2)，在该教程中引用。

如果你更新到最新版本的jquery (3.5.1) https://code.jquery.com/，你将不会得到错误了。