自定义 webkit 滚动条的问题

Question

我正在用 css 制作一个自定义滚动条，但是正如您在图片中看到的那样，滚动条轨道的一角与我需要的不一样，我已经尝试了右下角和顶部的边框半径正确，但运气不好，我们将不胜感激！

::-webkit-scrollbar-thumb {
    background: url("/assets/scrollbar.png") no-repeat;
    background-size: 9px 150px;
    display: block;
  }

  ::-webkit-scrollbar-track-piece {
    background: grey;
  }

Answer 1

试试用css的视角属性按照右图旋转一下

这段代码将帮助您理解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div1{
        border: 1px solid blue;
        height: 200px;
        width: 200px;
        perspective: 200px; /* Defines how far the object is */
    }

    .div2{
        transform-style: preserve-3d; /* Rotatingthe div as a 3d object */
        transform: rotateY(45deg);

        height: 60%;

        display: flex; /* Flexbox for centering the text */
        align-items: center;
        justify-content: center;

        background-color: grey;
    }
</style>
<body>
    <div class="div1">
        Div 1
        <div class="div2">
            Div 2
        </div>
    </div>
</body>
</html>

我希望你明白了。查看 this link 了解更多信息。如果您需要更多解释，请随时在评论中提问。

Answer 2

感谢我团队中的一个人，我们设法通过将背景添加到 webkit 滚动条轨道来解决问题。

自定义 webkit 滚动条的问题

Issue with custom webkit scrollbar

css

scrollbar