I am working on a PhoneGap app that utilizes iOS native scrolling with the help of -webkit-overflow-scrolling within a particular div. My goal is to allow users to interrupt a scroll manually by clicking a button, ultimately initiating a return to the top of the page. Can this be achieved?
It is completely achievable by utilizing fastclick.js, which eliminates the 300ms click delay on mobile devices and allows event capturing even during inertia/momentum scrolling.
By incorporating fastclick and applying it to the body element, my script to halt scrolling and return to the top appears as follows:
scrollElement.style.overflow = 'hidden';
scrollElement.scrollTop = 0;
setTimeout(function() {
scrollElement.style.overflow = '';
}, 10);
The key is to specify overflow: hidden, preventing the inertia/momentum scrolling. For a comprehensive implementation of stopping scrolling during inertia/momentum, please refer to my fiddle at stop scrolling during inertia/momentum.
Regrettably, this functionality is not currently available. The scroll event only triggers once the scrolling has completely stopped. While the momentum is still carrying the content, no events are activated. This behavior can be observed in Figure 6-1 The panning gesture in Apple's "Safari Web Content Guide".
I have also prepared a demo to showcase this issue. The scrollTop value is updated after iOS completes its animation.
If you're finding that the click event isn't triggering until after a momentum scroll is complete, consider using 'touchstart' to capture touch events instead of 'click'. Here's a handy jQuery solution:
$('#yourTrigger').on('touchstart', function () {
var $div = $('.yourScrollableDiv');
if ($div.scrollTop() === 0) {
return false; //Do nothing if no scrolling is needed
}
$div.addClass('scrolling');
$div.animate({
scrollTop: 0
}, 600, function () {
$div.removeClass('scrolling');
});
}
The 'scrolling' class applies an overflow:hidden style, which stops any momentum scrolling as @Patrick-Rudolph mentioned.
.scrolling {
overflow: hidden;
}
Remember to use a callback function to handle when your scroll animation finishes rather than relying on a timer function.
I am currently working on a to-do application using Vue.js and I want to implement a feature where the text rendered in HTML has a line through it when the user checks an item off the list. Here is the snippet of my code: <html> <head> & ...
There are two div elements in my HTML code: <body> <div id="one"></div> <div></div> </body> I am looking to hide the div elements after the one with id="one" using CSS. I attempted this method: #one:after{display: ...
I am working on creating a dynamic menu using jQuery that switches content based on tabs. However, I am facing an issue where clicking on a different <li> item causes the content to disappear. Each list item should correspond to different content sec ...
Exploring responsive layouts is a new adventure for me. Most things seem to be falling into place, except for one challenge: I am struggling to show divs with the property 'display: none;' when switching it to 'display: block;' in my me ...
My intention was to align the radio buttons as shown in the image below: https://i.stack.imgur.com/oPTjD.jpg However, the final result looked like this https://i.stack.imgur.com/Mixga.jpg Below is the code for your reference HTML <div class="form ...
In my project, I have a UIView called buttonView that contains multiple buttons. Whenever I need to update the list and re-populate the buttonView, I faced an issue with removing the buttons. if ([[self.buttonView.subviews objectAtIndex:i] isKindOfClass: ...
I'm currently working with a table that utilizes the Datatable plugin. I have successfully implemented filtering and deletion functionality within the table. However, after deleting certain entries, I noticed an issue where the deleted item still app ...
My div currently has a background image set with background-image url(), but I am trying to achieve the following look: background-image url('example') cover center Here is my current code: div { background-image: url(example); background- ...
I am in need of regular testing for my iOS app, which consists of over 500 source files. Compiling all of these files takes about 5 minutes. Archiving the app takes more than 15 minutes and creating a distribution adds another 2 minutes to the process. T ...
I'm facing an issue with my code: function Param(){ this.name = 'sasha' this.method = function(){ return this.name + 'native method' } this.pro= function(){ debugger // Param.prototype.method() //undefined proto met ...
After receiving my JSON data, I have the following structure: { "cars": [ { "make":"BMW", "model":"X3", "Lot":"Used" }, { ...
Is there a way to create a multiline input with vertical scrollbars in EXTJS? I tried the following code: noteField = new Ext.form.TextField({ emptyText: 'note...', multiline: true, applyTo: &apos ...
I have been attempting various solutions, but none seem to be working. My goal is to create post and comment partial classes for a main page where end users can add comments. Currently, I am using MVC 5 and the page loads posts and previous comments. Howe ...
As a newcomer to both ui router and angularjs, I'm encountering a specific issue: Within my header section, the following code is present: <li ng-class="{active: $state.includes('settings')}" id="header01"> <a ...
Upon executing the code provided, I encountered the following errors: [Switching to process 74682 thread 0x2003] [Switching to process 74682 thread 0x207] [Switching to process 74682 thread 0x720f] -- - (void)connectionDidFinishLoading:(NSURLConnection ...
Apologies for any language barriers. I am trying to upload my (.exe) file selected using an input file: <input type="file" id="myfile"> Here is how it should be read in Javascript: var myfile=''; var input = document.getElementById(&apos ...
I have successfully set up Babelify to transpile jsx code to js, and I've created node_modules before, allowing me to link them without a specific file path, just the package name. However, when I add jsx code within my node_module code, babelify flag ...
When working with JavaScript, you may often encounter functions written in the form of document.getElementById("element").someFunction(); or $("element").someFunction(); rather than the traditional someFunction($("element"));. This is similar to a function ...
My goal is to switch from using the CSS child combinator ">" to the XPath child combinator "/". After considering various existing CSS selectors and removing some white spaces, I attempt to match the following regular expression: ([\w\-&bsol ...
I am displaying a value in EJS and I am looking to format it to show fewer decimal places. This is related to the EJS engine on the frontend. Value displayed: 4.333333333333333 I want it to be displayed like this: 4.3 The EJS code snippet used: <p cl ...