webkit scroller bar自定义垂直高度

我正在创建一个通知框，为此，要自定义webkit滚动条的垂直高度，以便我可以节省空间并使用它显示其他信息，例如添加关闭按钮。webkit scroller bar自定义垂直高度

在中心，我有我想显示内容（消息）。它将占据整个中心区域（高度：100％）。

在右侧，我在顶部有一个关闭按钮，然后是一个用于中心内容区域（其高度小于其内容区域）的滚动条。

有没有任何CSS的方式与HTML的帮助下，我可以完成预期的结果。

注意：不需要包含JavaScript和其他库。只是纯粹的CSS + HTML

支持的浏览器：只有镀铬

我GOOGLE了，但我认为这是没有办法的（至少我发现..）提供，直到我们使用任何一种样式库。

***** COMMENT *****

@LGSon 滚动条的拇指还在不在初始状态完全可见。添加截图以便更好地理解。

在第二个屏幕截图中，我们都能够看到滚动条拇指的全高度，而不是一日一。

环境：的Chrome版本56.0.2924.87（64位），MacOS的塞拉利昂v10.12

来源

2017-02-18 Mohit Pandey

不能更改垂直滚动条的高度，但你可以做这样的事情， ~~其中一个给第一个滚动按钮的高度与关闭按钮~~ 的高度相同，其中一个按钮给拇指/跟踪器一个边缘顶部，然后它将调整拇指/跟踪器的大小以完全适合下面的空间。

注意，如通过@Mohit潘迪中， “滚动按钮高度”（第一样品）溶液似乎not working properly on Mac指出， “边距” 确实（第二样品）

样品1

.wrapper { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 70px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
} 
 

 
.scroller { 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 

 
.close { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    background: #B00; 
 
    padding: 1px 3px; 
 
    color: white; 
 
    cursor: pointer; 
 
} 
 

 
.scroller::-webkit-scrollbar { 
 
    width: 18px; 
 
} 
 

 
.scroller::-webkit-scrollbar-thumb { 
 
    background: gray; 
 
    height: 25px; 
 
} 
 

 
.scroller::-webkit-scrollbar-track-piece { 
 
    background: lightgray; 
 
} 
 

 
.scroller::-webkit-scrollbar-button:start { 
 
    height: 20px; 
 
}

<div class="wrapper"> 
 
    <div class="close">X</div> 
 
    <div class="scroller"> 
 
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
 
    </div> 
 
</div>

样品2

.wrapper { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 70px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
} 
 
.scroller { 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 
.close { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    background: #B00; 
 
    padding: 1px 3px; 
 
    color: white; 
 
    cursor: pointer; 
 
} 
 

 
.scroller::-webkit-scrollbar { 
 
    width: 18px; 
 
} 
 
.scroller::-webkit-scrollbar-thumb { 
 
    background: gray; 
 
    height: 28px; 
 
    border-radius: 9px; 
 
    margin-top: 20px; 
 
} 
 
.scroller::-webkit-scrollbar-track-piece { 
 
    background: lightgray; 
 
    border-radius: 9px; 
 
    margin-top: 20px; 
 
}

<div class="wrapper"> 
 
    <div class="close">X</div> 
 
    <div class="scroller"> 
 
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
 
    </div> 
 
</div>

来源

2017-02-18 12:25:37 LGSon

webkit scroller bar自定义垂直高度

回答

相关问题