The mouse scroll function is not functioning properly with the mCustomScrollbar jQuery plugin

I've been troubleshooting a problem without success, so I decided to download the jQuery plugin mCustomScrollbar. Everything seems to be working fine except for one thing - I can't scroll using the mousewheel on my test page. The console is clear, and examples from the author work flawlessly. I've tested my code on the latest versions of Firefox and Chrome, but it still doesn't seem to be functioning.

Here's a snippet of my code:

HTML:

<div id="elements">
    <p>Elements</p>
    <div id="list">
        xxx<br />xxx<br />
        abc<br />def<br />ghi<br />jkl<br />abc<br />def<br />ghi<br />jkl<br />abc<br />def<br />ghi<br />jkl<br />abc<br />def<br />ghi<br />jkl<br />
    </div>
</div>

JS:

$(document).ready(function(){
    $('div#elements').mCustomScrollbar({
        axis:'y',
        theme:'dark',
        mouseWheel:{
            enable:true,
            scrollAmount:5
        }
    }); 
});

CSS:

div#elements {
    background-color:#fff;
    border:1px solid #000;
    height:350px;
    position:absolute;
    right:10%;
    top:20%;
    width:230px;
    z-index:2;
}
div#elements p {
    border-bottom:1px solid #000;
    cursor:default;
    margin:0;
    padding:8px 0;
    text-align:center;
}

If anyone has any advice or suggestions, please feel free to reach out. I'll be eagerly awaiting your response.

Answer №1

After much trial and error, I finally found the solution. It turns out that using the concatenated version of the code is the key.

Instead of using , you need to use . It may seem silly, but trust me, it does the trick.

Best regards

Answer №2

Looking for a solution to fix the webpack issue by commenting out certain lines in the mCustomSrollBar.js file.

The problem arises from the inability of the file to locate the route to the node_modules folder to load the mousewheel file. Here's a quick fix:

function(init){
    var _rjs=typeof define==="function" && define.amd, /* RequireJS */
        _njs=typeof module !== "undefined" && module.exports, /* NodeJS */
        _dlp=("https:"==document.location.protocol) ? "https:" : "http:", /* location protocol */
        _url="cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js";


    $.event.special.mousewheel || $("head").append(decodeURI("%3Cscript src="+_dlp+"//"+_url+"%3E%3C/script%3E"));

    // if(!_rjs){
        // if(_njs){
        //  require("jquery-mousewheel")($);
        // }else{
        //  /* load jquery-mousewheel plugin (via CDN) if it's not present or not loaded via RequireJS 
        //  (works when mCustomScrollbar fn is called on window load) */

        // }
    // }
    init();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can a pledge be honored at a precise moment?

I have implemented transitions on my web page. When clicked, everything fades out to an opacity of 0 over a duration of 1 second. Then, a new page is swapped in and everything fades back in to an opacity of 1 over another 1-second duration. The issue aris ...

The problem of JSON data being displayed instead of redirecting is persistent

Here's a unique AJAX Login solution that I developed. $(function() { $('#loginform').submit(function(){ var uname = $('#username').val(); var password = $('#password').val(); $("#loading").show(); ...

Typing into the styled M-UI TextFields feels like a never-ending task when I use onChange to gather input field data in a React project

Having an issue where entering text into textfields is incredibly slow, taking around 2 seconds for each character to appear in the console. I attempted using React.memo and useCallback without success :/ Below is my code snippet: const [userData, setUserD ...

Calculate the number of days required for the value in an item to multiply by two

I'm currently working on a JavaScript project to create a table displaying the latest number of coronavirus cases. I've reached a point where I want to add a column showing how many days it took for the confirmedCases numbers to double. Here&apos ...

Maneiras de diminuir a margem das páginas utilizando CSS e trocar estilos de observação com um tema diferente

Looking for some assistance with a CSS override on the Remark theme to reduce page side spacing. Any tips? Project: Asp.net Core MVC. Thanks :) Remark image 1 image 2 //Page Code snippet here... ...

How can the "dragenter" event be allowed to pass through child elements?

https://jsfiddle.net/7scfk81L/ The structure of my document is as follows: <div id="container"> <div id="inner"></div> </div> I have added listeners for dragEnter and dragLeave to the container element. However, when I drag in ...

Steps to fetch real-time messages (data) from a database using AJAX and Django

I'm trying to implement real-time messaging using Ajax and Django for the backend. I have successfully set up the logic to send messages, but I am struggling with receiving messages instantly when another user sends me a message without having to refr ...

What steps can be taken to modify this jQuery code so that any changes made are also saved to localStorage

I have successfully used jQuery to change the background color of all my divs with the same class (userNumber1) when I check its checkbox. However, I am now looking for a way to save these changes to localStorage, so that they persist each time the page is ...

Show the div as a sidebar exclusively on mobile devices by utilizing bootstrap

Is there a way to have a div act as an overlay sidebar only on mobile devices, but function as a normal div on all other devices? Looking for a solution similar to the following sample code: <div class="row"> <div class="col-lg-3" id="sidebar ...

Configuring .env files for both production and development environments in Node.js

As I observed, there were various approaches to setting up environments in NodeJS - some seemed straightforward while others appeared more intricate. Is it possible to utilize package.json scripts to manage environment variables? If so, what is the best p ...

Clearing local storage in JavaScript after a certain period of time

On my signup page, I have divided the process into 5 stages and am using the user ID to track which stage they are at by storing it in local storage. However, I would like to automatically remove the ID from local storage if users leave my website without ...

Issue encountered while incorporating a PHP file into Javascript code

I'm facing a particular issue where I have a PHP file that is supposed to provide me with a JSON object for display in my HTML file. Everything seems to be working fine as I am receiving an output that resembles a JSON object. Here's the PHP file ...

The Facebook messenger checkbox plugin does not appear to be displaying correctly

I have integrated the Facebook Messenger Checkbox Plugin into my AngularJS application by following the guide provided at this link. Initially, I was able to successfully display the messenger checkbox plugin on a page. However, upon navigating to another ...

Pass along the value of a link upon clicking on it

I have implemented a simple list using md-data-table: <tr md-row md-select="device" md-on-select="logItem" md-auto-select="options.autoSelect" ng-repeat="device in devices.data"> <td md-cell style='text-align:left;vertical-align:middle&apo ...

What is the best way to export from a default-exporting module in ReactJS?

How can I fix this issue where the named export 'destinations' is being imported from a default-exporting module (only default export is available soon)? Here's the code snippet: import React from 'react'; import { useState } from ...

Preserving the <script> tag when defining HTML code

During an AJAX call, I am receiving plain HTML with some JavaScript code. When I try to display this response in a container using .html (jQuery) or innerHTML (plain JavaScript), it removes the <script> tag and all JavaScript code. However, when I c ...

Utilizing Vue.js to determine the placement of a button

After taking break from coding for some time, I have a question about how to position my Login button at the bottom center of the screen with an image displayed over it. Any help would be appreciated, thanks! Here is the code snippet: <template> ...

Using nextjs9 to render .svg files within an img tag

Currently working on upgrading a Migration project from Nextjs7 to Nextjs9, and encountering difficulties when trying to include .svg files in the image tag. If you'd like to see a DEMO of this issue, please visit: https://codesandbox.io/s/nextjs-mh9 ...

Error message: Angular JS function is not defined

I have been diving into AngularJS with the help of video tutorials from AngularJS.org. However, when I try to run my code, an error message pops up: Error: [ng:areq] Argument 'ReviewController' is not a function Even though my code mirrors th ...

Navigate within the div by scrolling in increments of 100%

I am facing an issue with a div that contains multiple children set to 100% height. My goal is to scroll exactly the height of one child (which is also 100%) on each scroll. However, I am struggling to prevent scrolling multiple steps at a time. I have tri ...