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

Understanding JavaScript for Reading a Website's "Local Storage"

Can the local storage of one website be accessed by a different domain, or is it restricted to only the domain that saved it? ...

javascriptphphtmlcssjson

Efficient method to access two arrays simultaneously and combine them into an associative array in JavaScript

When using Ajax to return a table, you have the option of separating column names and row values. Here are two ways to do it: let columns = ["col1", "col2", "col3"]; let rows = [ ["row 1 col 1", "row 1 col 2", "row 1 col 3"] , ["row 2 col 1", "r ...

javascriptarraystypescriptpropertiestypescript2.0

What is the process of assigning data, in JSON format, from an HTML form to a variable?

I have the coding below in my abc.html file, which converts form data to JSON format: <body> <form enctype='application/json' method="POST" name="myForm"> <p><label>Company:</label> <input name=& ...

javascripthtmljson

Guide on incorporating one element into another with jquery

I am facing a challenge with the following code snippet: <p>Nuno</p> <p>Eimes</p> My goal is to transform it into this format: <p><a href="name/Nuno">Nuno</a></p> <p><a href="name/Eimes">Eimes& ...

javascriptjquerydom

What is the best approach to have a method in the parent class identify the type based on a method in the child class using TypeScript?

I'm faced with a code snippet that looks like this. class Base{ private getData(): Data | undefined{ return undefined } public get output(): Data | undefined { return { data: this.getData() } } } class ...

javascripttypescriptclass

The lines intersecting with the ethereal image in the background

I'm trying to achieve button links with an image overlay, but so far I've only been able to do it using CSS: section a:link, section a:visited { width: 150px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: ...

cssimagehtmlmargin

How can the Jquery UI Datepicker value be automatically set upon redirecting to this page?

When I submit a form and an error occurs, the value selected in the datepicker is not retained. The datepicker field remains empty. How is this possible? <html> <head> <script type="text/javascript" >. $(function() { ...

phpjqueryhtml

Twice the clicking actions triggered by the event

Whenever I try to trigger a function by clicking on the label text, the click event seems to be firing twice. HTML <label class="label_one"> Label One <input type="checkbox"/> </label> However, if I modify the HTML code as f ...

javascriptjqueryhtmlcss

When rendering inside *.map in React, the first object of the array may not be rendered

When the SearchCard component is being rendered, it seems to be skipping the first object in the array- const cardArrayTrackSearch = this.state.searchtrack.map((user, i) => { return ( <SearchCard key={i} reload={th ...

javascriptarraysreactjscomponents

A guide on displaying a text file from a URL in a reactjs application

When utilizing the code provided below, I have successfully managed to display the content of a local text file on a webpage. However, when attempting to render a text file from a URL, the state becomes null resulting in an empty display. In order to ren ...

javascriptreactjs

What is the best way to adjust the spacing between components to prevent overlapping?

I'm looking to adjust the spacing between the textfield and button components so they don't overlap. I want to create some space between them but I'm not sure how to achieve this. I'd like to have at least 1-2 spaces added between the ...

javascriptreactjsmaterial-ui

Encountering an issue when trying to use multiple selections in a drop down list with Angular.js

I am facing a major issue. I need to be able to select multiple values from a drop down list, so I implemented bootstrap-multiselect.js. However, I encountered the following error: angularjs.js:107 TypeError: a.forEach is not a function at u.writeValu ...

javascriptjqueryangularjs

Issue with manipulating currency conversion data

Currently, I am embarking on a project to develop a currency conversion application resembling the one found on Google's platform. The main hurdle I am facing lies in restructuring the data obtained from fixer.io to achieve a similar conversion method ...

javascriptangulartypescriptangular-materialfixer.io

Utilizing Bootstrap Plugins with Nuxt.js: A Step-by-Step Guide

"dependencies": { "ant-design-vue": "^1.7.2", "bootstrap": "^4.6.0", "core-js": "^3.8.3", "nuxt": "^2.14.12", "popper.js": "^1.16.1" } ...

javascriptvue.jsbootstrap-4pluginsnuxt.js

Unable to load Webfont Trade Gothics in Internet Explorer 8

The following code is used to ensure proper functionality of webfonts across all browsers: @font-face { font-family: 'TradeGothic-BoldCondensedNo20'; src: url('../fonts/tradegothic/trade-gothic-lt-std-bold-condensed-no-20.eot?' ...

cssinternet-explorer-8cross-browserfont-face

Storing a photo taken with a camera to a local directory on the computer

Currently, I am utilizing HTML5 inputs to capture a picture from the camera by using the code below: <input id="cameraInput" type="file" accept="image/*;capture=camera"></input> Subsequently, I am obtaining the image in blob format and manip ...

javascriptjqueryhtmlcamera

How to make an Ajax request in Osclass classified script using a PHP file located in the theme directory?

Currently, I am utilizing the Osclass classified script and attempting to display a message that is returned by an ajax call. Within my theme folder, there is a file called ajax-test.php with the following content: <?php $name = $_GET["name"]; echo "My ...

javascriptphpajaxosclass

Version 5.3 of Laravel combined with Vue 2

Working with Vue 2 in a fresh Laravel 5.3 project, I'm faced with a challenge regarding binding a URL in the Laravel format. I've extracted some configuration rows from a database and my goal is to iterate over them to display the data, followed ...

javascriptphplaravelvue.js

Adjustable height within embedded object tag

I've been struggling to adjust the height of the content on my site automatically. I have attempted using iframes as well, but nothing seems to work despite trying numerous code examples from various sources including CSS and JS scripts. Any help wou ...

javascriptcsshtml

acquire information from a variable using angularjs

Given the following variable: var exampleVar = {"id": 0, "Nodeid": 1234, "title":"abc"}; I am looking to retrieve the Nodeid value from the above and save it in a new variable. The desired output should be: var newNodeID = 1234; ...

javascriptangularjs