Using preventDefault will stop the page from scrolling

Question

Using preventDefault will stop the page from scrolling

I have developed a responsive website that allows users to bookmark it on their home screen. It would be ideal for the site to prevent the screen from displaying any grey background when scrolling to the top or bottom on tablets and phones, rather than snapping back abruptly.

I understand that using 'preventDefault' on the body can achieve this, but at present, it unfortunately disables scrolling altogether.

Below is the snippet of javascript code:

$(document).ready(function(){
  document.ontouchmove = function(e){e.preventDefault();}
});

And here is how the html call looks like:

<body ontouchmove="touchMove(event)">

javascript

Answer 1

Answer №1

To optimize the performance, it is recommended to capture the event and execute preventDefault only when it reaches a specific viewport or scrollTop position. Below is an example of how this can be implemented:

function getScrollTop(){
    if(typeof pageYOffset != 'undefined'){
        //most browsers
        return pageYOffset;
    }
    else{
        var body = document.body; //IE 'quirks'
        var docElement = document.documentElement; //IE with doctype
        docElement = (docElement.clientHeight) ? docElement : body;
        return docElement.scrollTop;
    }
}

You can then use the following code snippet to call preventDefault only when the scrollTop is at the top:

$(document).ready(function(){
      document.ontouchmove = function(e){ 
          if (getScrollTop() !== document.scrollTop) {
             e.preventDefault();
          }
     }
});

Answer 2

To optimize the performance, it is recommended to capture the event and execute preventDefault only when it reaches a specific viewport or scrollTop position. Below is an example of how this can be implemented:

function getScrollTop(){
    if(typeof pageYOffset != 'undefined'){
        //most browsers
        return pageYOffset;
    }
    else{
        var body = document.body; //IE 'quirks'
        var docElement = document.documentElement; //IE with doctype
        docElement = (docElement.clientHeight) ? docElement : body;
        return docElement.scrollTop;
    }
}

You can then use the following code snippet to call preventDefault only when the scrollTop is at the top:

$(document).ready(function(){
      document.ontouchmove = function(e){ 
          if (getScrollTop() !== document.scrollTop) {
             e.preventDefault();
          }
     }
});

Using preventDefault will stop the page from scrolling

Answer №1

Similar questions

Having issues with default sorting and searching not functioning in Datatables with Angularjs

The request for `/` cannot be fulfilled while serving an Angular application with Express and Node.js

Adjust the size of a div element with JavaScript

Utilizing React to highlight buttons that share the same index value upon hover

"JavaScript Object Notation ajax request results in an undefined

Using Vue to create a component that binds an array as its data source

Three.js emits a selection list

Creating a front-end angular application with npm and grunt commands

Discover Your Location in the Web Browser

Identifying issues in jQuery code - What could be causing this error?

Creating a click-away listener feature in your Next js application

Creating a barrier between objects in motion

Please ensure the public_id parameter is included and provide the necessary value for the imageId when working with Cloudinary

Is there a way to eliminate a certain word from being used?

Using AngularJS to iterate through a list of objects and apply filters based on the

Connecting node.js to a MySQL database on a WAMP/XAMPP server: A step-by-step guide

Configuring Monaco Editor in React to be in readonly mode

Troubleshooting npm start error: "Cannot find module: Error: Unable to resolve..." when relocating webpack/react files

Utilizing AngularJS to target DOM elements within an ng-repeat loop

Having difficulty retrieving the specific Laravel validation error message through AJAX