JavaScript obtain scroll position of a child element

I have a setup that looks something like the following:

<div>

    <div id="scrollID" style="height:100px;">
         content here
    </div>

</div>

<script>
document.getElementById("myDIV").addEventListener("touchstart", myFunction);
function myFunction() {
    // want to get my position
}
</script>

My goal is to obtain the distance from the top when the user begins scrolling (specifically touching on mobile). I am looking to implement pull-to-refresh for the child div.

Any thoughts or suggestions?

javascripthtmlcssangularjs

Answer №1

Consider the following solution.

<section>

    <div id="scrollElement" style="height:100px;" onscroll="triggerFunction();">
         Insert your content here
    </div>

</section>

<script>
document.getElementById("myElement").addEventListener("touchstart", triggerFunction);
function triggerFunction() {
    document.getElementById("scrollElement").scrollTop;
    // Retrieve current position
}
</script>

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

How can you create a scenario in Angular Material where items in a toolbar transition to the second line exclusively on mobile screens?

Visit the Angular Material website to see how the toolbar appears on a desktop: https://material.angular.io/ On mobile devices, the menu items Components, CDK, and Guides are displayed on the second line, while github, theme icon, and version number dropd ...

cssangularangular-material

Storing the selected value from dynamically generated options in Angular using ngFor

I have a collection of items called Fixtures. Each fixture contains a group of items named FixtureParticipants. Here is my process for generating choices: <tr *ngFor="let fixture of fixtures$ | async; let i=index"> <th scope="row& ...

htmlangulartypescript

Issue: Incompatibility in metadata versions detected for module .../ngx-masonry/ngx-masonry.d.ts. Level 4 version identified, whereas level 3 version

When using ngx-masonry, I encountered the following error message- ERROR in Error: Metadata version mismatch for module .../ngx-masonry/ngx-masonry.d.ts, found version 4, expected 3 Specifications: Angular 4 ngx-masonry 1.1.4 ...

javascriptangulartypescriptnpmnode-modules

Element on webpage "Expands" When Scrolled into Visibility

After posting a question on Stack Overflow, I noticed discrepancies between the element dimensions reported by Chrome Inspector and Selenium WebDriver. While Chrome Inspector showed w = 979, h = 1961, Selenium returned dimensions of 979 and 1461 respective ...

javascripthtmlseleniumselenium-webdriverwebdriver

The v-data-table is unable to fetch the user list information from the API using Axios

How can I solve the issue of displaying "No data available" in the user list data table on my userDirectory page? I have created a userDirectory page with a subheader and a data table from Vuetify, but it seems to have no data available. <template> ...

javascriptvue.jsaxiosvuetify.jsbackend

Creating a masonry layout with uniform row heights

I am trying to achieve a masonry style layout for these cards in Bootstrap. The current setup has columns with the same height, but I want them to have fluid height and consistent margin spacing like the blue line shown below. I attempted to use .card-colu ...

csstwitter-bootstrap

What is the best way to retrieve ViewBag data using jQuery?

Greetings, I am currently in the process of developing a web application using MVC5. Within this application, I have implemented a login form that consists of fields for both username and password: @using (Html.BeginForm("ClickAction", "Login", FormMethod ...

javascriptc#jqueryasp.net-mvc-4

Exploring the Differences Between Angular 2 Two-Way Data Binding and One-Way

My query pertains to the distinction between Angular 2's two-way and one-way data binding mechanisms. From my understanding, one-way data binding involves data flowing strictly from parent to child. However, this changes when the source of the binding ...

angularjsdata-bindingangular

Conceal the bottom HTML/widget and eliminate the Drag & Drop functionality from the Streamlit file_uploader() feature

I have developed an application using Streamlit that requires the ability to read multiple files simultaneously. To achieve this, I am utilizing the file_uploader() component with the parameter accept_multiple_files=True. I have two queries: Firstly, is ...

pythonhtmlpython-3.xstreamlit

Challenges with creating a contact form using bootstrap modal

I'm facing an issue with a bootstrap modal contact form. It works fine on all browsers except for iPad/Safari. Can anyone help me figure out what's wrong? On iPad, the modal is positioned to the right and down the page instead of in the cente ...

javascriptjqueryhtmlcsstwitter-bootstrap

HTML: Issue with H1 alignment in class

I'm a beginner with HTML and I've been attempting to center the H1 using a CSS class, but it doesn't seem to be working for me. Here's my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> ...

htmlcss

What is the best way to get both the id and name of a selected item in Angular?

Within my select field, data is dynamically populated based on names. My objective is to not only capture the selected name but also its corresponding ID. Here's a snippet of my HTML template: <select class="custom-select d-block w-100" id="test" ...

htmlangulartypescript

Select a number from an input box using Selenium in Python

Having trouble getting Selenium to select an option for me. I attempted the following: phone = Select(driver.find_element(By.NAME, "PhoneCountry")) phone.select_by_data-value(self, US) Unfortunately, it did not work as expected. Here is the HTM ...

pythonhtmlseleniumselenium-webdriverselect

PHP fails to retrieve posted data from AJAX when using serializeArray()

I have been struggling with a form that is utilizing jQuery validation and AJAX to submit data to a PHP script for backend processing. The AJAX function uses serializeArray() to collect the form values, but despite my best efforts, I cannot seem to success ...

javascriptphpjqueryajax

Navigating to web pages with no Twig integration using Symfony

As I integrate a legacy system into Symfony, I've come across some pages with static HTML content that doesn't utilize Twig. I'd like to directly route to these pages without involving any controllers. /aboutus should point to /web-director ...

phphtmlsymfonymodel-view-controllertwig

An error was encountered in the JSON syntax: Unexpected symbol <

I have encountered a problem with my code that I cannot seem to resolve. Despite the JSON data being successfully sent to the backend and processed correctly, the success function of the call is never triggered. Here is the snippet of my function: Regist ...

javascriptajaxjson

Can you explain the process of accessing data from [[PromiseValue]] while utilizing React hooks?

My current challenge involves fetching data from an API and utilizing it in various components through the Context API. The issue arises when I receive a response, but it's wrapped under a Promise.[[PromiseValue]]. How can I properly fetch this data ...

javascriptreactjsnext.js

Tips on expanding the dimensions and incorporating more members in a radar graph's Chartjs tag

I need to make some adjustments to the font size and color in a radar chart. Specifically, I want to change the name on the side of each data point. I have already tried adjusting the legend labels using the following code: options={{ ...

javascriptreactjschart.js

ng-click fails to trigger after being added following the completion of the page load

I'm attempting to perform a variable replacement while also making it clickable using ngClick. I created a plunker demonstration (click the button and notice that the input box remains unchanged) Structure: <body ng-controller="Ctrl"> <i ...

angularjstranslationangularjs-ng-click

I am curious if there is a wysiwyg web editor extension specifically designed for VS2010 available?

In my experience, I have been working with C#, HTML coding using VS2010 and MVC. Utilizing VS2010 has proven to be an invaluable tool for me in this process. Currently, I find myself needing to create some straightforward static web pages. I am wondering ...

javascriptjqueryhtmlcssvisual-studio-2010