数据表上的滚动条样式答案

【问题标题】：Scrollbar style on datatable数据表上的滚动条样式
【发布时间】：2017-04-01 22:11:12
【问题描述】：

如何使用 webkit 设置特定数据表 scorllbar 的样式。代码如下：

    id ::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 5px;
    }
    id::-webkit-scrollbar {
        width: 13px;
    }
    id::-webkit-scrollbar-thumb {
    border-radius: 5px;
    height:40%;
    background-color: #999999;

但是这种风格改变了我整个项目中整个数据表的滚动条。我已经尝试过上课，但仍然无法正常工作。

请帮忙

【问题讨论】：

标签： jquery css .net model-view-controller datatable

【解决方案1】：

::-webkit-scrollbar {
    width: 9px;
}


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

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(192,192,192,0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}

【讨论】：

谢谢，但我只想在特定数据表中设置一个滚动条的样式，而不是全部。我不知道为什么滚动条不接受我的表 id 或类

【解决方案2】：

滚动条是另一个元素的伪元素。因此，您可以通过定位导致它出现的任何元素的溢出来设置它的样式。

下面是两个具有两个不同滚动条的元素的示例：

.scrollbar-1,
.scrollbar-2 {
  float: left;
  margin-right: 2em;
  width: 10em;
  height: 5em;
  overflow: auto;
}

/* Element specific scrollbar styling */

.scrollbar-1::-webkit-scrollbar {
    background: gray;
}
 
.scrollbar-1::-webkit-scrollbar-thumb {
  background: red; 
}

.scrollbar-2::-webkit-scrollbar {
  background: yellow;
}
 
.scrollbar-2::-webkit-scrollbar-thumb {
  background: blue; 
}

/* Common styling for all scrollbars */

::-webkit-scrollbar {
  width: 12px;
  border-radius: 12px;
}

::-webkit-scrollbar-thumb {
  border-radius: 12px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.5); 
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0,0,0,.5); 
  border-radius: 12px;
}

<div class="scrollbar-1">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a risus arcu. Ut tempor laoreet turpis. Curabitur facilisis faucibus massa sit amet imperdiet. Fusce vestibulum sodales egestas. Donec mattis fringilla ante non euismod. Donec ullamcorper odio at ligula maximus ullamcorper.
</div>

<div class="scrollbar-2">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a risus arcu. Ut tempor laoreet turpis. Curabitur facilisis faucibus massa sit amet imperdiet. Fusce vestibulum sodales egestas. Donec mattis fringilla ante non euismod. Donec ullamcorper odio at ligula maximus ullamcorper.
</div>

但是，您不能向表格元素添加滚动条。解决方案可能是将表格包装在 div 中并将滚动条样式应用于所述 div，或将样式应用于 tbody 元素。

HTML：

<div class="scrollbar">
    <table>
        ...
    </table>
</div>

CSS：

.scrollbar::-webkit-scrollbar { ... }

或 HTML：

<table class="table-scrollbar">
    <tbody>
        ...
    </tbody>
</table>

CSS：

.table-scrollbar tbody::-webkit-scrollbar { ... }

【讨论】：

感谢您的建议，但它仍然无法正常工作...我不知道 DataTable 有什么问题...我尝试过使用 E[foo^="bar"] 类型选择器但仍然不起作用...我毁了
这是一个猜测，因为除了实际的滚动条之外，您还没有发布任何代码：除了滚动条样式，您还需要确保元素指定了 height，以及overflow 设置为自动或滚动。会这样吗？
我在样式表中指定了这个：#tableId { z-index: 20;表格布局：固定；溢出：隐藏；文本溢出：省略号；空白：nowrap；断词：打破一切；字体大小：11px；垂直对齐：中间； }
在
好吧，overflow: hidden; 实际上隐藏滚动条。您要查找而不是隐藏的值是 auto 或 scroll。另外，请记住指定高度，否则内容不会溢出。如前所述，您需要将此样式应用于容器 div 或 tbody 元素，而不是 table 元素。

【解决方案3】：

DataTables 在 tbody 中使用 dataTables_scrollBody 类，因此您可以像这样设置样式：

<style type="text/css">
.dataTables_scrollBody::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.dataTables_scrollBody::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background-color: #777;
    border-radius: 10px;
}

【讨论】：