The speed of the jQuery mouse scroll script remains constant and cannot be altered

I've been searching online...

I attempted to adjust the scrolling settings on my website but nothing seems to be working.

Does anyone have a guide or list of mouse scroll jQuery scripts and functions?

(I've cleared caches, performed cross-browser tests, etc.)

jQuery(window).load(function(){  

    if(checkBrowser() == 'Google Chrome' && device.windows()){

        if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);

            window.onmousewheel = document.onmousewheel = wheel;



            var time = 330;

            var distance = 300;


            function wheel(event) {

                if (event.wheelDelta) delta = event.wheelDelta / 90;

                else if (event.detail) delta = -event.detail / 3;

                handle();

                if (event.preventDefault) event.preventDefault();

                event.returnValue = false;

            }



            function handle() {

                jQuery('html, body').stop().animate({

                    scrollTop: jQuery(window).scrollTop() - (distance * delta)

                }, time);

            }

    }

});

function checkBrowser(){

    var ua = navigator.userAgent;



    if (ua.search(/MSIE/) > 0) return 'Internet Explorer';

    if (ua.search(/Firefox/) > 0) return 'Firefox';

    if (ua.search(/Opera/) > 0) return 'Opera';

    if (ua.search(/Chrome/) > 0) return 'Google Chrome';

    if (ua.search(/Safari/) > 0) return 'Safari';

    if (ua.search(/Konqueror/) > 0) return 'Konqueror';

    if (ua.search(/Iceweasel/) > 0) return 'Debian Iceweasel';

    if (ua.search(/SeaMonkey/) > 0) return 'SeaMonkey';

    if (ua.search(/Gecko/) > 0) return 'Gecko';

    return 'Search Bot';

}
javascriptjquerycsshtml

Answer №1

The code appears a bit outdated. The function .load() is no longer used in the same way, and browser sniffing is considered obsolete. Using the mousewheel plugin would be a more reliable and future-proof approach. Here's a concise script that utilizes the plugin:

http://codepen.io/anon/pen/KpPdmX?editors=001

jQuery(window).on('load', function() {

  var time = 330;
  var distance = 300;

  jQuery(this).mousewheel(function(turn, delta) {

    jQuery('html, body').stop().animate({

      scrollTop: jQuery(window).scrollTop()-(distance*delta)

    }, time);

  return false;
  });
});

// Additional script for mousewheel.js can be placed here, outside of function scope

Although some extra script is required with the plugin, it proves to be valuable. Another option is the wheel event, but unfortunately, it's not supported by Opera. Normalizing the delta of mousewheel turns would necessitate more code, where mousewheel.js excels.

If the $ character is not reserved on the web page, consider replacing jQuery references with it. Make sure to check the version of jQuery linked on the site, as updating may impact scripts relying on deprecated features. The .on method was introduced in version 1.8 - if sticking with an older version, a minor rewrite of the above script may be required.

Answer №2

Make sure to include this function within your script tag

Additionally, add data-scroll-speed="10" to your body tag in order to adjust the scrolling speed of the body

$(function () {
            var boxes = $('[data-scroll-speed]'),
        $window = $(window);
            $window.on('scroll', function () {
                var scrollTop = $window.scrollTop();
                boxes.each(function () {
                    var $this = $(this),
          scrollspeed = parseInt($this.data('scroll-speed')),
          val = -(scrollTop / scrollspeed);
                    $this.css('transform', 'translateY(' + val + 'px)');
                });
            });
        })

For a demonstration, you can view a working example here

Ensure that this meets your requirements

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

What are some ways to display unprocessed image data on a website using JavaScript?

I have an API endpoint that provides image files in raw data format. How can I display this image data on a website using the img tag or CSS background-image property, without utilizing canvas? One possible approach is shown below: $.get({ url: '/ ...

javascripthtmlcssimage

What is the mechanism behind Angular or JS retrieving data without the need for defining a parameter name?

The title of this question may not fully capture what I am trying to ask. To provide more clarity, consider the following example: .service('Book', function($http) { var bookService = {}; Service.getBook = function() { return $http.g ...

javascriptangularjs

css effect of background image transitioning on mouse hover

Is there a way to have an element on my webpage with a background image that follows the movement of the mouse when hovered over? I want it to be similar to this website: This is the HTML code I currently have: <section id="home" data-speed="3" data-t ...

javascriptjqueryhtmlcss

Is a missing dependency causing an issue with the React Hook useEffect?

I've encountered an issue with the following code snippet, which seems to only depend on [page]. Despite this, I am receiving the error message: React Hook useEffect has a missing dependency I've come across similar discussions suggesting to com ...

javascriptreactjs

Troubleshooting issue with Django development server causing HTML5 video element to become non-seekable

My Django app is currently serving a webpage with an HTML5 video element, but I've encountered a strange issue. The video.seekable property is returning a timeRanges object with a length=0, when it should actually be length=1. Unfortunately, this mea ...

javascriptpythondjangohtmlhtml5-video

Problem with disabling dates on jQuery datepicker

After spending several days trying to solve this issue, I've decided to seek help. The problem at hand is disabling dates in my bootstrap datepicker using the following HTML code: <head> <!-- Required meta tags --> <meta charset="utf-8 ...

javascriptphpjquerybootstrap-4bootstrap-datepicker

What is the best way to ensure that text highlighting appears consistent on all browsers?

I am facing an issue with the appearance of text highlighting between Chrome and Firefox browsers. Is there a way to ensure consistency in the appearance across all browsers? a { text-decoration: none; font-weight: 900; font-size: 4vw !impo ...

css

Creating a many-to-many relationship in Sequelize using a join table to insert data

I recently set up two models in sequelize with a many-to-many relationship. While Sequelize successfully created the join table, I am facing difficulties when trying to insert data into it. Despite going through the documentation section on associations ...

javascriptnode.jsreactjssequelize.jssequelize-cli

Ways to modify the height of a button without impacting other buttons?

My goal is to create a calculator that looks like the image attached below: However, I'm having trouble aligning the equal button properly. How can I adjust it to match the equal button in the image? Here's the code snippet I'm currently w ...

htmlcsstwitter-bootstrap

There is no way to convert a strongly typed object into an observable object using MobX

I have been utilizing the MobX library in conjunction with ReactJS, and it has integrated quite smoothly. Currently, I am working with an observable array structured as follows: @observable items = []; When I add an object in the following manner, everyt ...

javascripttypescriptobservablemobxmobx-react

Having issues with Exit Property functionality in Framer Motion when using react js

Help Needed: Framer Motion Exit Property Not Working I've been trying to get the exit motion to work on Framer Motion with React JS for over a week now, but everything else seems to be functioning correctly. I have installed the latest version of Fra ...

javascriptreactjsmaterial-uiframer-motionframerjs

C#: Issues with loading static content in MVC on various environments with IIS

Within my C# MVC 4.5 Website, I recently introduced a new folder to host CMS-type applications separately from the main site. While everything seemed fine during local testing, issues arose after deploying the updates to the DEV environment. A closer look ...

c#cssasp.netasp.net-mvciis

Prevent the collapse functionality in a Material-UI Stepper component

Currently in the development phase of a React website using Material-UI, with a focus on incorporating the Stepper component. Is there a method available to prevent the collapse and expansion of each individual StepContent in a vertical Stepper? The goal ...

htmlreactjsmaterial-ui

What could be causing my vis.js network's node hover popups to not function properly?

I've encountered an issue where, despite adding the 'title' property to my node objects, the pop up window with the title content doesn't appear when I hover over a node. Here are the options I've chosen and how I've set up m ...

javascriptnode.jstypescriptvis.jsvis.js-network

Middleware in the form of Try and Catch can be utilized to handle errors and

Currently, I am working on developing a backend using node.js with Express. My main goal is to effectively handle any potential status 500 errors that may arise. router.put('/test', async (req, res) => { try { return res.send(await r ...

javascriptnode.jsexpresserror-handling

Displaying data stored in a database using JSON format with Ember

I seem to be facing a challenge once again. Let me elaborate on what I am trying to achieve. Within the teammembers template, I aim to display information about Team Members and their details from a specific team by joining 3 tables. Here is an example o ...

javascriptajaxarraysjsonember.js

What is the best way to eliminate the gap between inline-block elements?

I'm trying to make two inline-block divs with width: 50% each fit on one line. <div class="inline">Left one</div> <div class="inline">Right one</div> I know a practical solution, but I also want my code to look nice. <div ...

htmlcss

I am attempting to push notifications to a particular device using Firebase cloud functions

I am currently developing a chat app using Flutter, and I am attempting to send notifications to specific devices using a cloud function. The goal is for a user to send a message to a friend and have the friend receive a notification with the message. Howe ...

javascriptnode.jsflutterfirebasegoogle-cloud-functions

What is the best way to save multiple HTML widgets in my HTML file using R and plot.ly?

I have recently started experimenting with plot.ly in R and I am fascinated by the ability to easily publish graphs directly in html using htmlwidgets. However, I have encountered a challenge when trying to save multiple widgets in the same html file. Curr ...

htmlrggplot2plotlyhtmlwidgets

Error in Prisma: Unable to retrieve data due to undefined properties (attempting to access 'findMany')

Recently, I've been working on a dashboard app using Prisma, Next.js, and supabase. Encountering an issue with the EventChart model in schema.prisma, I decided to create a new model called EventAreaChart. However, after migrating and attempting to ex ...

javascripttypescriptnext.jsprismasupabase