Scroll Snap for div that looks like an iPhone in HTML

Question

I made this iPhone in HTML (Please do not pay attention to the spaghetti code, and it's in german, if it is necessary i can translate it with pleasure):

var time = document.getElementById("time");
    var notification = document.getElementById("notification");
    var notificationHeader = document.getElementById("notificationHeader");
    var notificationDescription = document.getElementById("notificationDescription");
    var verificationCode = Math.floor(1000 + Math.random() * 9000);
    var input = document.getElementById("instagramNumberText");
    var correctOrWrongCheck = document.getElementById("correctOrWrongCheck");
    var verificationCodePTag = document.getElementById("verificationCode");
    var instagram = document.getElementById("instagramApp");
    var mail = document.getElementById("mailApp");
    var createAccountButton = document.getElementById("createAccount");
    var createAccountForm = document.getElementById("createAccountForm");
    var verificationCodeInstagramPage = document.getElementById("verificationCodeInstagramPage");
    var controlVerificationCodeButton = document.getElementById("controlVerificationCode");
    var continueToInstagramAccountButton = document.getElementById("continueToInstagramAccount");
    var verificationCodeEmailDescription = document.getElementById("verificationCodeEmailDescription");
    var verificationCodeEmail = document.getElementById("verificationCodeEmail");
    var erfolgreichAngemeldet = document.getElementById("erfolgreichAngemeldet");
    var instagramAccount = document.getElementById("instagramAccount");

    var instagramName = document.getElementById("instagramName");
    var instagramNameInput = document.getElementById("instagramNameInput");


    // Time

    function checkTime(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }

    function startTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        // add a zero in front of numbers<10
        m = checkTime(m);
        document.getElementById('time').innerHTML = h + ":" + m;
        t = setTimeout(function() {
            startTime()
        }, 500);
    }
    startTime();

    // Insta

    function controlVerificationCode() {
        if (input.value == verificationCode) {
            correctOrWrongCheck.innerHTML = "Der Code war korrekt!";
            continueToInstagramAccountButton.style.display = "block";
            continueToInstagramAccountButton.style.margin = "5px auto";
            controlVerificationCodeButton.style.display = "none";
        } else if (input.value !== verificationCode) {
            correctOrWrongCheck.innerHTML = "Der Code ist leider Falsch!";
            continueToInstagramAccountButton.style.display = "none";
            controlVerificationCodeButton.style.display = "block";
        }
    }

    verificationCodeEmailDescription.innerHTML = "Ihr Bestätigunscode lautet: " + verificationCode;

    // OPEN AND CLOSE APPS

    function openVerificationCodeInstagramPage() {
        createAccountForm.style.display = "none";
        verificationCodeInstagramPage.style.display = "block"
        verificationCodeEmail.style.display = "block";
        instagramName.value = instagramNameInput.value;
        notification.style.transform = "translate(-50%, -50%) scale(0)";
        notificationDescription.innerHTML = "Ihr Bestätigunscode lautet: ...";
        setTimeout(
            function() {
                notification.style.transform = "translate(-50%, -50%) scale(1)";
            }, 1000);
         setTimeout(
            function() {
                notification.style.transform = "translate(-50%, -50%) scale(0)";
            }, 7000);
    }

    function continueToInstagramAccount() {
        verificationCodeInstagramPage.style.display = "none";
        instagramAccount.style.display = "flex";
        erfolgreichAngemeldet.display = "none";
        notificationDescription.innerHTML = "Erfolgreich bei Instagram angemeldet"
        notification.style.transform = "translate(-50%, -50%) scale(0)";
        erfolgreichAngemeldet.style.display = "block";

        setTimeout(
            function() {
                notification.style.transform = "translate(-50%, -50%) scale(1)";
            }, 1000);
            setTimeout(
            function() {
                notification.style.transform = "translate(-50%, -50%) scale(0)";
            }, 7000);


        var counter = 0;
        var followers = document.getElementById('followers');
        setTimeout(function(){
            var st = setInterval(function(){
                followers.innerHTML = ++counter;
            },100)
        },100);
        }


    function closeNotification() {
        notification.style.transform = "translate(-50%, -50%) scale(0)";
    }

    function openInstagram() {
        instagram.style.transform = "scale(1)";
    }
    function openMail() {
        mail.style.transform = "scale(1)";
    }

    function closeApp() {
        instagram.style.transform = "scale(0)";
        mail.style.transform = "scale(0)";
    }

    window.onload = function() {
        document.getElementById("instagramNumberText").value = '';
    }

* {
            margin: 0;
            padding: 0;
            font-family: 'Roboto',sans-serif;
            user-select: none;
        }

        input:focus, textarea:focus {
            outline: 0;
        }

        #phone {
            height: 600px;
            width: 350px;
            border-radius: 50px;
            position: absolute;
            top: 600px;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            border-top: 90px solid;
            border-right: 15px solid;
            border-left: 15px solid;
            border-bottom: 90px solid;
            background-image: url("https://ioshacker.com/wp-content/uploads/2019/06/iOS-13-wallpaper.jpg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .app {
            box-shadow: 0 0 9px -4px #000;
        }

        #topbar {
            padding: 0.3em;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 20px;
            transform: translate(-4%,0) scale(0.9);
            width: 370px;
        }

        #connection {
            display: flex;
            align-items: center;
            width: 110px;
            justify-content: space-around;
        }

        #battery {
            display: flex;
            align-items: center;
            width: 110px;
            justify-content: end;
        }

        #battery .bi-battery-full {
            font-size: 23px;
            margin-left: 5px;
        }

        #topbar .bi-wifi-2 {
            font-size: 25px;
            margin-top: -3px;
        }

        #time {
            text-align: center;
        }

        #notification {
            margin: 0;
            position: absolute;
            top: 365px;
            left: 50%;
            -ms-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
            height: 85px;
            width: 315px;
            background: #EDEBED;
            border-radius: 10px;
            z-index: 10000;
            transition: all 0.5s;
            box-shadow: 0 0 10px -1px #525252;
            padding: 0.5em 0 0.5em 1em;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        #notification h1 {
            font-size: 23px;
        }

        #appsOne {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        #instagramIcon, #verificationCode, #mailIcon {
            margin: 20px;
        }

        .app {
            font-size: 40px;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            transition: all 0.2s;
        }

        .app:hover {
            cursor: pointer;
            filter: brightness(90%);
        }

        .bi-instagram, .bi-envelope-fill {
            width: 40px;
            height: 40px;
            color: #fff;
            font-family: sans-serif;
        }

        /* Instagram */

        #instagramIcon {
            background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
        }

        #instagramApp {
            position: absolute;
            top: 0;
            left: 0;
            background: #EAEAEA;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            transition: all 0.3s;
            transform: scale(0);
            z-index: 99999;
            text-align: center;
        }
        .instagramHeader {
            font-family: 'Handlee', cursive;
            font-size: 35px;
        }
        .instagramSecondHeader {
            font-size: 15px;
            width: 260px;
            margin: 1em 0;
        }
        #instagramNameInput, #instagramEmail, #instagramNumberText {
            font-size: 15px;
            padding: 0.5em;
            border: 1px solid #D1D1D1;
            margin: 0.5em 0 0.5em 0;
            width: 220px;
        }
        .instagramButton {
            width: 236px;
            font-size: 15px;
            padding: 0.5em;
            background: #3296F0;
            color: #fff;
            border: none;
            margin: 0.5em 0;
            transition: all 0.2s;
        }
        .instagramButton:hover {
            filter: brightness(80%);
            cursor: pointer;
        }
        #verificationCodeInstagramPage {
            display: none;
        }
        #continueToInstagramAccount {
            display: none;
        }

        #instagramAccount {
            display: none;
            justify-content: flex-start;
            height: 100%;
            width: 100%;
            background: #f7f7f7;
            flex-direction: column;
            align-items: center;
        }
        #instagramName {
            font-size: 20px;
            text-align: left;
            width: 85%;
            padding: 20px 20px 15px 10px;
            border-bottom: 1px solid gray;
            height: 20px;
            border-right: none;
            border-top: none;
            border-left: none;
            background: none;
        }
        #profilePicture {
            font-size: 35px;
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #eae9e9;
            border-radius: 100000px;
            margin: 20px;
            border: 1px solid #6f6e6e;
            color: #6f6e6e;
        }
        #instagramPictureAndNumbers {
            display: inherit;
            width: 360px;
        }
        #numbers {
            width: 225px;
            height: 45px;
            margin: 35px 0 0 0;
        }
        #userDescription {
            width: 320px;
            font-size: 13px;
            border: none;
            background: none;
            resize: none;
        }
        .bi-table {
            font-size: 25px;
            border-bottom: 1px solid;
            width: 90%;
            margin-top: 0.5em;
        }
        #emptyImages {
            color: #c7c7c7;
            margin: 100px;
            font-size: 14px;
        }

        /* Mail */
        #mailIcon {
            background: linear-gradient(0deg, #05ffff 0%, #3cabe6 30%, #2763dc 70%);
        }
        #mailApp {
            position: absolute;
            top: 0;
            left: 0;
            background: #f6f6f6;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-direction: column;
            transition: all 0.3s;
            transform: scale(0);
            z-index: 99999;
            text-align: center;
        }
        #mailHeader {
            font-size: 25px;
            padding: 20px;
            background: #fff;
            width: 88%;
            z-index: 999;
        }
        #verificationCodeEmail {
            display: none;
        }
        .email {
            background: #fff;
            width: 97%;
            padding: 5px;
            border-top: 1px solid #e6e6e6;
        }
        .emailHeader {
            text-align: left;
            margin: 10px;
            font-size: 25px;
        }
        #verificationCodeEmailDescription, #erfolgreichAngemeldetDescription {
            text-align: left;
            margin: 10px;
        }

        #erfolgreichAngemeldet {
            display: none;
        }

        /* Home Button */
        #homeButton {
            position: absolute;
            height: 60px;
            width: 60px;
            background: transparent;
            z-index: 9999;
            bottom: -107px;
            border-radius: 100000px;
            left: 50%;
            -ms-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
            border: 1px outset;
            cursor: pointer;
        }

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/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>Neue Email erhalten!</b></h1>
    <p id="notificationDescription"></p>
</div>

<div id="phone">

    <div id="topbar">

        <div id="connection">
            <i class="bi bi-bar-chart-fill"></i>
            LIDL LTE
            <i class="bi bi-wifi-2"></i>
        </div>

        <p id="time"></p>

        <div id="battery">
            98%
            <i class="bi bi-battery-full"></i>
        </div>
    </div>

<div id="slider">
        <div id="appsOne">
            <!-- Instagram -->
            <div id="instagramIcon" class="app" onclick="openInstagram();"><i class="bi bi-instagram"></i></div>
                <div id="instagramApp">
                    <form id="createAccountForm" action="#" onsubmit="openVerificationCodeInstagramPage(); return false;">
                        <h1 class="instagramHeader">Instagram</h1>
                        <p>Erstelle einen Account</p>
                        <input type="text" id="instagramNameInput" placeholder="Name" maxlength="12" autocomplete="off" required>
                        <input type="email" id="instagramEmail" placeholder="E-Mail" autocomplete="off" required>
                        <button type="submit" id="createAccount" class="instagramButton">Erstellen</button>
                    </form>

                    <div id="verificationCodeInstagramPage">
                        <h1 class="instagramHeader">Bestätigen</h1>
                        <p class="instagramSecondHeader">Wir haben ihn einen Bestätigungscode per Email gesendet!</p>
                        <input type="text" id="instagramNumberText" maxlength="4" onkeypress="return /[0-9]/i.test(event.key)" placeholder="Bestätigungscode"><br>
                        <button onclick="controlVerificationCode();" id="controlVerificationCode" class="instagramButton">Bestätigen</button>
                        <button class="instagramButton" id="continueToInstagramAccount" onclick="continueToInstagramAccount()">Weiter</button>
                        <p id="correctOrWrongCheck"></p>
                    </div>

                    <div id="instagramAccount">
                        <input type="text" id="instagramName">
                        <div id="instagramPictureAndNumbers">
                            <div id="profilePicture"><i class="bi bi-person-fill"></i></div>
                            <table id="numbers">
                                <tr>
                                    <th id="posts">0</th>
                                    <th id="followers">1</th>
                                    <th id="following">0</th>
                                </tr>
                                <tr>
                                    <td>Posts</td>
                                    <td>Followers</td>
                                    <td>Following</td>
                                </tr>
                            </table>
                        </div>
                        <textarea id="userDescription" placeholder="Beschreibung..." rows="10"></textarea>

                        <i class="bi bi-table"></i>
                        <p id="emptyImages">No images found</p>
                    </div>
            </div>

            <div id="appsTwo">
                Second App Page
            </div>

</div>

        <!-- Mail App -->
        <div id="mailIcon" class="app" onclick="openMail();"><i class="bi bi-envelope-fill"></i></div>
            <div id="mailApp">
                <h1 id="mailHeader">E-Mails</h1>

                <div class="email" id="erfolgreichAngemeldet">
                    <h1 class="emailHeader">Instagram</h1>
                    <p class="emailDescription" id="erfolgreichAngemeldetDescription">Erfolgreich angemeldet</p>
                </div>

                <div class="email" id="verificationCodeEmail">
                    <h1 class="emailHeader">Instagram</h1>
                    <p class="emailDescription" id="verificationCodeEmailDescription">Ihr Bestätigunscode lautet</p>
                </div>

            </div>
    </div>


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

To see the iPhone better you should click on Full-Page in the snippet.

My problem was that I have 2 divs: #appsOne and #appsTwo which are in the div #slider. On the home page of the iPhone you can see two apps (#appsOne) and a text (#appsTwo) in the middle. The apps (#appsOne) should stay where they are but the text (#appsTwo) should be made on a second page with a horizontal scroll snap. How could I do that?

And here's an image, how it looks like without the slider and the #appsTwo div:

Answer 1

CSS Scroll-snapping

We can seperate the two 'screen's by wrapping each in a div with class panel.

To make the slider scrollable, we have to apply white-space: nowrap to force it into a single line. To make scroll-snap work horizontally, set scroll-snap-type to x and make it mandatory (scroll-snap-type: x mandatory;). This means that:

The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point.^MDN

We also set overscroll-behavior-x to contain which makes sure that no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.

We then apply scroll-snap-align: center to .panel. To prevent the overflowing contents in the panels, we also apply white-space: initial.

Result:

https://jsfiddle.net/Spectric/j7br8h5a/

JS Scroll-snapping (mouse drag)

We can take it one step further by adding support for user drag to scroll.

For this, we don't actually need scroll-snap at all. We can do it with pure JS.

Add an event listener for mousedown that sets isDown to true. Record the last position of the mouse.

Add an event listener for mousemove that checks whether the user is currently dragging (isDown == true). If the user is, calculate the distance from the current mouse position and the last mouse position, increment the slider's scrollLeft by the difference, and set the last position to the current position.

Add an event listener for mouseup that sets isDown to false and checks whether the slider's current scrollLeft is bigger than half. If it is, we can use scrollIntoView() on one panel to smoothly scroll it into the viewport.

---

To prevent scrolling when an app is opened, we can store the status in a variable which we set it to true when one of the open app function is called and false when the closeApp function is called. In the mousemove listener we also check whether this variable is true.

_{Best viewed in full-page mode}

var time = document.getElementById("time");
var notification = document.getElementById("notification");
var notificationHeader = document.getElementById("notificationHeader");
var notificationDescription = document.getElementById("notificationDescription");
var verificationCode = Math.floor(1000 + Math.random() * 9000);
var input = document.getElementById("instagramNumberText");
var correctOrWrongCheck = document.getElementById("correctOrWrongCheck");
var verificationCodePTag = document.getElementById("verificationCode");
var instagram = document.getElementById("instagramApp");
var mail = document.getElementById("mailApp");
var createAccountButton = document.getElementById("createAccount");
var createAccountForm = document.getElementById("createAccountForm");
var verificationCodeInstagramPage = document.getElementById("verificationCodeInstagramPage");
var controlVerificationCodeButton = document.getElementById("controlVerificationCode");
var continueToInstagramAccountButton = document.getElementById("continueToInstagramAccount");
var verificationCodeEmailDescription = document.getElementById("verificationCodeEmailDescription");
var verificationCodeEmail = document.getElementById("verificationCodeEmail");
var erfolgreichAngemeldet = document.getElementById("erfolgreichAngemeldet");
var instagramAccount = document.getElementById("instagramAccount");

var instagramName = document.getElementById("instagramName");
var instagramNameInput = document.getElementById("instagramNameInput");


// Time

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  // add a zero in front of numbers<10
  m = checkTime(m);
  document.getElementById('time').innerHTML = h + ":" + m;
  t = setTimeout(function() {
    startTime()
  }, 500);
}
startTime();

// Insta

function controlVerificationCode() {
  if (input.value == verificationCode) {
    correctOrWrongCheck.innerHTML = "Der Code war korrekt!";
    continueToInstagramAccountButton.style.display = "block";
    continueToInstagramAccountButton.style.margin = "5px auto";
    controlVerificationCodeButton.style.display = "none";
  } else if (input.value !== verificationCode) {
    correctOrWrongCheck.innerHTML = "Der Code ist leider Falsch!";
    continueToInstagramAccountButton.style.display = "none";
    controlVerificationCodeButton.style.display = "block";
  }
}

verificationCodeEmailDescription.innerHTML = "Ihr Bestätigunscode lautet: " + verificationCode;

// OPEN AND CLOSE APPS

function openVerificationCodeInstagramPage() {
  createAccountForm.style.display = "none";
  verificationCodeInstagramPage.style.display = "block"
  verificationCodeEmail.style.display = "block";
  instagramName.value = instagramNameInput.value;
  notification.style.transform = "translate(-50%, -50%) scale(0)";
  notificationDescription.innerHTML = "Ihr Bestätigunscode lautet: ...";
  setTimeout(
    function() {
      notification.style.transform = "translate(-50%, -50%) scale(1)";
    }, 1000);
  setTimeout(
    function() {
      notification.style.transform = "translate(-50%, -50%) scale(0)";
    }, 7000);
}

function continueToInstagramAccount() {
  verificationCodeInstagramPage.style.display = "none";
  instagramAccount.style.display = "flex";
  erfolgreichAngemeldet.display = "none";
  notificationDescription.innerHTML = "Erfolgreich bei Instagram angemeldet"
  notification.style.transform = "translate(-50%, -50%) scale(0)";
  erfolgreichAngemeldet.style.display = "block";

  setTimeout(
    function() {
      notification.style.transform = "translate(-50%, -50%) scale(1)";
    }, 1000);
  setTimeout(
    function() {
      notification.style.transform = "translate(-50%, -50%) scale(0)";
    }, 7000);


  var counter = 0;
  var followers = document.getElementById('followers');
  setTimeout(function() {
    var st = setInterval(function() {
      followers.innerHTML = ++counter;
    }, 100)
  }, 100);
}


function closeNotification() {
  notification.style.transform = "translate(-50%, -50%) scale(0)";
}

var isAppOpened = false;

function openInstagram() {
  isAppOpened = true;
  instagram.style.transform = "scale(1)";
}

function openMail() {
  isAppOpened = true;
  mail.style.transform = "scale(1)";
}

function closeApp() {
  isAppOpened = false;
  instagram.style.transform = "scale(0)";
  mail.style.transform = "scale(0)";
}

window.onload = function() {
  document.getElementById("instagramNumberText").value = '';
}
const slider = document.getElementById("slider");
const panels = document.querySelectorAll('.panel');
var lastX = 0;
var isDown = false;

document.addEventListener("mousedown", function(e) {
  lastX = e.pageX;
  isDown = true;
})
document.addEventListener("mousemove", function(e) {
  if (isDown && !isAppOpened) {
    const curX = e.pageX;
    const diff = lastX - curX;
    slider.scrollLeft += diff;
    lastX = curX;
  }

})
document.addEventListener("mouseup", function() {
  isDown = false;
  slider.style.scrollBehavior = "smooth";
  if (slider.scrollLeft > 175) {
    panels[1].scrollIntoView();
  } else {
    panels[0].scrollIntoView();
  }
  slider.style.scrollBehavior = "unset";
})

* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  user-select: none;
}

input:focus,
textarea:focus {
  outline: 0;
}

#phone {
  height: 600px;
  width: 350px;
  border-radius: 50px;
  position: absolute;
  top: 600px;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-top: 90px solid;
  border-right: 15px solid;
  border-left: 15px solid;
  border-bottom: 90px solid;
  background-image: url("https://ioshacker.com/wp-content/uploads/2019/06/iOS-13-wallpaper.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.app {
  box-shadow: 0 0 9px -4px #000;
}

#topbar {
  padding: 0.3em;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20px;
  transform: translate(-4%, 0) scale(0.9);
  width: 370px;
}

#connection {
  display: flex;
  align-items: center;
  width: 110px;
  justify-content: space-around;
}

#battery {
  display: flex;
  align-items: center;
  width: 110px;
  justify-content: end;
}

#battery .bi-battery-full {
  font-size: 23px;
  margin-left: 5px;
}

#topbar .bi-wifi-2 {
  font-size: 25px;
  margin-top: -3px;
}

#time {
  text-align: center;
}

#notification {
  margin: 0;
  position: absolute;
  top: 365px;
  left: 50%;
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  height: 85px;
  width: 315px;
  background: #EDEBED;
  border-radius: 10px;
  z-index: 10000;
  transition: all 0.5s;
  box-shadow: 0 0 10px -1px #525252;
  padding: 0.5em 0 0.5em 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#notification h1 {
  font-size: 23px;
}

#appsOne {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

#instagramIcon,
#verificationCode,
#mailIcon {
  margin: 20px;
}

.app {
  font-size: 40px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  transition: all 0.2s;
}

.app:hover {
  cursor: pointer;
  filter: brightness(90%);
}

.bi-instagram,
.bi-envelope-fill {
  width: 40px;
  height: 40px;
  color: #fff;
  font-family: sans-serif;
}


/* Instagram */

#instagramIcon {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

#instagramApp {
  position: absolute;
  top: 0;
  left: 0;
  background: #EAEAEA;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all 0.3s;
  transform: scale(0);
  z-index: 99999;
  text-align: center;
}

.instagramHeader {
  font-family: 'Handlee', cursive;
  font-size: 35px;
}

.instagramSecondHeader {
  font-size: 15px;
  width: 260px;
  margin: 1em 0;
}

#instagramNameInput,
#instagramEmail,
#instagramNumberText {
  font-size: 15px;
  padding: 0.5em;
  border: 1px solid #D1D1D1;
  margin: 0.5em 0 0.5em 0;
  width: 220px;
}

.instagramButton {
  width: 236px;
  font-size: 15px;
  padding: 0.5em;
  background: #3296F0;
  color: #fff;
  border: none;
  margin: 0.5em 0;
  transition: all 0.2s;
}

.instagramButton:hover {
  filter: brightness(80%);
  cursor: pointer;
}

#verificationCodeInstagramPage {
  display: none;
}

#continueToInstagramAccount {
  display: none;
}

#instagramAccount {
  display: none;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  background: #f7f7f7;
  flex-direction: column;
  align-items: center;
}

#instagramName {
  font-size: 20px;
  text-align: left;
  width: 85%;
  padding: 20px 20px 15px 10px;
  border-bottom: 1px solid gray;
  height: 20px;
  border-right: none;
  border-top: none;
  border-left: none;
  background: none;
}

#profilePicture {
  font-size: 35px;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eae9e9;
  border-radius: 100000px;
  margin: 20px;
  border: 1px solid #6f6e6e;
  color: #6f6e6e;
}

#instagramPictureAndNumbers {
  display: inherit;
  width: 360px;
}

#numbers {
  width: 225px;
  height: 45px;
  margin: 35px 0 0 0;
}

#userDescription {
  width: 320px;
  font-size: 13px;
  border: none;
  background: none;
  resize: none;
}

.bi-table {
  font-size: 25px;
  border-bottom: 1px solid;
  width: 90%;
  margin-top: 0.5em;
}

#emptyImages {
  color: #c7c7c7;
  margin: 100px;
  font-size: 14px;
}


/* Mail */

#mailIcon {
  background: linear-gradient(0deg, #05ffff 0%, #3cabe6 30%, #2763dc 70%);
}

#mailApp {
  position: absolute;
  top: 0;
  left: 0;
  background: #f6f6f6;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  transition: all 0.3s;
  transform: scale(0);
  z-index: 99999;
  text-align: center;
}

#mailHeader {
  font-size: 25px;
  padding: 20px;
  background: #fff;
  width: 88%;
  z-index: 999;
}

#verificationCodeEmail {
  display: none;
}

.email {
  background: #fff;
  width: 97%;
  padding: 5px;
  border-top: 1px solid #e6e6e6;
}

.emailHeader {
  text-align: left;
  margin: 10px;
  font-size: 25px;
}

#verificationCodeEmailDescription,
#erfolgreichAngemeldetDescription {
  text-align: left;
  margin: 10px;
}

#erfolgreichAngemeldet {
  display: none;
}


/* Home Button */

#homeButton {
  position: absolute;
  height: 60px;
  width: 60px;
  background: transparent;
  z-index: 9999;
  bottom: -107px;
  border-radius: 100000px;
  left: 50%;
  -ms-transform: translate(-50%, -50%) rotate(-10deg);
  transform: translate(-50%, -50%) rotate(-10deg);
  border: 1px outset;
  cursor: pointer;
}

#slider {
  white-space: nowrap;
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  height: calc(100% - 30px);
}

.panel {
  display: inline-block;
  width: 350px;
  white-space: initial;
}

#appsTwo {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/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">
</head>

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

  <div id="phone">

    <div id="topbar">

      <div id="connection">
        <i class="bi bi-bar-chart-fill"></i> LIDL LTE
        <i class="bi bi-wifi-2"></i>
      </div>

      <p id="time"></p>

      <div id="battery">
        98%
        <i class="bi bi-battery-full"></i>
      </div>
    </div>

    <div id="slider">
      <div class="panel">
        <div id="appsOne">
          <!-- Instagram -->
          <div id="instagramIcon" class="app" onclick="openInstagram();"><i class="bi bi-instagram"></i></div>
          <div id="instagramApp">
            <form id="createAccountForm" action="#" onsubmit="openVerificationCodeInstagramPage(); return false;">
              <h1 class="instagramHeader">Instagram</h1>
              <p>Erstelle einen Account</p>
              <input type="text" id="instagramNameInput" placeholder="Name" maxlength="12" autocomplete="off" required>
              <input type="email" id="instagramEmail" placeholder="E-Mail" autocomplete="off" required>
              <button type="submit" id="createAccount" class="instagramButton">Erstellen</button>
            </form>

            <div id="verificationCodeInstagramPage">
              <h1 class="instagramHeader">Bestätigen</h1>
              <p class="instagramSecondHeader">Wir haben ihn einen Bestätigungscode per Email gesendet!
              </p>
              <input type="text" id="instagramNumberText" maxlength="4" onkeypress="return /[0-9]/i.test(event.key)" placeholder="Bestätigungscode"><br>
              <button onclick="controlVerificationCode();" id="controlVerificationCode" class="instagramButton">Bestätigen</button>
              <button class="instagramButton" id="continueToInstagramAccount" onclick="continueToInstagramAccount()">Weiter</button>
              <p id="correctOrWrongCheck"></p>
            </div>

            <div id="instagramAccount">
              <input type="text" id="instagramName">
              <div id="instagramPictureAndNumbers">
                <div id="profilePicture"><i class="bi bi-person-fill"></i></div>
                <table id="numbers">
                  <tr>
                    <th id="posts">0</th>
                    <th id="followers">1</th>
                    <th id="following">0</th>
                  </tr>
                  <tr>
                    <td>Posts</td>
                    <td>Followers</td>
                    <td>Following</td>
                  </tr>
                </table>
              </div>
              <textarea id="userDescription" placeholder="Beschreibung..." rows="10"></textarea>

              <i class="bi bi-table"></i>
              <p id="emptyImages">No images found</p>
            </div>
          </div>
          <div id="mailIcon" class="app" onclick="openMail();"><i class="bi bi-envelope-fill"></i></div>
          <div id="mailApp">
            <h1 id="mailHeader">E-Mails</h1>

            <div class="email" id="erfolgreichAngemeldet">
              <h1 class="emailHeader">Instagram</h1>
              <p class="emailDescription" id="erfolgreichAngemeldetDescription">Erfolgreich angemeldet</p>
            </div>

            <div class="email" id="verificationCodeEmail">
              <h1 class="emailHeader">Instagram</h1>
              <p class="emailDescription" id="verificationCodeEmailDescription">Ihr Bestätigunscode lautet
              </p>
            </div>

          </div>
        </div>

      </div>
      <div class="panel">
        <div id="appsTwo">
          <div>
            Second App Page
          </div>
        </div>
      </div>
    </div>
    <div id="homeButton" onclick="closeApp();"></div>
  </div>
</body>

</html>

Result:

^{You can hide the horizontal scrollbar by applying overflow-x:hidden to #slider}