HTML Scroll Blocking

Recently, I have been working on designing the mobile version of a website. However, I noticed that when I try to scroll quickly on my phone, the scrolling gets interrupted and I have to wait for it to catch up.

I am using the fullpage.js library in this project, but I believe the issue lies with the overflow property.

html, body{
   font-family: sans-serif;
   width: 100%;
   padding: 0;
   margin: 0;
   // height: 100%;
   height: auto;
   overflow-x: hidden !important;
   
}


Click here for more information.

Answer №1

To achieve the desired effect, apply scroll-snap-type: y mandatory; to the parent element and scroll-snap-align: start; to the child element.

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

Creating an Array of dynamically generated elements using jQuery

A dynamic table is being generated using jQuery's .append() function: $el.append('<tr data-id=' + data[i].id + ' data-token=' + data[i].token + '><td>' + data[i].order + '</td>\n\<td&g ...

Guide to making a vertical clickable separator/line using bootstrap

Seeking advice on creating a layout where the left side consists of a sidebar menu occupying 24% and the right side contains main content taking up 75%, with a clickable vertical divider at 1% between them. When this line is clicked, the left part will hid ...

Tips for styling Ajax.ActionLink elements with CSS

Hi there, I'm trying to style a navigation bar using CSS. I'm pulling the navigation bar values from a database using Ajax.ActionLink. I attempted to use JavaScript but encountered an error stating "jQuery is not defined", Here's the cod ...

Submitting selected options from radio buttons to the server-side using HTML

I'm facing a challenge that requires some guidance. Here is the html code I am working with: Avatar: <br /> <input type="radio" id="avatar" name="avatar" value="Option1"/><img src="" alt=""> <input type="radio" id="avatar" name ...

Unable to access placeholder information from the controller

I am new to implementing the mean stack. I attempted to view data from the controller, but encountered an error message in the web browser's console. Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.3/$controller/ctrlreg?p0=AppCtrl Stack ...

Guide to optimizing the display of a responsive iframe across various devices such as mobile and desktop

I have implemented the following CSS in an iframe to make it responsive. It works well on desktop browsers, but on mobile browsers, the iframe only displays half of the screen. Can you please review the code below and provide guidance on how to fix this is ...

Using React Typescript to create a button component with an attached image

I am currently utilizing React with Typescript. How can I incorporate an image into my button? I've attempted to do so without any errors, but the button appears blank. What's the best way to style my button element using Emotion CSS in this ...

Creating and deleting HTML elements in a dynamic array format

My current approach involves utilizing jQuery and JavaScript for the purpose of dynamically adding and removing HTML elements. Specifically, I am focusing on the removal of particular HTML elements. The code snippet is as follows: $(document).ready(fun ...

Focusing in on a PARTICULAR SECTION of the picture

My website has a unique concept - comparing two articles side by side. One of the articles is mine, while the other is displayed alongside it. To capture entire pages for comparison, I utilize Google's GoFullPage feature to take screenshots. The goa ...

HTML Remover resulting in a malfunction

Currently in the process of removing HTML tags from text using the following method: <p><b>Masala</b> films of <a href="/wiki/Cinema_of_India" title="Cinema of India">Indian cinema</a> are those that combine different genres ...

Expandable Checkout Form for Woocommerce

I need help troubleshooting a WooCommerce collapsible checkout form using Bootstrap Collapse. Below is the HTML markup I am currently using: <div class="panel-group" id="checkout-accordion"> <div class="panel panel-default" id="panel-billing"&g ...

Issue with JavaScript not executing upon clicking the submit button on a form within the Wordpress admin page

In the admin pages of my Wordpress installation, I have created an HTML form. My goal is to validate the data inputted when the submit button is pressed using a Javascript function. If the data is not correctly inserted, I want alerts to be displayed. Desp ...

Match the test choices with the corresponding `radio` buttons

Looking for help with my quiz application. How can I align text vertically with radio buttons? Take a look at the code here on Codepen. One issue I'm facing is the alignment of long label texts, particularly in questions 9, 12 & 14. I've tried va ...

Looking to activate a button only when the checkbox is selected and in an enabled state

I'm struggling to make the button enable when the checkbox is checked and enabled. Additionally, it should be dependent on the textarea scroll above it. Once the checkbox is checked, the page needs to scroll up and down to activate the button. Here& ...

What is the best way to insert a YouTube video into a WordPress template page?

I decided to create a new template page for one of the pages on my WordPress site because I only wanted to have some text and a YouTube video displayed. It turns out that embedding a YouTube video directly into the code is not supported by WordPress, so I ...

Creating a unique blur effect on divs using HTML and CSS

Currently working on a website project and facing an issue where I need to apply Gaussian blur within a div. Although opacity can be adjusted, the challenge lies in blurring the text within the div. Seeking assistance for this matter <html> < ...

When clicked, check if the CSS value is equal to

I have no idea why it's not working. After toggleClass is executed, if the CSS value equals "-84%" then hide(); $(".rwd-sec").click(function() { $(".rwd-main").toggleClass("is-active"); if ($(".rwd-main").css("right") == "-84%") { ...

Solving issues with flexboxes in Safari 5.1.7 on Windows

I am currently utilizing flex boxes for managing the layouts of my website. However, it seems that the Safari version for Windows (5.1.7) is outdated and causing all flex boxes to be dysfunctional. On MacOS systems, the same version 12.x works correctly. ...

Strategies for maintaining login status in Selenium

When utilizing selenium and bs4 to parse a webpage, I encounter an issue where the webpage requires scanning a QR code and entering a verification code to log in. To address this, I have implemented the use of WebDriverWait to pause the script until the u ...

What are the steps to interact with a marquee using Selenium?

Currently, I am faced with an application that displays a list of upcoming vessels in a marquee format. I am looking for a way to click on the specific data using Selenium with Java. Any advice or alternative solutions would be greatly appreciated. ...