css实现滚动状态查询的可滚动视觉提示效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现滚动状态查询的可滚动视觉提示效果代码，网页设计中使用 CSS 滚动状态查询（scroll-state queries）来增强用户体验，使得用户能够直观地感知到一个区域是否可以滚动。页面首先提到了一个不佳的示例，即没有设置视觉提示的可滚动区域，用户必须依赖操作系统的滚动条来判断是否可以滚动。接着，页面展示了一个经典的示例，该示例使用了边框、背景和被剪切的视觉元素作为永久性的滚动提示。之后，页面通过三个示例展示了使用scroll-state()函数的应用，包括：添加阴影作为滚动提示、使用箭头图标指示

代码标签： css 滚动状态查询滚动视觉提示

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@layer support, demo;

@layer demo {
  #bad-example .scroll-container {
    overflow: auto;
  }
  
  #classic-example .scroll-container {
    overflow: auto;
    block-size: 10rlh;
    border: 1px solid var(--surface-1);
    background: var(--surface-2);
  }
  
  #example-1 .scroll-container {
    /* notice size added too, makes 100cqh contextual for the shadows */
    container-type: scroll-state size;
    overflow: auto;
    
    /* stack the shadows with the .scroller */
    display: grid;
    
    > * {
      grid-area: 1/1;
    }
    
    /* shadows can match scrollport height and be sticky during scroll */
    > .shadows {
      --_shadow-color: oklch(from var(--surface-1) 20% calc(c*2) h / 25%);
      
      position: sticky;
      top: 0;
      height: 100cqh;
      
      /* background props ready for scroll-state to flip on/off */
      background: var(--_shadow-top, none), var(--_shadow-bottom, none);
      
      @media (prefers-color-scheme: dark) {
        --_shadow-color: #000c;
      }
      
      @container scroll-state(scrollable: top) {
        --_shadow-top: linear-gradient(to bottom, var(--_shadow-color), #0000 20px);
      }
      
      @container scroll-state(scrollable: bottom) {
        --_shadow-bottom: linear-gradient(to top, var(--_shadow-color), #0000 20px);
      }
    }
  }
  
  #example-2 .scroll-container {
    container-type: scroll-state;
    overflow: auto;
    display: grid;
    
    & > * {
      grid-area: 1/1;
    }
    
    > .scroll-indicator {
      place-self: end;
      position: sticky;
      inset-block-end: 10px;
      inline-size: 100%;
      text-align: center;
      
      transition: translate .2s ease;
      
      @container scroll-state((scrollable: top) or (not (scrollable: bottom))) {
        translate: 0 calc(100% + 10px);
      }
      
      @container scroll-state((scrollable: top) and (not (scrollable: bottom))) {
        translate: 0 calc(100% + 10px);
        rotate: .5turn;
      }
      
      > svg {
        background: var(--surface-2);
        aspect-ratio: 1;
        border-radius: 1e3px;
        inline-size: 48px;
        block-size: 48px;
      }
    }
  }
  
  #example-3 .scroll-container {
    container-type: scroll-state;
    overflow: auto;
    display: grid;
    
    & > * {
      grid-area: 1/1;
    }
    
    > .scroll-to-top {
      place-self: end;
      position: sticky;
      inset-block-end: 10px;
      inset-inline-end: 10px;
      
      transition: translate .2s ease;
      
      @container not scroll-state(scrollable: top) {
        translate: 0 calc(100% + 10px);
      }
      
      > button {
        background: var(--surface-2);
        border: 1px solid var(--surface-3);
        aspect-ratio: 1;
        border-radius: 1e3px;
        inline-size: 48px;
        
        > svg {
          inline-size: 75%;
        }
      }
    }
  }
}




@layer support {
  :root {
    --surface-1: light-dark(oklch(80% 10% 250), oklch(10% 5% 250));
    --surface-2: light-dark(oklch(90% 7% 250), oklch(20% 5% 250));
    --surface-3: light-dark(oklch(100% 8% 250), oklch(30% 5% 250));
    --text-1: light-dark(oklch(10% 5% 250), oklch(90% 5% 250));
    --text-2: light-dark(oklch(20% 5% 250), oklch(80% 5% 250));
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    place-items: start;
    gap: 5vh;
    padding-block: 15vh;
    
    background: radial-gradient(circle in oklab, var(--surface-2), var(--surface-1)) fixed;
    color: var(--text-1);
    
    > header {
      display: grid;
      gap: 10px;
      text-align: center;
      max-inline-size: 45ch;
      margin-inline: auto;
    }
  }
  
  .scroll-container {
    inline-size: 30ch;
    block-size: 11rlh;
    
    overscroll-behavior: contain;
  }
  
  .scroller {
    display: grid;
    gap: 10px;
    padding: 10px;
    
    > .item {
      padding: 10px 15px;
      background: var(--surface-3);
    }
  }
  
  section {
    display: flex;
    flex-flow: row-reverse;
    gap: 30px;
    justify-items: start;
    
    > header {
      display: grid;
      place-content: center start;
      gap: 10px;
      
      > p {
        text-wrap: balance;
        max-inline-size: 30ch;
        color: var(--text-2);
      }
    }
  }
}
</style>

  
  
</head>

<body translate="no">
  <header> 
  <h1>Visual Affordances for Scroll</h1>
  <p>How CSS scroll-state queries can help users understand that a box is scrollable. The power of scroll-state queries here is the ability to dynamically apply an affordance.</p>
</header>

<section id="bad-example">
  <header>
    <h2>Bad Example</h2>
    <p>A scrollable area with no visual affordances unless scrollbars are set to visible in the OS.</p>
  </header>
  <div class="scroll-container">
    <div class="scroller">
      <div class="item">One</div>
      <div class="item&quo.........完整代码请登录后点击上方下载按钮下载查看