My website is experiencing issues with the functionality of the jQuery scroll feature

For a section of my website, I am utilizing jquery scroll functionality. Below is the code I am using within $(document).ready():

var div = $('#wrap'),
    wrapScreenHeight = div.height(),
    wrapHeight = div.outerHeight(),
    listHeight = div.find('ul').outerHeight();

div.on('mousemove', function(e) {
    var cPointY = e.pageY,
        dP = ((cPointY / wrapHeight));
    div.scrollTop((listHeight * dP) - wrapScreenHeight);

});

Here is my HTML and CSS:

<div id="wrap">
                <ul>

            <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                        <li><h3><a href="#">سینما نباشد دنیا نیست</a></h3></li>
                      ...
                    <li><h3><a href="#">سینما نباشد دنیا نیست</a>just comedown but it doesn't go up</h3></li>


                  </ul>
                </div>

The code functions correctly on jsfiddle. However, when implemented on my website, the scrolling only goes down and does not move back up as the mouse moves. Here is my website link.==>I have added a 1px red border around the scroll section on my website!! And here is the jsfiddle link for reference.

Answer №1

Unfortunately, the code does not seem to work properly in Fiddle. Even if you adjust the div position by 300px (for instance), it still behaves similarly to how it functions on your website (check your modified fiddle where it fails).

When onmousemove is triggered, the variable e captures the mouse's position relative to the document, rather than relative to your div.

var div = $('#wrap'),
    wrapScreenHeight = div.height(),
    wrapHeight = div.outerHeight(),
    listHeight = div.find('ul').outerHeight();

div.on('mousemove', function(e) {
    var cPointY = e.pageY-$(this).position().top, //<== the cursor's position relative to the div, not the document
        dP = ((cPointY / wrapHeight));
    div.scrollTop((listHeight * dP) - wrapScreenHeight);

});

Take a look at the updated Fiddle here

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

passport.js and express: TypeError - Router.use() must be given a middleware function, but instead received a ' + gettype(fn)

I encountered an error while using passport.js with Express.js TypeError('Router.use() requires a middleware function but got a ' + gettype(fn)) This issue arose from the following code: passport/local.js var LocalStrategy = require("passport ...

Stopping the use of <script> tags within HTML form submissions

After launching my website at , I discovered that a user is attempting to redirect it to different websites using HTML form input tags. While I'm unsure of the exact method they are employing, I am seeking a way to block users from entering these nefa ...

Providing an image in a Django web application

I'm having trouble displaying an image on my Django web app. Despite placing the image in the static folder, and the hello.html in the templates folder, I'm still getting a broken image link. Below is the content of hello.html: {% load static %} ...

What is the formula to determine the precise hue-rotate needed for producing a particular shade?

I'm looking to change the color of a white background image in a div to match the main theme color. I know I can use filters like sepia(), saturate(10000%), and hue-rotate() to achieve this, but is there a way to calculate these values beforehand? Sin ...

Extract all links from an external website

I'm attempting to extract all the URLs from a webpage using jQuery so that I can later use them with $.get(). If these URLs were located on the same page as the script, retrieving them would be easy by doing something like var links = document.getEle ...

Save information in a nested object within local storage by utilizing a dynamic key

Storing the below object in localStorage to simulate server-side login/logout functionalities. Current user logic is implemented to identify the logged-in user. let defaultUsers = [ { email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" ...

What could be the reason for my empty $routeProvider?

Question: I'm facing an issue with the $routeProvider in my code. Here's my configuration: $routeProvider .when('/language/:countryCode', routing) .when('/promotion/:promotionCode', routing) .otherwise ...

Equal dimensions for all cards in the TailwindCSS gallery display

I am currently working on an image gallery in React with Tailwind CSS. Here's a glimpse of how it looks: https://i.stack.imgur.com/ABdFo.png Each image component is structured like this: <div className="flex items-center"> < ...

Displaying a loading spinner while waiting for the Vue.js app to render

Currently, I am developing a Vue.js application and I'm facing a challenge in adding a loading spinner before the app component is rendered. Instagram has a similar feature where they display their logo before showing the page contents. I have tried v ...

Is there a way to modify an npm command script while it is running?

Within my package.json file, I currently have the following script: "scripts": { "test": "react-scripts test --watchAll=false" }, I am looking to modify this script command dynamically so it becomes: "test&qu ...

Struggle arising from the clash between a customized image service and the built-in image element

Dealing with a custom Angular service called Image, I realized that using this name poses a problem as it clashes with Javascript's native Image element constructor, also named Image. This conflict arises when attempting to utilize both the custom Im ...

"Utilizing Bootstrap to position the right column at the top on a mobile platform

I am in need of assistance with getting the correct div to display on top when viewed on a mobile device using Bootstrap. The issue is discussed and resolved in this particular discussion. To clarify, I would like my desktop layout to appear as follows: A ...

Personalized categorization of d3 information

My json data consists of timestamps like: [{"Time":"2017-02-07 16:14:06"}, {"Time":"2017-02-07 16:58:49"}, {"Time":"2017-02-07 17:07:11"}, {"Time":"2017-02-07 18:13:19"}, {"Time":"2017-02-07 13:56:06"}, {"Time":"2017-02-07 19:07:57"}, {"Time":"2017-02-07 ...

Display or conceal elements using the unique identifier selected from a dropdown menu in JavaScript

I have been searching the internet for a solution to my issue but nothing seems to be working. Here is the problem: Unfortunately, I cannot modify the TR TD structure and am unable to use DIVs. I am trying to dynamically display certain TD elements based ...

The appearance of success in the form is not being adequately shown

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href= ...

Show validation message using Bootstrap near the submit button

My form consists of around 40 questions, some required and some optional. Upon clicking "submit," I utilize Bootstrap's form-validation.js to verify the form before submission, which works seamlessly. However, due to the length of the form, when a us ...

Ways to design siblings that are not currently being hovered over

Is there a way to achieve an effect where hovering over one list item causes all other list items to fade out? I'm searching for a method to style an element that is not being hovered, when one of its siblings is in the hovered state. I've trie ...

Is it possible to trigger the @click event in Vuejs when utilizing v-html to render HTML content?

Here is an interesting HTML scenario: errorText: '<a class="button" @click.prevent="enableExceedable(issue.mapping)">Enable exceedable limits</a>'; I am trying to insert this string into the following div: <div v-if="hasIssue != ...

What is the best way to retrieve information from an HTML file element using jQuery AJAX?

Here is an html form that uses an html file to upload an image... <html> <head> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <form method="" action="" enctype="multipart/form-data" ...