How to make a custom cross-browser scrollbar for section?

Question

我有一个部分位于右侧，宽度超过 3000 像素。我想为它制作一个带有垂直和水平缩进的自定义滚动条，如图片和codepen上的演示版本所示。在 Chrome 中一切正常，但在其他浏览器中，滚动条样式被重置，而在 Safari 上则完全没有。如何解决？

图片：

HTML：

<div class="first-section">First Section</div>  

<!-- Main Section -->
<section class="reviews">
    <h3 class="reviews__title">
      Title
    </h3>
    <div class="reviews__wrapper">
      <div class="reviews__inner">
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
        <div class="reviews__card"></div>
        <div class="reviews__col"></div>
      </div> 
      </div>
    </section>
<!-- Main Section -->

<div class="last-section">Footer</div>

CSS：

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f8f8f8;  
  font-family: 'Assistant', sans-serif;
}

/* Sections to simulate */
.first-section,
.last-section {
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  background: #ccc;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.first-section {
  height: 450px;
}
.last-section {
  height: 480px;
  margin-top: 100px;
}

/* Horizontal Section */
.reviews {
  padding: 70px 0 100px;
}
.reviews__wrapper {
  display: flex;
    direction: ltr;
    position: relative;
  padding: 0 5vw;
}
.reviews__inner {
  width: 100%;
  height: 622px;
    overflow-x: scroll;
    overflow-y: hidden;
  padding-bottom: 70px;

    display: flex;
    gap: 30px;
}
.reviews__inner::-webkit-scrollbar {
  height: 10px;          
    border-radius: 5px;  
    background: #e2e2e2;
}
.reviews__inner::-webkit-scrollbar-thumb {
  background: #000;
    border-radius: 5px;
}