Creating a CSS Grid with Scroll Snap functionality to mimic an iPhone screen in HTML

I have created an iPhone simulator using HTML. It's in German, but I can provide a translation if needed:

// JavaScript code for various functionalities related to the iPhone interface
/* CSS styling for the iPhone interface */
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">

<div id="notification" onclick="closeNotification();">
    <h1 id="notificationHeader"><b>New Email Received!</b></h1>
    <p id="notificationDescription"></p>
</div>

<div id="phone">
    <div id="topbar">
        <!-- Top bar section of the iPhone interface -->
    </div>

    <div id="slider">
        <div id="appsOne">
            <!-- First set of apps on the home screen -->
        </div>

        <div id="appsTwo">
            <!-- Second page with additional apps -->
        </div>
    </div>

    <div id="homeButton" onclick="closeApp();"></div>

To get a better view of the iPhone interface, click on Full-Page in the snippet.

I'm facing an issue with two divs: #appsOne and #appsTwo within the #slider div. On the main page, there are two apps displayed (#appsOne) along with text (#appsTwo). I want the apps (#appsOne) to remain stationary while the text (#appsTwo) should be on a separate page with horizontal scroll snap functionality. How can this be achieved?

Below is an image of how the interface looks without the slider and the #appsTwo div:

javascripthtmlcssscroll-snap

Answer №1

CSS Scroll-snapping

To implement CSS scroll-snapping, first wrap each 'screen' in a div with the class panel.

To enable scrolling functionality for the slider, use white-space: nowrap to keep it on a single line. For horizontal scroll-snapping, set scroll-snap-type to x mandatory. This ensures that the visual viewport snaps to specific points when scrolling ends, even if content changes.

This means that the scroll container will snap to a point when scrolling finishes and adjusts its position based on content changes.MDN

Add overscroll-behavior-x: contain to prevent scrolling interactions between neighboring areas. Apply scroll-snap-align: center to .panel to align with the snapping points, and set white-space: initial to avoid overflowing contents within panels.

View the outcome here: https://jsfiddle.net/Spectric/j7br8h5a/

JS Scroll-snapping (mouse drag)

To enhance user experience with mouse drag scrolling without relying on scroll-snapping, utilize pure JS.

Create event listeners for mousedown to initiate dragging, mousemove to track movement, and mouseup to end the drag while checking for scroll alignment.

To handle app opening, maintain a variable to store state changes when apps are opened or closed. Take necessary actions based on this variable in the event listeners to control scrolling behavior accordingly.

For optimal viewing experience, switch to full-page mode

// Place your code snippets here

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

The function document.getElementById is unable to select multiple elements simultaneously

I've been tackling a loading issue. I have a visible div, #loading, and multiple hidden divs, #message. I also have a JavaScript function. function loading() { setTimeout(function() { document.getElementById("loading").style.display = " ...

javascriptjqueryhtmlcss

When using React, I noticed that adding a new product causes its attributes to change after adding another product with different attributes on the same page

Imagine you are browsing the product page for a Nike T-shirt. You select black color and size S, adding it to your cart. The cart now shows 1 Nike T-SHIRT with attributes color: black, size: S. However, if you then switch to white color and size M on the ...

javascripthtmlcssreactjsarrays

"Attempting to access a variable defined in one pipe results in it being undefined in a

Currently, I am utilizing gulp to process pages for a website. Some of these pages are PHP files, however, after going through the template engine, they all end up with a .html file extension. My intention is to add a property to each file indicating if it ...

javascriptnode.jsgulpgulp-rename

How can I pick out paragraphs that don't end with a period and eliminate dashes using jQuery or JavaScript?

Here are the paragraphs I need assistance with: <p>This is the initial paragraph.</p> <p>This is the second one</p> <p>The third paragraph comes next.</p> <p>Last, but not least</p> The second and fourth pa ...

javascriptjqueryregex

The benefits of using Node.js for asynchronous calls

Each time a new data is added or existing data is updated, the variables new_data and updated_data will increment accordingly. However, when attempting to output the total count of new_data and updated_data at the end of the code, it always shows as 0. H ...

javascriptnode.jsasynchronous

Can a single page be used to send email?

My PHP form is currently sending data to another page, and the layout does not look good. I want to keep the form on the same page so that when a user fills it out, the information is submitted without redirecting. If any of the inputs are empty, I would l ...

phpjavascriptajax

Invoke PHP by clicking on a button

I am facing an issue with a button I have created. Here is the code for it: <input type="submit" name="kudos_button" value="★ Give kudos"/>' To test it, I wrote a PHP script like this below the </html> tag: ...

javascriptphphtml

The process of transferring ViewBag value as a parameter in an AngularJS function

I'm facing an issue where the viewbag value is not being passed as a parameter in ng-init. Can someone guide me on how I can successfully pass the viewbag value as a parameter? angular.js { $scope.detail = function (Id) { ...

javascriptangularjsviewbag

Using Javascript to perform redirects within a Rails application

Currently working on a Facebook application using Rails. There are certain pages that require users to be logged in, otherwise they will be directed to a "login" page. I am unable to use redirect_to for this purpose as the redirection must be done through ...

javascriptruby-on-railsrubyfacebook

Creating nested tables by assigning unique Div IDs to each table element

Can we utilize a straightforward JavaScript/jQuery function to nest elements inside table elements? For instance, every square comes with its own unique ID (A1, B7, C5). How can I use this ID to insert the checker image in any selected tile upon clicking? ...

javascriptjqueryhtmlcss

Upon updating my application from Angular 14 to 16, I encountered an overwhelming number of errors within the npm packages I had incorporated

After upgrading my angular application from v14 to v16, I encountered numerous peer dependencies issues, which led me to use the --force flag for the upgrade process. However, upon compiling, I am now faced with a multitude of errors as depicted in the scr ...

javascriptangulartypescriptnpmangular-ivy

Is it possible to temporarily halt animation in react-transition-group while retrieving initial data within components?

I am working with the App component that looks like this: <Route render={( { location } ) => ( <TransitionGroup component="div" className="content"> <CSSTransition key={location.key} className ...

javascriptreactjsreact-routerreact-transition-group

Ways to disable the caching feature in Google Chrome

When I am working on CSS and JS around a page, I need to disable the cache mechanism in Google Chrome browser. A trick is to open Chrome DevTools, which automatically disables the cache mechanism (you can configure this in the settings section). Are ther ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Is there another way to implement this method without having to convert snapshotChanges() into a promise?

When trying to retrieve cartIdFire, it is returning as undefined since the snapshot method is returning an observable. Is there a way to get cartIdFire without converting the snapshot method into a promise? Any workaround for this situation? private asyn ...

javascriptangularfirebaseangularfire2

Unfortunately, CORS is preventing me from sending a POST request through AJAX

I'm currently working on integrating an API into my website. I'm attempting to send a POST request with JSON data, but I keep encountering an error code when trying to make the request. Interestingly, sending the request using curl does not pose ...

javascriptjqueryajaxapachecors

Access model information from a controller with the help of Next.js and Sequelize

I'm currently working on a project involving Vue.js as my frontend and Next.js as my backend. While everything seems to be running smoothly, I am facing an issue with retrieving my model data back to my controller... Additional details: I have utili ...

javascriptnext.jssequelize.js

"Is there a way to retrieve the CSS of all elements on a webpage by providing a URL using

Currently, I am in the process of creating a script that can crawl through all links provided with a site's URL and verify if the font used on each page is helvetica. Below is the code snippet I have put together (partially obtained online). var requ ...

javascriptnode.jscheerio

AngularJS: Pause the data binding functionality temporarily

How can I temporarily deactivate data binding in AngularJS? I am working with a list called items that is being displayed using ng-repeat. I need to perform some operations on this list without immediately updating the page, as this could cause slowdown. ...

javascriptangularjs

Title size in css

<div class="products_list products_slider"> <ul> <li> <a id="ContentPlaceHolder1_rptCategoryProducts_hlProductImg_0" class="product_image" href="/Urun/Oyuncak/woodoy-100-parca-kovali-ahsap-oyuncak-bloklar/7078"> <div class="produ ...

css

What are some methods for creating nested asynchronous calls in jQuery?

Here is an example in main.js: $.when( $.get('foo/bar.html'), $.get('lorem/ipsum.html') ).done(function(data1, data2){ someCode(); }); In lorem/ipsum.html: $.when( $.get('otherStuff.html'), $.get(' ...

javascriptjqueryajax