setElementScrollColors function
Sets element
scroll colors, using standard CSS property scrollbar-color
and webkit pseudo element ::-webkit-scrollbar-thumb
and ::-webkit-scrollbar-track
Implementation
String? setElementScrollColors(
Element element, int scrollWidth, String scrollButtonColor,
[String? scrollBgColor]) {
scrollBgColor ??= '';
scrollButtonColor = scrollButtonColor.trim();
scrollBgColor = scrollBgColor.trim();
if (scrollButtonColor.isEmpty && scrollBgColor.isEmpty) return null;
if (scrollWidth < 0) scrollWidth = 0;
removeElementScrollColors(element);
element.style.setProperty('scrollbar-width', '${scrollWidth}px');
element.style.setProperty(
'scrollbar-color', '$scrollButtonColor $scrollBgColor'.trim());
var regExpNonWord = RegExp(r'\W+');
var buttonColorID = scrollButtonColor.replaceAll(regExpNonWord, '_');
var bgColorID = scrollButtonColor.replaceAll(regExpNonWord, '_');
var scrollColorClassID =
'__scroll_color__${scrollWidth}__${buttonColorID}__$bgColorID';
var webkitScrollColorsCSS =
'.$scrollColorClassID::-webkit-scrollbar { width: ${scrollWidth}px;}\n';
if (scrollButtonColor.isNotEmpty) {
var radius = scrollWidth * 2;
var border = scrollWidth > 1 ? Math.max(1, scrollWidth ~/ 4) : 0;
webkitScrollColorsCSS +=
'.$scrollColorClassID::-webkit-scrollbar-thumb { background-color: $scrollButtonColor ; border-radius: ${radius}px; border: ${border}px solid $scrollBgColor;}\n';
}
if (scrollBgColor.isNotEmpty) {
webkitScrollColorsCSS +=
'.$scrollColorClassID::-webkit-scrollbar-track { background: $scrollBgColor ;}\n';
webkitScrollColorsCSS +=
'.$scrollColorClassID::-webkit-scrollbar-track-piece { background: $scrollBgColor ;}\n';
}
addCSSCode(webkitScrollColorsCSS);
if (!element.classes.contains(scrollColorClassID)) {
element.classes.add(scrollColorClassID);
}
return scrollColorClassID;
}