自定义Overflow-x CSS宽度和位置

Question

我做了一些研究，需要帮助，我在Bootstrap 4上有一个水平滑块，并且在顶部和顶部需要滚动条，因此我需要更改位置，一个很小的位置，所以我需要更改宽度。

我知道如何更改宽度，但是如果宽度是y而不是x，并且我不知道如何更改位置。

这是我的代码：

/* line 6, sass/page/_home.scss */
.employes > .row {
  overflow-x: auto;
  white-space: nowrap;
  /* Track */
  /* Handle */
}
/* line 9, sass/page/_home.scss */
.employes > .row > .col-sm-4 {
  display: inline-block;
  float: none;
}
/* line 13, sass/page/_home.scss */
.employes > .row::-webkit-scrollbar {
  width: 12px;
}
/* line 17, sass/page/_home.scss */
.employes > .row::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
/* line 24, sass/page/_home.scss */
.employes > .row::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 0, 0, 0.8);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* line 30, sass/page/_home.scss */
.employes > .row::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="container-fluid employes">
  <div class="row text-center flex-nowrap">
    <div class="col-md-2 col-sm-4 col-xs-8">1</div>
    <div class="col-md-2 col-sm-4 col-xs-8">2</div>
    <div class="col-md-2 col-sm-4 col-xs-8">3</div>
    <div class="col-md-2 col-sm-4 col-xs-8">4</div>
    <div class="col-md-2 col-sm-4 col-xs-8">5</div>
    <div class="col-md-2 col-sm-4 col-xs-8">6</div>
    <div class="col-md-2 col-sm-4 col-xs-8">7</div>
    <div class="col-md-2 col-sm-4 col-xs-8">8</div>
    <div class="col-md-2 col-sm-4 col-xs-8">9</div>
  </div>
</div>

如果我仅对CSS给出答案，那将是很棒的。 顺便说一句，您知道如何使其成为多平台的吗？我尝试将-ms-，-o-代替-webkit-或-webkit-appereance：无，但没有用。

编辑：这是我的意思

Answer 1

请记住，::-webkit-scrollbar选择器仅受webkit支持，因此在非Webkit浏览器（例如Firefox）中，样式化的滚动条和以下技巧将不起作用。在非Webkit浏览器中，目前无法使用纯CSS设置滚动条的样式。

[截至2018年6月25日]

---

感谢您澄清所需的效果。正如他们所说，“图像说出一千个字”。

在以下解决方案中，我结合了两个技巧。一种是将transform: rotateX(180deg)用于容器和列，因此滚动条显示在div的顶部，而不显示在底部（默认情况下）。第二个transform: rotateX(180deg)将列旋转到默认方向。为了使滚动条更短，我设置了滚动条按钮的样式。它们具有宽度，但不可见，因此看起来滚动条的主体较短。

.employes>.row::-webkit-scrollbar-button {
  width: 100px;
}

我希望有帮助。

/* line 6, sass/page/_home.scss */

.employes {
  transform: rotateX(180deg);
  overflow-x: auto;
  text-align: center;
}

.employes>.row {
  overflow-x: auto;
  white-space: nowrap;
  margin: 0 auto;
  padding: 0 0 30px 0;
  /* Track */
  /* Handle */
}


/* line 9, sass/page/_home.scss */

.employes>.row>.col-sm-4 {
  display: inline-block;
  float: none;
  transform: rotateX(180deg);
}


/* line 13, sass/page/_home.scss */

.employes>.row::-webkit-scrollbar {
  width: 12px;
}


/* line 17, sass/page/_home.scss */

.employes>.row::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}


/* line 24, sass/page/_home.scss */

.employes>.row::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 0, 0, 0.8);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}


/* line 30, sass/page/_home.scss */

.employes>.row::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}

.employes>.row::-webkit-scrollbar-button {
  width: 100px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="container-fluid employes">
  <div class="row text-center flex-nowrap">
    <div class="col-md-2 col-sm-4 col-xs-8">1</div>
    <div class="col-md-2 col-sm-4 col-xs-8">2</div>
    <div class="col-md-2 col-sm-4 col-xs-8">3</div>
    <div class="col-md-2 col-sm-4 col-xs-8">4</div>
    <div class="col-md-2 col-sm-4 col-xs-8">5</div>
    <div class="col-md-2 col-sm-4 col-xs-8">6</div>
    <div class="col-md-2 col-sm-4 col-xs-8">7</div>
    <div class="col-md-2 col-sm-4 col-xs-8">8</div>
    <div class="col-md-2 col-sm-4 col-xs-8">9</div>
  </div>
</div>