Skip to main content

How to Disable Scrolling on Mobile Devices

 How to Disable Scrolling on Mobile Devices

So let’s start out with setting the viewport meta in the head tags to non-scalable, like so:

<meta name="viewport" content="width=device-width, user-scalable=no">
This will disable the pinch–and–zoom effect as expected, but if you swipe vertically, the viewport will scroll and you’ll end up seeing a random bar at the bottom of the HTML page. That “bar” is the color of the HTML page below your view, which is showing because of what seems like extra padding at the bottom of the HTML. I’m not sure why this happens, but it’s not an issue with your code! This undesired effect happens on both Android and iOS browsers. In addition to how bad it looks, your app or game just got moved out of the viewport slightly!
Luckily, this is an easy fix. If you’re using jQuery, you would use this snippet of code:
$(document).bind('touchmove', function(e) {
 e.preventDefault();
});
Otherwise, if you’re not, here’s the javascript straight-up:
document.addEventListener('touchmove', function(e) {
 e.preventDefault();
}, false);

What is the code doing?

Essentially, you are just adding an event listener for the mobile browser “touchmove” event. When the listener hears that event it fires the anonymous callback function that passes the “touchmove” event as a parameter and prevents its default action. This reasoning is the same for both the jQuery and javascript snippets above, the only differences are syntax.
Like I said, easy to fix, but painful if you are unaware of why that’s happening. It’s one of those bugs that would drive you crazy and kill way too much time if you didn’t know. I hope this little tip on how to disable scrolling on mobile devices was helpful and as always, please share your thoughts and comments below.
Labels:

Comments

Post a Comment

Popular posts from this blog

FAQ's Salesforce Lightning Platform Query Optimizer

This article comprises the FAQs related to salesforce internal platform Query Optimizer.and provides valuable information that will help understand how to improve the performance of SOQL queries. For more information, you may also check this Dreamforce Session . 1. Query Optimizer Q: Does Salesforce have its own SQL optimization logic instead of Oracle's built-in? A: Force.com is a multi-tenant platform. To consider multitenant statistics, the platform has its own SOQL query optimizer that determines optimal SQL to satisfy a specific tenant's request. Q: How frequently generated are the statistics used by the query optimizer? A: Statistics are gathered weekly. Where statistics are not calculated, the optimizer also performs dynamic pre-queries, whose results are cached for 1 hour Q: Is there any way to flush the cache when doing your performance testing so your results are not cached biased? A: Unfortunately not. Queries with selective filters will perform mor...
1 comment
Read more

Javascript global variables

Question :  is there any difference between declaring a variable var a = 0 ; //1 and this way a = 0 ; //2 or window . a = 0 ; //3 in global scope? Soloution:      Yes, there are two differences, though in practical terms they're not usually big ones.  three statements explained var a = 0 ; ...creates a variable on the  variable object  for the global execution context, which is the global object, which on browsers is aliased as  window  (and is a DOM window object rather than just a generic object as it would be on non-browser implementations). The symbol  window  is, itself, actually a property of the global (window) object that it uses to point to itself. The upshot of all that is: It creates a property on  window  that you cannot delete. It's also defined before the first line of code runs (see "When  var  happens" below). Note that on IE8 and earlier, the property created on  ...
Post a Comment
Read more

NoSQL Database (20 Best Free Open Source NoSQL Databses

  NoSQL databases are becoming popular day by day. I have come up with the list of best, free and open source NoSQL databases. MongoDB tops the list of Open Source NoSQL databases. This list of free and open source databases comprises of   MongoDB, Cassandra, CouchDB, Hypertable, Redis, Riak, Neo4j, HBASE, Couchbase, MemcacheDB, RevenDB and Voldemort.   These free and open source NoSQL databases are really highly scale-able, flexible and good for big data storage and processing. These open source NoSQL databases are far ahead in terms of performance as compared to traditional relational databases. However, these may not be always the best choice for you. Most of common applications can still be developed using traditional relational databases. NoSQL databases are still not the best option for a mission critical transaction needs. I have listed down a small description of all these best free and oper source NoSQL databases. Lets have a look.. 1. MongoDB MongoDB ...
Post a Comment
Read more