Home / Frontend Codes and Demos / JavaScript / iPhone X Notch like Scroll
iPhone X Notch like Scroll UI

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

iPhone X Notch like Scroll

iPhone X Notch like Scroll UI

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>

{loadposition position-9}

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; /*   position: absolute; */   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

About CV

I'm frontend developer

Check Also

Javascript Permutations and Combinations of Array Values

In this tutorial, The JavaScript functions to calculate combinations of elements in Array. This JavaScript algorithm will find all combinations of JavaScript array values. This algorithm is one of the most efficient way to get permutations and combinations of Array values.