https://codepen.io/davvidbaker/pen/KXgPyG <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iPhone 刘海滚动</title> <style type="text/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: flex; align-items: center; 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: flex; 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; transform-origin: center left; } *::-webkit-scrollbar { width: 5px; padding: 100px; transform: scalex(10); } *::-webkit-scrollbar-thumb { border-radius: var(--thumb-radius); background-color: #5555; padding-right: 5px; transform: scalex(10); } </style> </head> <body> <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> </body> <script type="text/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; } </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » iPhone 刘海滚动 喜欢 (0)or分享 (0)
