自定義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：none放進去，但是沒有用。

編輯：這就是我的意思

Answer 1

請記住：::-webkit-scrollbar選擇器僅受webkit支持，因此在非webkit瀏覽器（例如Firefox）中，樣式化的滾動條及以下技巧將不起作用。 當前無法在非Webkit瀏覽器中使用純CSS設置滾動條的樣式。

[截至2018年6月25日]

---

感謝您澄清所需的效果。 正如他們所說，“圖像說出一千個單詞”。

在下面的解決方案中，我結合了兩個技巧。 一種是使用transform: rotateX(180deg)對容器和列使用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>