Identify scrolling action in Android web browser

Seeking a way to detect the scroll event in the Android browser (I am using version 2.1, but I need it to function on older versions as well). It feels like an impossible task!

Initially, I attempted:

document.addEventListener('scroll', function(){ alert('test'); }, false);

However, nothing happens except when the page is loading.

I then decided to get creative and emulate the scroll event by: 1. Detecting touchend 2. Monitoring window.pageYOffset to determine when scrolling stops 3. Manually initiating the desired function on scroll.

Unfortunately, the touchend event doesn't seem to trigger either... in fact, it only works if we tap the screen without scrolling (touchstart + touchend). Once we scroll between taps (touchstart + touchmove + touchend), everything breaks.

At this point, my simplest example consists of:

document.addEventListener('touchend', function(){ alert('test'); }, false);

Yet, the alert does not display when we scroll with our finger and release the touch...

If anyone has any suggestions, they would be greatly appreciated.

Thank you.

javascriptandroidevent-handlingscrolltouch

Answer №1

One possible approach is to examine the code for JQuery Mobile, which supposedly works with android browsers and includes scroll event listeners.

According to the documentation at least!

Check out the source here

$.event.special.scrollstart = {
    enabled: true,

        setup: function() {
            var thisObject = this,
                $this = $( thisObject ),
                    scrolling,
                    timer;

            function trigger( event, state ) {
                scrolling = state;
                var originalType = event.type;
                event.type = scrolling ? "scrollstart" : "scrollstop";
                $.event.handle.call( thisObject, event );
                event.type = originalType;
            }

            // iPhones have a slight delay before triggering scroll events; use touchmove instead
            $this.bind( scrollEvent, function( event ) {
                if ( !$.event.special.scrollstart.enabled ) {
                    return;
                }

                if ( !scrolling ) {
                    trigger( event, true );
                }

                clearTimeout( timer );
                timer = setTimeout(function() {
                    trigger( event, false );
                }, 50 );
            });
        }
};

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

Storing the slider value in a universal variable and displaying it in a div

I am currently working on a jQuery slider feature for my project. My goal is to extract the value from the slider, display it in a div element, and store it as a global JavaScript variable. It needs to perform these actions immediately as the slider is bei ...

javascripthtmlcsscanvas

"Disabling the promise manager in selenium-webdriver: A step-by-step guide

According to the information provided on https://code.google.com/p/selenium/wiki/WebDriverJs#Promises, the selenium-webdriver library utilizes an automatic promise manager to streamline promise chaining and avoid repetitive tasks. However, there are situa ...

javascriptseleniumselenium-webdriver

How can I make a polygon or polyhedron using Three.js?

Is it possible to generate polygon or polyhedron shapes in three.js using alternative methods? var customShapePts = []; customShapePts.push( new THREE.Vector2 ( -50, 200 ) ); customShapePts.push( new THREE.Vector2 ( 100, 200 ) ); customShapePts.push( ne ...

javascriptthree.jspolyhedra

Node Error: The module './lib/querystring' is nowhere to be found

Every time I attempt to execute the command node ./bin/www Error: Cannot find module './lib/querystring' at Function.Module._resolveFilename (module.js:327:15) at Function.Module._load (module.js:278:25) at Module.require (module.js ...

javascriptnode.jsnpm

What causes the variable within the useEffect function to delay its value update?

const [inputValue, setInputValue] = useState(""); const previousInputValue = useRef(""); useEffect(() => { previousInputValue.current = inputValue; }, [inputValue]); return ( <> <input type="text" value={ ...

javascriptreactjsreact-hooks

The Android application using libgdx is sent to the background after some time has elapsed

After a thorough examination of the issue, I have decided to rephrase the question: Greetings, I am feeling quite hopeless! I am in need of assistance! I have dedicated a significant amount of time to this application and have been unable to resolve a bug ...

javaandroidcrashlibgdxandroid-logcat

What is the process of invoking a secondary "external" function with Nodejs, Expressjs, and bluebird?

Struggling with creating a nodejs application, a new area for me. I've managed to work with Promises and fetch data from a database. Take a look at the code below: myModel.js var express = require('express'); var app = express(); var Promi ...

javascriptnode.jsexpressbluebird

Guide to capturing and playing audio on iOS6 with HTML5

Our team is currently working on a web application using HTML5 and Javascript. We are facing a challenge with implementing voice recording functionality, as the Wami Api we tried is not compatible with iPad due to its use of flash for recording. Could yo ...

javascriptjqueryhtmlios6

How can Vue assign a distinct v-model parameter during iteration?

I need help with assigning unique parameters in a loop to each input tag using v-model. Here is the code that I have attempted: <template> <div v-for="item in lst" key="item"> <input :v-model="item"> </i ...

javascripthtmlvue.js

Finding queries in MongoDB collections seem to be stalling

I have been attempting to create a search query to locate a user by their username. Here is the code: userRouter.get('/user/:user_username', function(req, res) { console.log("GET request to '/user/" + req.params.user_username + "'"); ...

javascriptnode.jsmongodbexpress

Unexplainable space or padding issue detected in OwlCarousel grid gallery

There seems to be an unusual gap or margin at the bottom of each row section in this portfolio grid gallery that's running in OwlCarousel. You can view an example here. https://i.stack.imgur.com/NHOBd.png I've spent a lot of time trying to solv ...

javascriptjqueryhtmlcssowl-carousel

not getting any notifications from PHP

Despite receiving a status of '1' from this process file, my JavaScript code seems to be working fine. However, I am facing an issue with not receiving the email. <?php //Retrieve form data. //GET - user submitted data using AJAX //POST - in ...

phpjavascriptajax

What makes components declared with "customElements.define()" limited in their global usability?

I've been tackling a project in Svelte, but it involves some web components. The current hurdle I'm facing is with web components defined using the customElements.define() function in Typescript, as they are not accessible unless specifically im ...

javascripttypescriptsvelteweb-component

Utilizing the jQuery Serialize Method in Your Codebase

After users choose specific facets to narrow down their search query, they often bookmark the page. In order for the refinements panel to include these selected facets in the URL each time a facet is added or removed, serialization capability is required. ...

javascriptjqueryserialization

Using Nested Maps in React to Fetch JSON Data

As someone who is relatively new to javascript and react, I've been honing my skills by practicing various techniques. Currently, I'm trying to work with JSON data to render multiple HTML blocks in a format resembling a basic schedule. Initially, ...

javascriptjsonreactjs

Storing constant objects in Android using SQLite and JSON within a list

I have an Android application that requires storing approximately 100-200 constant predefined objects. These objects consist of names and various attributes, and users should be able to view a complete list and filter them by name or attributes. What would ...

javaandroidjsonsqlite

When executing npm run build, the fonts are not displayed properly in Vite

I'm running 'npm run build' to compile my project, and then I use the 'npm run preview' command to view it. However, some images that I've set as background images in my SCSS file are not showing up. The same issue occurs with ...

javascriptcsstypescriptvue.js

When jQuery's `foo.html("<span>bar</span>")` doesn't alter `foo[0]`, what implications does it have?

While using jQuery in Firebug, the following actions are taken one by one: foo = $('<div>foo</div>') foo[0] // => <div> foo.html('<span>bar</span>') foo.html() // => "<span>bar</span> ...

javascriptjqueryinnerhtml

Textarea focus() function not functioning as expected in Chrome Extension with dynamically added text

Although I have come across many similar questions, it appears that I am still missing a key piece of information. My issue revolves around appending an HTML div tag upon clicking a button. Within this appended div tag lies a textarea tag that should auto ...

javascriptjquery

Recording videos using the Safari Browser

Within my ReactJs application, I have integrated react-multimedia-capture, a package that utilizes navigator.mediaDevices.getUserMedia and the MediaRecorder API to facilitate video recording. While I am successfully able to record videos on Chrome, Safari ...

javascripthtmlsafarigetusermedia