Horizontal scroll jquery-mousewheel library function errors (ex: this. on is not a function)

I am trying to create a horizontal scrolling website and I was following this tutorial which uses this library; however I get a “this.on is not a function” or a similar error where something is not a function.

I have tried rotating my webpage but it just messes everything up (href anchors don’t work?).

I tried to bind the .mousewheel on the window as well to no avail.

Is there another way to do this or is it just not possible?

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;
    }

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

Sorry for the formatting! Thank you!

Answer

The error is coming from the mousewheel library you linked to.

If you were following the tutorial you linked exactly, your issue is probably stemming from the old version of jquery (1.3.2), referenced in that tutorial.

If you update to the latest version of jquery (3.5.1) https://code.jquery.com/, you won’t get that error anymore.

Advertisement

Answer