現代網頁設計中，滑動條成為了用戶與網站交互的重要組成部分。其在一定程度上可以增強用戶體驗，提高網站的易用性。在網站設計中，我們通常可以通過CSS樣式來修改滑動條的樣式，但是在一些情況下，我們會發現無法更改滑動條，下面就讓我們來探究一下原因。

::-webkit-scrollbar{
width: 10px;
background-color: #ddd;
}
::-webkit-scrollbar-thumb{
background-color: #333;
border-radius: 5px;
}

首先，我們需要了解一下瀏覽器的滑動條樣式是由瀏覽器內部樣式表渲染出來的，而非CSS樣式表所能控制的。因此，如果我們要修改滑動條的樣式，必須通過瀏覽器所提供的特定屬性來實現。

那么，我們該如何修改滑動條樣式呢？目前來說，Webkit內核的瀏覽器（如Chrome、Safari）提供了一些特定的CSS屬性，例如 “::-webkit-scrollbar” 和 “::-webkit-scrollbar-thumb” 等，能夠幫助我們修改滑動條的樣式。但是，如果你使用非Webkit內核的瀏覽器（如IE、Firefox）就會發現這些樣式無法生效。

那么有沒有其他的解決方法呢？答案是肯定的，我們可以使用JavaScript來實現滑動條樣式的修改。

document.querySelector('.scroll-bar').addEventListener('scroll',function(e){
var bar = e.target;
var thumb = bar.querySelector('.thumb');
thumb.style.left = (bar.scrollLeft * 100 / bar.scrollWidth) + '%';
});

通過JavaScript監聽滾動容器的滾動事件，然后修改對應滑動塊的位置，就可以實現滑動條樣式的修改了。

不過需要注意的是，使用JavaScript實現滑動條樣式的修改，可能會在一定程度上降低網頁的響應速度，所以在實際應用中，需要謹慎考慮。