iPhone缺口卷轴滚动效果模拟

iPhone Notch Scroll

h5, iphone, device

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2734
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

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;
}

编译

CSS

: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);
}

HTML

<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>

iPhone Notch Scroll

h5, iphone, device

编辑器支持Emmet

快捷键

iPhone Notch Scroll

h5, iphone, device

Web Animation API开发实例 - 涟漪动效

HTML5 Perlin.js带发光效果的粒子特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：