Question

如何使用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;

但是这种样式改变了整个项目中整个数据表的滚动条。我已经尝试过课，但仍然没有工作。

请帮忙

Answer 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); 
}

Answer 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 { ... }

Answer 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;
}

数据表上的滚动条样式

3 个答案: