css如何改变进度条的样式

html-css019

css如何改变进度条的样式,第1张

css如何改变进度条的样式有两步。

1、通过webkitscrollbar属性设置滚动条整体部分。

2、通过webkitscrollbarbutton属性设置滚动条两端的按钮。

之前一直以为,单纯的dom元素很难实现有锐角的的形状,

非锐角的可以通过多个元素进行拼接即可.

实际上答案早就是已知的.

我们知道通过border可以弄出一个三角形.

也就是说,通过border我们可以比较容易弄出锐角.

这次要实现的目标是类似这种,纵向滚动时表头固定,横向滚动时,表头跟着滚动

最基础的思路就是表头和内容是用两个表格来显示(图来自 https://zhuanlan.zhihu.com/p/33280304 ),关于怎么保存表头和内容列宽一致链接里这个文章里也有写就不另外说了。

纵向滚动是挺好实现的,我开始是在内容的表格外面套了一个div,之后设置 overflow-y:auto 就实现纵向滚动了。

但横向滚动呢?

首先想到的方案是在最外面的div,outer加上 overflow-x:auto

虽然这样横纵都能滚动了,但是横向滚动的时候纵向滚动条也被滚走了。

然后想到了是用js来同步,可以是可以的,但是还是想挣扎一下。

之后想到了fixed,发现如果表头设置为fixed无论横向滚动还是都会被固定在原地。

最后突然想到一个position的新属性,sticky

设置了 position: sticky ,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果( https://www.cnblogs.com/s1nker/p/4835079.html )。

所以最后设置了表头

css:

就成功实现了想要的效果了。

不过sticky的兼容性也是要考虑一下的。