Question

我正在使用bootstrap 4，我知道是否有办法改变滚动条样式。我刚尝试使用webkit模式，但是没有用。

Answer 1

以下代码适用于webkit

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

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

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

Answer 2

上面的Bhoots代码有效，但我为拇指添加了背景颜色，因为我使用的是深色背景。他提供的链接已被劫持广告。

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

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

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color:#fff;
    -webkit-box-shadow: inset 0 0 6px rgba(90,90,90,0.7);
}

Answer 3

如果您尝试使用任何div或元素进行滚动条自定义，请按如下所示在CSS中分配和使用元素ID，

f <- function(x, a, b, c, d, k, u) {
  a * (x^b) + k * log(1 + (x^c))+ log(1 - (u^(1/d)))
}

res <- uniroot(f, interval = c(0, 1), u=0.1,c=0.8,k=1.2,d=1.5,a=0.9,b=1)
res
#> $root
#> [1] 0.08930995
#> 
#> $f.root
#> [1] 1.234389e-06
#> 
#> $iter
#> [1] 5
#> 
#> $init.it
#> [1] NA
#> 
#> $estim.prec
#> [1] 6.103516e-05

# Check solution
f(res$root, u=0.1,c=0.8,k=1.2,d=1.5,a=0.9,b=1)
#> [1] 1.234389e-06

# Plot
x <- seq(0, .1, length.out = 100)
plot(x, f(x, u=0.1,c=0.8,k=1.2,d=1.5,a=0.9,b=1))

以上方法对我有用，即使在我尝试如下操作时也无效，

<div class="cardsContainer" id="cards-container">

#cards-container::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
}


#cards-container::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(104, 140, 240, 0.3);
  }

#cards-container::-webkit-scrollbar-thumb {
    background-color: lightblue;
    outline: 1px solid slategrey;
}

如何更改引导程序中的滚动条样式？

3 个答案: