iPhone X Notch like Scroll

Awesome iPhone X like scrolling developed using HTML, CSS, JavaScript. Demo and Download the zip (*.zip).

iPhone X Notch like Scrolling effect

HTML Snippet

<div class="outer">
    <div class="inner">
        <ul>
            <li>SweeTango </li>
            <li>Pacific Rose</li>
            <li>SnapDragon</li>
            <li>Envy</li>
            <li>Koru (Plumac)</li>
            <li>Pink Lady (Cripps Pink)</li>
            <li>Honeycrisp</li>
            <li>Royal Gala</li>
            <li>Macoun</li>
            <li>McIntosh</li>
            <li>Autumn Glory</li>
            <li>Opal</li>
            <li>Rome</li>
            <li>Red Delicious</li>
            <li>Golden Delicious</li>
            <li>Cameo</li>
            <li>Granny Smith</li>
            <li>Rainier Gala</li>
            <li>SweeTango </li>
            <li>Pacific Rose</li>
            <li>SnapDragon</li>
            <li>Envy</li>
            <li>Koru (Plumac)</li>
            <li>Pink Lady (Cripps Pink)</li>
            <li>Honeycrisp</li>
            <li>Royal Gala</li>
            <li>Macoun</li>
            <li>McIntosh</li>
            <li>Autumn Glory</li>
            <li>Opal</li>
            <li>Rome</li>
            <li>Red Delicious</li>
            <li>Golden Delicious</li>
            <li>Cameo</li>
            <li>Granny Smith</li>
            <li>Rainier Gala</li>
            <li>SweeTango </li>
            <li>Pacific Rose</li>
            <li>SnapDragon</li>
            <li>Envy</li>
            <li>Koru (Plumac)</li>
            <li>Pink Lady (Cripps Pink)</li>
            <li>Honeycrisp</li>
            <li>Royal Gala</li>
            <li>Macoun</li>
            <li>McIntosh</li>
            <li>Autumn Glory</li>
            <li>Opal</li>
            <li>Rome</li>
            <li>Red Delicious</li>
            <li>Golden Delicious</li>
            <li>Cameo</li>
            <li>Granny Smith</li>
            <li>Rainier Gala</li>
            <li>SweeTango </li>
            <li>Pacific Rose</li>
            <li>SnapDragon</li>
            <li>Envy</li>
            <li>Koru (Plumac)</li>
            <li>Pink Lady (Cripps Pink)</li>
            <li>Honeycrisp</li>
            <li>Royal Gala</li>
            <li>Macoun</li>
            <li>McIntosh</li>
            <li>Autumn Glory</li>
            <li>Opal</li>
            <li>Rome</li>
            <li>Red Delicious</li>
            <li>Golden Delicious</li>
            <li>Cameo</li>
            <li>Granny Smith</li>
            <li>Rainier Gala</li>
        </ul>
        <div class="notch"></div>
    </div>
</div>

CSS Snippet

:root {
    --width: 494px;
    --height: 242px;
    --chrome: 22.5px;
    --outer-border-radius: 25px;
    --thumb-radius: 0px;
}

html {
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
}

body {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: -webkit-radial-gradient(turquoise, midnightblue);
    background: radial-gradient(turquoise, midnightblue);
    font-weight: lighter;
    font-size: 10px;
}

.outer {
    position: relative;
    margin: 0 auto;
    width: var(--width);
    height: var(--height);
    border-radius: var(--outer-border-radius);
    border: solid 2px buttonface;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: black;
}

.inner {
    background: white;
    
    margin: 0 auto;
    width: calc(100% - var(--chrome));
    height: calc(100% - var(--chrome));
    border-radius: calc(var(--chrome) - 10px);
    overflow-y: scroll;
    overflow-x: hidden;
}

.notch {
    position: absolute;
    background: black;
    width: 3%;
    height: 60%;
    top: 20%;
    left: calc(var(--chrome)/2);
    border-radius: 0 10px 10px 0;
}

ul {
    padding-left: calc(var(--chrome)/4);
    padding-right: 10px;
    margin: 5px 0;
    overflow: hidden;
}

li {
    list-style: none;
    padding: 5px 5px;
    border-bottom: 1px solid #dadada;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}

*::-webkit-scrollbar {
    width: 5px;
    padding: 100px;
    -webkit-transform: scalex(10);
    transform: scalex(10);
}

*::-webkit-scrollbar-thumb {
    border-radius: var(--thumb-radius);
    background-color: #5555;
    padding-right: 5px;
    -webkit-transform: scalex(10);
    transform: scalex(10);
}

JavaScript Snippet

const THRESH = 10;
const $ = selector => document.querySelector(selector);
const $ = selector => document.querySelectorAll(selector);
const items = $("li");
const style = getComputedStyle(document.body);
//const chromeWidth = style.getPropertyValue("--chrome");
const chromeWidth = 22.5;
const setCustomProperty = (property, value) => {
    style.setProperty("--${property}", value);
};
let notchRect = $(".notch").getBoundingClientRect();
window.addEventListener("resize", () => {
    notchRect = $(".notch").getBoundingClientRect();
});
bumpItems();
$(".inner").onscroll = onScroll;

function onScroll(e) {
    window.requestAnimationFrame(bumpItems);
}

function bumpItems() {
    for (let item of items) {
        const itemRect = item.getBoundingClientRect();
        const distFromBottom = itemRect.top - notchRect.bottom;
        const distFromTop = itemRect.bottom - notchRect.top;
        if (Math.abs(distFromTop) < THRESH) {
            item.style.transform = `translateX(${lerp(         0,         chromeWidth,         (distFromTop + THRESH) / (THRESH * 2)       )}px)`;
        } else if (distFromTop > 0 && Math.abs(distFromBottom) > THRESH && distFromBottom < 0) {
            item.style.transform = `translateX(${chromeWidth}px)`;
        } else if (Math.abs(distFromBottom) < THRESH) {
            item.style.transform = `translateX(${lerp(         chromeWidth,         0,         (distFromBottom + THRESH) / (THRESH * 2)       )}px)`;
        } else {
            item.style.transform = `translateX(0)`;
        }
    }
}

function lerp(v0, v1, t) {
    return v0 * (1 - t) + v1 * t;
}

Find the demo below

See the Pen iPhone Notch Scroll 2 by David Baker (@davvidbaker) on CodePen.

Download