Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am using the jquery mousewheel plugin by Brandon Aaron along with a script that updates the top value to navigate through .js-slide elements based on scrolling.

In my fiddle link, you can see that it jumps between slides but restricts access to content outside #scroller. I want the mousewheel behavior to function normally. I have a live URL where I intend to implement this effect, if that information would be helpful.

Here is an outline of the structure and desired effect:

I attempted to confine my script to $('#scroller').mouseover(function(){/*my script*/}); however, this did not resolve the issue. The mousewheel started correctly, transitioned into jump mode effectively, but failed to return to normal once exiting the #scroller div.

The current version of my script is as follows:

jQuery(document).ready(function($) {

    var slide = $('.js-slide');
    var sectionHeight = $(window).height();
    var slideHeight = $(slide).height();    
    var scrollingScreen = false;

        $('#scroller').mouseover(function(){

            $(slide).mousewheel(function(event, delta) {
                if ( !scrollingScreen ) {
                    scrollingScreen = true; 
                    var top = $("body").scrollTop() || $("html").scrollTop();

                    var candidates = $(slide).filter(function() {
                        if ( delta < 0 )
                            return $(this).offset().top > top + (1);
                        else
                            return $(this).offset().top < top - (1);
                    });

                    if ( candidates.length > 0 ) {
                        if ( delta < 0 )
                            top = candidates.first().offset().top;
                        else if ( delta > 0 )
                            top = candidates.last().offset().top;
                    }

                    $("html,body").animate({ scrollTop:top }, "easeInOutQuint", function() {
                        scrollingScreen = false; 
                    });
                }
                return false; 
            }); 

       }); 

});

Any help or guidance on achieving this functionality would be immensely appreciated. Thank you!

Answer №1

After extensive searching, I finally stumbled upon the solution I was seeking! The plugin author had documented various mousewheel events on their website, including a technique for deactivating all such events and restoring normal scrolling with the function .unmousewheel() - just what I needed!

However, an issue arose with the script not being able to navigate beyond the final slide when scrolling down, or before the first slide when scrolling up. This prevented access to content located before and after #scroller using the scroll wheel. Consequently, I had to modify the script slightly to force a jump when reaching either end of the slideshow.

Here is the updated script:

jQuery(document).ready(function($) {

    var slide = $('#scroller .sectioncontainer');
    var sectionHeight = $(window).height();
    var slideHeight = slide.height();
    var scrollingScreen = false;

    slide.mousewheel(function(event, delta) {
        if (!scrollingScreen) {
            scrollingScreen = true; // prevent call

            var top = $("body").scrollTop() || $("html").scrollTop();

            var candidates = slide.filter(function() {
                if (delta < 0)
                    return $(this).offset().top > top + (1/120);
                else
                    return $(this).offset().top < top - (1/120);
            });

            if (candidates.length > 0) {
                if (delta < 0)
                    top = candidates.first().offset().top;
                else if (delta > 0)
                    top = candidates.last().offset().top;
            } else{
                if (delta < 0)
                    top = $("#contact").offset().top;
                else if (delta > 0)
                    top = $("#about").offset().top;
            }

            $("html,body").animate({ scrollTop:top }, "easeInOutQuint", function() {
                scrollingScreen = false; // Release call
            });
        }
        return false; 
    });

    $("#contact").unmousewheel();
    $("#about").unmousewheel();
    $("#div1").unmousewheel();
    $("#div2").unmousewheel();
    $("#div3").unmousewheel();
    $("#div4").unmousewheel();
    $("#div5").unmousewheel();
    // and other similar divs and sections where mousewheel functionality is not needed

});

You can view the resulting changes 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

Issue with AngularJS URLs not functioning properly when using HTML5 mode

Utilizing the AngularJS SPA template in Visual Studio. In my app.js file, I have the following code: $stateProvider .state('touranalysis', { url: '/touranalysis', templateUrl: '/views/touranalysis/index', ...

What is the process for getting non-event javascript instructions to function properly once a DOM element has been added

After inserting DOM elements (such as an AJAX response), event-delegation is necessary to ensure that events work properly. But what about basic JavaScript instructions? All instructions are organized by affected PHP page to simplify code updates and avoi ...

"Utilizing PHP with FTP and AJAX, or other comparable technologies

After successfully creating a PHP class for FTP server interaction (connecting, changing directories, uploading files, etc.), I am now eager to provide real-time updates to users about the actions happening on the server. For example, notifying them with m ...

"Automate the process of manual content duplication with JavaScript's for each replacement

Seeking a solution to automate the selection process without writing individual JS scripts for every input. For instance, having 10 double inputs (total of 20 inputs) and utilizing the each() function or other methods by only declaring selectors. Find th ...

Is there a way to prevent users from downloading PDFs or docs when they are opened in a new tab in a React application?

I recently encountered a situation where I needed PDF files to open in a new tab, but restrict the download for certain users. Despite trying out various third-party packages in React, none of them successfully rendered the PDF files as required. If poss ...

Using jQuery to target an element within the same hierarchy level

I am trying to achieve the following functionality: <ul id="notifications"> <li onclick="toggleArrived('{{Aircraft}}',this)"><div class="top notoff"><img src="../lib/img/arrived.png" /></div><div class="botto ...

Position two in-line divs at the bottom, one on each side

I am in search of a way to dynamically position two elements at the bottom of a container, making sure they are at opposite corners. Much like how the Stackoverflow Logo and the Ask Question are aligned at the bottom but on different ends of their containe ...

Exploring the intricacies of defining Vue component props in TypeScript using Vue.extend()

Here is a simple example to illustrate my question When I directly define my props inside the component, everything works fine <script lang="ts"> import Vue, { PropType } from "vue"; export default Vue.extend({ props: { col ...

``Changing the value of the radio button does not update the ng-model variable

I have encountered an issue with my code. Upon page load, the radio button is checked but the ng-model value session.payment does not get updated automatically. I have to manually select it again for the update to take effect. <li ng-repeat="method i ...

"Unexpected discrepancy: Bootstrap Glyphicon fails to appear on webpage, however, is visible

I am having some trouble getting the glyphicon to display properly in my side nav. The arrow head should rotate down, which is a pretty standard feature. Here is the link to the page: The glyphicon should be visible on the "Nicky's Folders" top leve ...

Using ObjectIDs in MongoDB may be successful, however, it may not function properly in Mongoose

The desired effect is successfully achieved by the first code snippet shown below: //in mongodb console: db.collection.update({"username":"name"}, {$pull : { "task" : { "_id" : ObjectId("55280205702c316b6d79c89c")}}}) However, the second code snippet wri ...

Utilizing JSON parse/stringify for data manipulation

I'm seeking advice on manipulating JSON data using JavaScript, particularly with the stringify/parse methods. In this scenario, I start by creating a JSON string and then use parse to convert it into an object. However, my goal is to efficiently delet ...

Mastering the art of seamless navigation within a single page through the magic of

I have two HTML pages: "Login.html" and "index.html". Instead of a normal href linking, I want the user to navigate to "index.html" when they click on the login button. Furthermore, I want the index page to be displayed within the codes of login.html, cre ...

Looking for a demonstration using dust.js or handlebars.js in a two-page format with express3.x and node?

Currently, I am in the process of selecting a templating engine to use. While I have come across numerous single-page examples utilizing template engines, I am specifically searching for a practical example that demonstrates handling two distinct pages whi ...

What is the best way to accurately determine the height and offset values of an element while utilizing ng-repeat?

My objective is to determine the offset and height of list items. Once I have those values, I trigger a function in a parent directive. Ultimately, this will involve transitioning elements in and out as they come into view. Issue: Due to the use of ng-rep ...

Unable to locate the element within the specified div using xpath or css selector

I have attempted to retrieve the output "January 27" using this code: task_offer_deadline = driver.find_element_by_xpath('//*[@id="table"]/div[2]/div/a/div[1]/span[2]/div/em').text The xpath was obtained from Google Chrome Console. Here is a sn ...

Looping through color transitions upon hover using CSS

I am trying to create a color transition effect on hover, where the background changes from yellow to red and then back to yellow in a loop. I'm having trouble figuring out how to make this transition repeat continuously. Do I need to incorporate Java ...

What are the steps I need to take in order to resolve the

How do I troubleshoot this issue? Error: Failed to load gRPC binary module because it was not installed for the current system Expected directory: electron-v6.0-win32-x64-unknown Found: [node-v57-win32-x64-unknown, node-v72-win32-x64-unknown] This problem ...

Tips for extending the space between one element and another when the width decreases:

Currently in the process of building a website using HTML/CSS/JS and have run into an issue. My front page features an image with text overlay, where the image has 100% width and a fixed height of 487px. I positioned the text using position:relative; and t ...

How to Monitor Clicks on a Flash Movie using jQuery

I've been working on a dynamic banner system that can support image banners and flash banners using object/embed. The site relies heavily on jQuery, especially for handling 'click' events. While tracking clicks on image banners is straightf ...