Using Javascript to Manage Scroll Stop Events

I am currently facing a challenge while working on an IOS (Cordova) application. I am developing it using core Javascript without relying on any framework like Ionic or Onsen UI. The issue I am encountering is that I need to trigger an event when the scrolling stops.

Here is my process:

When a user initiates a scroll, it will start scrolling and eventually come to a stop. I require an event to be triggered precisely when the scrolling halts. And I am looking for a solution in pure Javascript without using any external libraries such as jQuery.

Any assistance on this matter would be greatly appreciated. Thank you!

javascriptioscordova

Answer №1

<script type="text/javascript">
  var scrollTimer = -1;

    function checkScroll() {
     document.getElementById("#sample") = "scrolling";

    if (scrollTimer != -1)
    {
     clearTimeout(scrollTimer);
     scrollTimer = window.setTimeout("doneScrolling()", 500);
    }

    function doneScrolling() {
    document.getElementById("#sample") = "scrolling stopped";
   }
</script>
<body onscroll="checkScroll();">
  <div id="sample"></div>
</body>

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

What can be done to prevent unnecessary API calls during re-rendering in a React application?

On my homepage, I have implemented code like this: {selectedTab===0 && <XList allItemList={some_list/>} {selectedTab===1 && <YList allItemList={some_list2/>} Within XList, the structure is as follows: {props.allItemList.map(ite ...

javascriptreactjsapireact-hooksuse-effect

Javascript functions correctly when the HTML file is opened locally, however, it encounters issues when accessed through an http-server

My HTML file includes an embedded web widget from tradingview.com with the following code: <!-- TradingView Widget BEGIN --> <span id="tradingview-copyright"><a ref="nofollow noopener" target="_blank" href="http://www.tradingview.com" style ...

javascripthtmlcss

Displaying multiple arrays using ng-repeat

My task is to display a list organized by date, but the problem is that the list is not sorted and I can't figure out when the date changes. This situation is similar to having the following Json: list = {name: first, date: 2014-05-21}, { {name: sec ...

javascriptarraysangularjsangularjs-ng-repeat

Here's a guide on executing both GET and POST requests using a single form

Currently, I am developing a web application which involves using a GET request to display checkboxes in a form. The selected data from the checkboxes needs to be sent back to the server using a POST request. However, I'm facing an issue with performi ...

javascriptjqueryajaxcherrypy

Facebook-Clone Chrome extension that automatically displays "User is listening to..."

I'm currently developing a Chrome Extension that will replace the chat input box with the music I'm listening to by simply pressing "´". It's worth noting that the chat is designed using react and does not use the traditional input/textarea ...

javascriptjqueryhtmlgoogle-chromegoogle-chrome-extension

RTL in TextInput only functions properly every other time it is rendered

I am facing a strange problem with RTL where everything seems to be flipped correctly except for TextInput, which only works about half of the time. Check out this gif that demonstrates the issue as I switch between English and Hebrew: (click to view a la ...

javascriptreactjsmaterial-uiright-to-left

SB Admin 2 menu with multiple levels does not collapse as expected

I'm in the process of integrating the menu from the sb admin 2 template into my Ruby on Rails application: As I gradually added components to test functionality, I successfully implemented the top and side nav bars. However, I encountered an issue wi ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Transferring Information Between Vue Components

In my project, I have implemented 3 Vue components to work together seamlessly. Component A is responsible for listening to an event triggered by a user clicking on HTML text and storing the data into a variable. Component B utilizes this data to make an A ...

javascriptnode.jsvue.jscomponentsvue-component

Activate Static Force in Sprite Kit

Consider this scenario where I am exerting an impulse to a node upon touch: [_bird.physicsBody applyImpulse:CGVectorMake(0, 15)]; My objective is to have a consistent "static" impulse. Allow me to clarify: If my node is falling due to gravity, applying ...

iossprite-kitgravity

Using jQuery, how can you make fixed elements fade as the page scrolls?

How can I make a fixed element, such as a corner ad or notice, fade when the page is scrolled down to a certain point? What would be the most effective method for determining this point: using pixels, percentage, or another way? And how can I implement th ...

javascriptjqueryscrollfade

Failing to choose the right item in the UI table View Cell

I am having an issue with selecting the right object when pressing the send button in my array of users displayed in a table view. It seems to be quite random :). How can I ensure that the object displayed on the selected cell is the one being sent? This ...

iosuitableviewparse-platform

Teaching you the best way to incorporate numeral.js from app.locals into the script section of my jade file

Encountering issues while trying to utilize numeral.js within the script section of my jade file. Here is how I have numeral placed in locals: app.locals.numeral = require('numeral'); However, when I attempt to use numeral on a variable in my ...

javascriptnode.jsexpresspug

Creating Stylish Checkboxes with Bootstrap

I'm attempting to customize a checkbox to have a specific appearance. example of desired checkbox design Here is what I have tried so far: <div class="col-2"> <label for="WitholdingTax">Charge</label> <div class="input-g ...

javascripthtmlcheckboxbootstrap-4alignment

React loop-generated elements are being ignored by tab selection

In my application, I have a radio group that is generated based on the array const genders = ["Male", "Female", "Neutral"];. However, when I press the tab button, the focus only falls on the first element and skips the rest of the elements. const { useS ...

javascriptreactjsradio-grouptabindex

Finding a quicker route to fulfill a commitment

When dealing with asynchronous behavior in a function, I often find myself creating a deferred and returning a promise. For example: var deferred = $q.defer(); //...some async operation return deferred.promise; However, sometimes I want to skip the async ...

javascriptangularjspromiseangular-promise

Updating button appearance when clicked using Vue.js and Tailwind CSS

As part of my learning journey, I have expanded this code to enhance my frontend skills. While I am aware that the code can be significantly shortened, I am focused on learning and broadening my experience in frontend development. The code below functions ...

javascriptvue.jstailwind-css

Using Angular to implement a decimal pipe on an input field

I am looking for a way to display comma-separated numbers as the user types in an input field by applying the decimal pipe. I have experimented with ngx-mask, but it seems to only function when the user physically enters the numbers. However, when I manu ...

javascriptangularngx-mask

What is the best way to temporarily bold a cell item within a table row for a specified duration of time?

I am experiencing an issue with a section of my code where I am fetching values from the server and updating a table if a certain value is not present. Once the update is made, I want to visually notify the user by temporarily making the cell's value ...

javascriptajax

Discover the steps to update the information displayed on a tab through $stateProvider

I'm working on a view that has the following structure: <h2>Data Package Management</h2> <div class="row push-down-md"> <tabs data="tabData" type="tabs"></tabs> <div class="col-md-12"> <tabset&g ...

javascriptangularjstwitter-bootstrap

I am looking for an alternative approach to retrieve the data from the controller in case of success instead of the method provided in the code below

In this code snippet, I am looking for an alternative way to retrieve data from the controller upon successful execution, rather than checking it as data.msg. I want to avoid using strings or boolean values like SuccessWithPass. Controller snippet: if ...

javascriptjqueryajaxasp.net-mvc-3