html - 如何使用 CSS Grid 改善滚动条外观/设计中带有粘性右列的集成？

Question

我已经使用 css Grid 实现了布局。

左边的列应该只滚动，右边的列应该是粘性的或固定的。
它工作正常，但滚动条破坏了设计。

可以去掉滚动条或者其他解决办法吗？

我知道这是浏览器的原生功能，但我能做什么？ (我也尝试更改设计，但现在 Firefox 支持它)

.container {
  height: 100vh;
  display: grid;
  grid-template-areas: "list content";
  grid-template-columns: 150px 1fr;
  grid-template-rows: auto;
  color: white;
}
.container .list {
  overflow: auto;
  grid-area: list;
  background-color: #131418;
  padding: 20px;
}
.container .list .items {
  margin-top: 15px;
  display: block;
}
.container .content {
  grid-area: content;
  background-color: #15161b;
  padding: 15px;
  position: sticky;
}

<div class="container">
<div class="list">
  <h5>
  Items
  </h5>
  <div class="items">
    <div class="item">
      <small>User name</small>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit. 
      </p>
      <small>Made by ...</small>
    </div>
     <div class="item"  style="margin-top: 15px;">
      <small>User name</small>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit. 
      </p>
      <small>Made by ...</small>
    </div>
  
  </div>
</div>
<div class="content">
  <h1>
  Hello world
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit. 
  </p>
</div>
</div>

Answer 1

一个可能的解决方案是改进滚动条的外观。

看看 perfect-scrollbar例如。
Perfect-scrollbar 只会在鼠标悬停相关DIV时显示。

演示截图
(看右边非常小的滚动条)

author's JSFiddle demo

var ps = new PerfectScrollbar('.container');

您的代码片段已解决

var ps = new PerfectScrollbar('.list');

.container {
  height: 100vh;
  display: grid;
  grid-template-areas: "list content";
  grid-template-columns: 150px 1fr;
  grid-template-rows: auto;
  color: white;
}
.container .list {
  overflow: auto;
  grid-area: list;
  background-color: #131418;
  padding: 20px;
}
.container .list .items {
  margin-top: 15px;
  display: block;
}
.container .content {
  grid-area: content;
  background-color: #15161b;
  padding: 15px;
  position: sticky;
}

<link href="https://rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css" rel="stylesheet"/>
<script src="https://rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script>


<div class="container">
<div class="list">
  <h5>
  Items
  </h5>
  <div class="items">
    <div class="item">
      <small>User name</small>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit. 
      </p>
      <small>Made by ...</small>
    </div>
     <div class="item"  style="margin-top: 15px;">
      <small>User name</small>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit. 
      </p>
      <small>Made by ...</small>
    </div>
  
  </div>
</div>
<div class="content">
  <h1>
  Hello world
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit. 
  </p>
</div>
</div>