自定义 webkit 滚动条的问题答案

【问题标题】：Issue with custom webkit scrollbar自定义 webkit 滚动条的问题
【发布时间】：2021-09-13 05:30:47
【问题描述】：

我正在使用 css 制作一个自定义滚动条，但正如您在图片中看到的那样，滚动条轨道的角落不是我需要的，我尝试了右下角和右上角的边框半径，但没有运气，任何帮助将不胜感激！

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

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

【问题讨论】：

你能发布你的完整代码或制作一个codepen吗？
你好@AnikethMalyala 我涉及到滚动条的代码都是我上面展示的所有css代码，没有别的了，我会尽快添加代码笔，谢谢你的评论

标签： css scrollbar

【解决方案1】：

尝试使用css的perspective属性按照右图进行旋转。

此代码将帮助您理解。

<!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 了解更多信息。如果您需要更多解释，请随时在 cmets 中提问。

【讨论】：

【解决方案2】：

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

【讨论】：