html 应用阴影到滚动条滑块

fkvaft9z 于 8个月前发布在其他

关注(0)|答案(2)|浏览(64)

我做了这个scrollbar：

正如你所看到的，拇指有盒状阴影。但问题是，影子并不随拇指移动它的工作原理是这样的

这只是一些非常基本的细节，我添加，以摆脱这个错误，所以给我。
这是一个愚蠢的错误，不会消失

.pr-20{
  padding-right: 20px;
}

.w-217 {
  width: 217px;
}

.h-220 {
  height: 220px;
}

.text-right{
  text-align: right;
}
.overflow-y-show {
  overflow-y: scroll;
  direction: ltr !important;
}

.custom-scroll::-webkit-scrollbar {
  width: 9px;
}

/* the thin blue line */

.custom-scroll::-webkit-scrollbar-track {
  background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 
  45%, #48eefc 45%, #48eefc 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 
  100%);
}

.custom-scroll::-webkit-scrollbar-thumb {
  background-color: #48eefc;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 10px #48eefc;
  -moz-box-shadow: 0px 0px 10px #48eefc;
  box-shadow: 0px 0px 10px #48eefc;
}

<div class="overflow-y-show custom-scroll text-right pr-20 w-217 h-220">
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
</div>

Html

来源：https://stackoverflow.com/questions/64901732/applying-shadow-to-scrollbar-thumb

2条答案

按热度按时间

u59ebvdq1#

你觉得可以吗？

.overflow-y-show {
  overflow-y: scroll;
  direction: ltr !important;
}

::-webkit-scrollbar {
  width: 9px;
}

/* the thin blue line */

::-webkit-scrollbar-track {
  background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, #48eefc 45%, #48eefc 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
}

::-webkit-scrollbar-thumb {
  background-color: #48eefc;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 10px #48eefc;
  -moz-box-shadow: 0px 0px 10px #48eefc;
  box-shadow: 0px 0px 10px #48eefc;
}
/* for firefox scrollbar has only two properties scrollbar-color scrollbar-width*/
html {
 scrollbar-color: #48eefc #8ea5b5;
 scrollbar-width: thin;
}

<div className="overflow-y-show custom-scroll text-right pr-20 w-217 h-217">
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
</div>

赞(0）回复(0）举报 8个月前

kx1ctssn2#

我是这样解决这个问题的

const scrollbar = document.querySelector('.custom-scroll');
        const wrapper = document.querySelector('.wrapper');
        let updated = false;
        scrollbar.addEventListener('scroll', () => {
            if (updated)
                return;

            updated = true;
            wrapper.classList.add('scale');
            scrollbar.classList.add('zoom');

            setTimeout(() => {
                wrapper.classList.remove('scale');
                scrollbar.classList.remove('zoom');
                updated = false;
            }, 1);
        })

.wrapper {
            padding: 30px;
            width: fit-content;
            height: fit-content;
            background: #fff;
        }

        .pr-20 {
            padding-right: 20px;
        }

        .w-217 {
            width: 217px;
        }

        .h-220 {
            height: 220px;
        }

        .text-right {
            text-align: right;
        }

        .overflow-y-show {
            overflow-y: auto;
            direction: ltr !important;
        }

        .custom-scroll::-webkit-scrollbar {
            width: 9px;
        }

        /* the thin blue line */

        .custom-scroll::-webkit-scrollbar-track {
            background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, #48eefc 45%, #48eefc 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
        }

        .custom-scroll::-webkit-scrollbar-thumb {
            background-color: #48eefc;
            border-radius: 5px;
            -webkit-box-shadow: 0px 0px 10px #48eefc;
            -moz-box-shadow: 0px 0px 10px #48eefc;
            box-shadow: 0px 0px 10px #48eefc;
        }

        .scale {
            transform: scale(1.1);
        }

        .zoom {
            transform: scale(0.91);
        }

<div class="wrapper">
        <div class="overflow-y-show custom-scroll text-right pr-20 w-217 h-220">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
        </div>
    </div>

赞(0）回复(0）举报 8个月前

我来回答

html 应用阴影到滚动条滑块

2条答案

相关问题

热门标签

最新问答