Having trouble scrolling on iPad screen after closing a pop-up window

  1. Homepage featuring buttons and scrollable content, click on one of the buttons on the right-hand side.
  2. Full-page or half-page cover popup appears.
  3. After closing the popup, attempting to scroll the page results in the content being hidden behind a white screen.
  4. Anticipating screen 1 with scrolling functionality.

https://i.sstatic.net/ZARI1.jpg

Answer №1

Check out the following CSS snippet:

html{
    scroll-behavior: smooth;
}

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

Is there a way to adjust the placement of the h1 tag using the before pseudo-element?

I'm looking to place an image on the left side of each h1 tag. I've been attempting to utilize the before pseudo element for this task. The issue arises when there is no content, causing the before pseudo element to overlap with the h1 tag. How ...

Obtaining a variable from HTML and passing it to Node.js

Currently, I am utilizing express to handle form submissions. Within my HTML file, there are 20 inputs with unique ids such as address1, address2, address3, and so on. In my node js code, I access these input values using req.body.address1. Users have th ...

How can you incorporate a custom button into the controlBar on videoJS in responsive mode?

The video player I have created using videoJS includes custom buttons in the control bar. These buttons are not clickable when viewed on mobile or tablet devices without forcing them to work. let myButton = player?.controlBar.addChild('button'); ...

Exploring the integration of HTML and CSS within the Django framework

Trying to implement a star rating in a specific HTML file The file I am working on is called book_detail.html {% extends "base.html" %} {% load static %} {% block title %} Block Detail Page {% endblock title %} {% block sidenav %} {% for item ...

Activate HTML event upon reaching a specific point while scrolling, and then reactivate by scrolling back

I'm encountering an issue where the fade effect triggers when I scroll past a certain point, but then fails to fade back in once I scroll back. Is my approach correct or am I missing something? Currently, it fades out abruptly at a specific point and ...

What is the best way to alternate between two CSS stylesheets when using jQuery-UI?

Just getting started with jQuery and javascript and decided to test out 2 different jQuery-ui stylesheets in a simple .html file. The goal is to have the example dialog open with the "flick" stylesheet and the datepicker within the dialog open with the "u ...

How can I select the specific element within a class when a particular checkbox is selected?

Having a dynamically generated list of elements, each structured like this: <div class="under-item-description"> <span class="under-compare-price">100</span><span class="under-price">50</span> <span class="under-compar ...

The positioning attribute and flexible height in CSS are essential for creating dynamic

My goal is to create a layout with 3 DIVs inside a container, similar to table rows. top {height = 100px} / middle {height = dynamic} / bottom {height = 100px} I am trying to figure out the best approach to make the height of the middle div dynamic whi ...

Mastering the correct application of flex properties within nested flex containers

I'm struggling with utilizing flexbox properly and would like some clarification on how nesting parent and child elements functions. I understand that the child elements inherit the parent's flex properties, but I'm unsure if this inheritan ...

Guide on hosting two html pages on a NodeJS server

Currently, I am in the process of learning NodeJS and Javascript with a goal to construct a basic server that can host 2 HTML pages. One page should be accessible via localhost:3000/index, while the other can be reached through localhost:3000/about. While ...

What is the best way to showcase the dropdown menu items of a bootstrap navbar in a horizontal layout instead of vertical?

While utilizing Bootstrap 4, I encountered an issue with the dropdown section where the items are displayed vertically instead of horizontally. I want these dropdown items to be arranged horizontally next to each other. <nav class="navbar navbar-expand ...

Classes aren't displaying properly for elements inside

Is there a way to display the header only in a small size using the col-sm-* class of the div inside a container? It seems like the col-sm-* class is not working correctly and not floating them properly. <link href="https://maxcdn.bootstrapcdn.com/b ...

Setting a default currency value (either in dollars or euros) in an input field

Is there a way to automatically insert a currency symbol (€, $) in a text field by default when entering a number? Are there any default values for this feature? Thank you Here is an example ...

Insert the element both before and after it is referenced

There was a php script I was working on that involved calling a function. For example, here is the script: <div class="main-info"> <div class="screenshot"> </div> </div> <div class="screenshot-later" ...

Styling an HTML Table with CSS to Add Cell Padding

I am trying to add padding to a single cell in my table. I created a class for the td element and specified its style in my CSS file as shown below: .itemQuantity { padding-right:30px; text-align:right; background-color: #EEE; } However, the ...

Unable to dispatch the form on a connected page using jQuery Mobile

I have encountered an issue while trying to submit a form using jQuery Mobile. The problem arises when the form is placed on a linked page, as it fails to submit properly. To illustrate, if my home page is mysite.com/page.html, placing the form code on tha ...

Tips on avoiding blurring when making an autocomplete selection

I am currently working on a project to develop an asset tracker that showcases assets in a table format. One of the features I am implementing is the ability for users to check out assets and have an input field populated with the name of the person author ...

unable to reset contact form functionality

I need to implement a Contact Us form on my website. The form should clear the text fields after submission and display a Thank You message. Below is the HTML code: <div class="form"> <div id="sendmessage">Your message has been sent. Thank yo ...

What could be preventing the background image from displaying properly?

I had the idea to create a game where players have to flip cards to reveal what's on the back, but I'm struggling to get the background image to display properly. As a newcomer to Vue, I'm not sure if I made a mistake somewhere. My intuition ...

Adding DIV classes and IDs to my stylesheet

This is the code that I added to my Stylesheet: .friend { border:4px dashed 008000; } .enemy { border:2px dashed 008000; } .family { border:2px dashed 008000; } #archnemesis { border:4px solid 008000; } * { border:4px ...