Detecting the directional scrolling on a page with the rubber band effect disabled

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body{
    margin: 0;
    min-width: 980px;
    padding: 0; 
    height: 100%;
    width: 100%;
    overflow: auto;
}

In order to prevent macOS rubber band scrolling and detect the scroll direction, the following CSS and JavaScript are being used:

var iScrollPos = 0;
$(window).scroll(function () {
    var iCurScrollPos = $(this).scrollTop();
    if (iCurScrollPos > iScrollPos) {
        console.log('down');
    } else {
        console.log('up');
    }
    iScrollPos = iCurScrollPos;
});

However, the element $(window) is not relevant due to the CSS styles applied.

javascriptjquerycss

Answer №1

Give this a shot: 

html {
  height: 100%;
  width: 100%;
 // overflow: hidden;  -delete this line
}

Here is a demo of it in action:

http://jsbin.com/iKaQuzO/1/edit

Answer №2

I stumbled upon a clever solution to disable the annoying "rubber band" scrolling effect and even detect whether the user is scrolling upwards or downwards.

If you're interested, check out jquery.mousewheel.js along with this javascript snippet.

$('body').bind('mousewheel', function(event, delta, deltaX, deltaY) {
    if(delta > 0 )
       console.log('up');
    else
       console.log('down');
});

Important: This method only works if the user is scrolling using the mouse wheel on the page.

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

Navigating to the left while implementing right-to-left formatting on a single webpage

I'm currently working on a website and I decided to make it right-to-left (RTL). Everything looks good on the website, except for one specific page. I'm experiencing some difficulties in implementing RTL on this particular page. Although the ot ...

csswordpresswordpress-themingoverflowright-to-left

What is the best way to retrieve a jobID from Kue?

I am currently working with Express and I'm facing a challenge in creating a job whenever someone posts to my route. My goal is to have the response include the job.id, but the job id is only generated within the callback of my queue.createFunction. I ...

javascriptnode.jsexpresskue

Mastering the map() and reduce() functions in JavaScript: A step-by-step guide

I have been working on a simple function to calculate prime numbers using a NoSQL database. Despite trying different approaches, I kept encountering an error stating that the value I was searching for is not defined. Any feedback or suggestions would be gr ...

javascriptnosqlmapreduce

What is the process for inserting text into a Word document using the Google Docs API?

Struggling to generate a Word document with text and images, but the text refuses to show up. My document remains blank, even though there seems to be no issue with my code. Any guidance on what I might be missing would be greatly appreciated. gapi.client ...

javascriptgoogle-docs-api

Ways to establish a default option in a dropdown menu using JavaScript

I am currently attempting to link a JSON object to a dropdown in the following manner: JSON data "securityQuestions": [ "First Pet's Name", "City I was born in", "Mother's Maiden Name", "Favorite teacher's Name" ] This i ...

javascriptjqueryjsonhtml.dropdownlistfor

Harness the power of Ionic by utilizing the same HTML template across various pages, while easily customizing the content

I need help with streamlining my Ionic app that has multiple pages with similar HTML structures but different content. Is there a way to use just one HTML file and dynamically fill in the content? Should I use a controller for each page, or is there a more ...

javascripthtmlangularjsionic-framework

Tips for choosing a nested element within a div using CSS

I'm looking to target a specific child element within a div using CSS. Here's the HTML code I have: <div class='body'> <text>This is a text element</text> </div> Instead of adding a class or an ID, I want to ...

htmlcss

What could be causing my divs to not properly handle overflow with the overflow-y scroll property?

I'm struggling with making my sidebar and content area responsive in terms of height. I want them to adjust to fill the screen appropriately, rather than having a fixed height. The issue arises when I have varying content heights, such as when a page ...

htmlcssbootstrap-5

Flawless 2D mouse selection using Canvas for pixel-perfect accuracy

Currently, I am developing a 2D game in HTML5 using Canvas that requires precise detection of mouse click and hover events. The main challenges I am facing include the need for pixel-perfect detections, working with non-rectangular objects such as houses a ...

javascripthtmlcanvas

Issues while closing the mobile menu using toggleClass

I'm currently troubleshooting a mobile menu issue on a website that I didn't create, so the developer's code is a bit unfamiliar to me. I thought fixing it would be simple, but I'm having difficulty figuring it out. Essentially, when th ...

jquerymobiledrop-down-menumenutoggleclass

Navigating Sockets with Navigator in React Native

Every time I encounter the error message undefined is not an object (evaluating this.props.socket.on). In my code, I define the socket in the index.ios.js file as shown below: class Main extends Component { constructor(props) { super(props); ...

javascriptsocketsreactjscomponentsreact-native

Combining Three.js with iFrame for a mix of WebGL and CSS3D

After some experimentation, I successfully created a dynamic page that seamlessly integrates WebGL and CSS3D (with valuable guidance from this helpful SO post). To add an extra touch, I included an iframe: However, I noticed that the functionality to inte ...

javascripthtmlcssthree.js

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Hello, I'm new to this website and please excuse me if my English is not perfect, I am trying my best to communicate :) I have been working on a page that calculates the total hours worked in a day and this is what I have achieved so far until 15/06 ...

javascriptcsshtml

Is it possible to consolidate React and React-DOM into a unified library instead of having them separate?

Is it possible to combine React.JS and React-DOM.JS into a single library? In all the web applications I've encountered, we always have to import both libraries separately. Have there been any cases where either of these libraries can be used on its ...

javascriptreactjsreact-dom

Data not maintained when page is reloaded

I am in the process of implementing a login panel on my index page. The login data will be sent via an ajax call. Upon successful verification of the username and password, I am storing the user data in a session and then reloading the index page upon ajax ...

phpjqueryajaxsession

Sequential execution of multiple useState updates when an update triggers a re-render

Can you explain why the function setPeople is being executed after setFirstName, setEmail, and after the event handler has been exited? const [firstName, setFirstName] = useState(''); const [email, setEmail] = useState(''); const [peopl ...

javascriptreactjs

What is the best way to use ajax to load a particular div or class from a file?

In my main.html file, there are several divs each with 2 classes. The first is their specific class and the second is a class called menu-item, which determines if an event will be triggered when clicked. For example: <div id="load-here"> </div ...

javascriptjquerycssajaxweb

I am having trouble retrieving a JsonResult from an asp.net mvc controller using $resource in angular

I am new to Angularjs and trying to integrate it with asp.net mvc. I am facing an issue where I am unable to access an asp.net mvc controller to return a JsonResult using $resource in angular. Strangely, when I use $.getJson in JavaScript directly, it work ...

javascriptasp.netangularjsasp.net-mvc

Looping through data and converting it into a JSON format can

Can anyone help me figure out how to work through this JSON data using VUE? I'm having trouble accessing keys that v-for can't seem to reach: [ { "Lavandería": { "id": 1, "name": "Lavandería", "i ...

javascriptvue.jsv-for

Avoid excessive clicking on a button that initiates an ajax request to prevent spamming

When using two buttons to adjust the quantity of a product and update the price on a digital receipt via ajax, there is an issue when users spam the buttons. The quantity displayed in the input box does not always match what appears on the receipt. For in ...

javascriptjqueryajax