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

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

代码语言：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-bloc.........完整代码请登录后点击上方下载按钮下载查看