js+css实现图文卡片自定义弯曲滚动条跟随滚动效果代码-html代码-BFW代码库

js+css实现图文卡片自定义弯曲滚动条跟随滚动效果代码

代码语言：html

代码描述：js+css实现图文卡片自定义弯曲滚动条跟随滚动效果代码

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

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

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

  
  
<style>
@import url(https://fonts.bunny.net/css?family=krub:200i,300);
@layers demo,base;


@layer demo{
  
  .wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px, 1fr));
    gap: 1rem;
    height: 500px;
    width: min(100%, 600px);
    margin: 0 auto;
  }
  .scroll-container {
    --thumb-color: rgb(0, 188, 255);
    --thumb-color-active: dodgerblue;
    --thumb-width: 4;
    --thumb-width-active: 6;
    
    --track-color: transparent;
    --track-color-active: light-dark(#EEE,#222);
    --track-width: 4;
    --track-width-active: 6;
    
    position: relative;
    /*isolation: isolate; /* ensure that the scrollbar doesn't get lost behind other content*/
    width: 100%;
    contain:size;
    margin: 3rem auto;
    border: 1px solid var(--clr-lines);
    border-radius: 50px;
    overflow: hidden;
  
    &.box-2{
    --thumb-color: rgb(154, 230, 0);
    --thumb-color-active: rgb(124, 207, 0);
      border-radius: 20px;
    }
  
    & h2{
      text-wrap: balance;
      font-size: 1.1rem;
    }
    & img{
      max-width: 100%;
      display: block;
    }
  }
	
  
  .scroll-content {
    height: 100%;
    overflow-y: auto;
    padding:1rem 1.5rem 1rem 1rem; /* space on right for scrollbar */
	
    /* Always keep scrolling functional */
    overflow-y: scroll;
  
    /* Hide scrollbar for Chrome, Safari, and Opera */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge Legacy */
  }
  
  .scroll-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
  }
  .scrollbar-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    &:has(:active) {
      --thumb-width: var(--thumb-width-active);
      --track-width: var(--track-width-active);
      --track-color: var(--track-color-active);
    }
  }
  
  .scrollbar-track {
    fill: none;
    stroke: var(--track-color);
    stroke-width: var(--track-width);
    stroke-linecap: round;
    transition: stroke-width,stroke;
    transiton-duration: 150ms;
    transition-timing-function:ease-in-out;
  }
  .scrollbar-thumb {
    fill: none;
    stroke: var(--thumb-color);
    stroke-width: var(--thumb-width);
    stroke-linecap: round;
    pointer-events: auto;
    cursor: grab;
    transition: stroke-width,stroke;
    transiton-duration: 150ms;
    transition-timing-function:ease-in-out;
    &:active {
      stroke: var(--thumb-color-active);
      cursor: grabbing;
    }
  }
  
}


@layer base{
  *{
  	box-sizing: border-box.........完整代码请登录后点击上方下载按钮下载查看