JavaFX 2 WebView：如何增強滾動條

我已經使用JavaFX WebView實現了一個日誌查看器。JavaFX 2 WebView：如何增強滾動條

但是，對於該日誌查看器的用戶來說存在一個大問題：web查看器的滾動條非常薄。我甚至有一個問題（在Windows 7/XP上，奇怪的是不是在Windows 8上），當單擊滾動滑塊時，它會「跳」出去，並不總是很容易捕捉到該滑塊，有時滾動不起作用。

我花了一些努力和研究，發現我可以用CSS更改滾動條。不過，我有一些問題，無論是自動滾動不再工作，或者我有一些「拖影」效果和滾動條沒有正確地畫。

也許有人找到了另一個解決方案 - 我將在下面介紹我的解決方案。

來源

2013-03-14 michael_s

我的解決方案使用CSS來更改webkit滾動條。有關介紹，請參閱 CSS Tricks 。

有要考慮的一些要點：

第一：當在JavaScript中使用position: absolute;滾動 - 像window.scrollTo將不再工作。

二：的background-color屬性爲scrollbar-track是強制性的。當被排除（而不是使用絕對定位）時，滾動條的重畫功能不再起作用。這似乎是webkit中的一個錯誤。

body { 
     /* hide the horizontal scrollbar */ 
     overflow-x: hidden; 
    } 
    /* make the scrollbar a little wider */ 
    ::-webkit-scrollbar { 
     width: 16px; 
    } 
    ::-webkit-scrollbar-track { 
     background-color: white; 
    } 
    /* the slider or "thumb" has some rounded edges and a shadow and it's a little translucent */ 
    ::-webkit-scrollbar-thumb { 
     border-radius: 6px; 
     box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
     background: rgba(159,216,239,0.8); 
    } 
    /* I don't like the scrollbar to be so tiny on large documents - hence I set a minimum height */ 
    ::-webkit-scrollbar-thumb:vertical { 
     min-height: 100px; 
    } 
    /* Use a more translucent slider when the window is inactive */ 
    ::-webkit-scrollbar-thumb:window-inactive { 
     background: rgba(159,216,239,0.2); 
    }

當在由WebEngine使用的HTML內容的<style>標籤使用這個CSS滾動條是新的閃亮光澤的藍色和更廣泛的滾動條。這也解決了Win7/XP上滾動條「跳過」的問題。

要更改水平滾動條 - 必須提供webkit-scrollbar中的高度屬性，並且可以提供...-scrollbar-thumb:vertical中的min-width屬性。

來源

2013-03-14 19:37:48

嘿邁克爾！這個CSS的哪個部分正在修復被描述爲「捕獲該滑塊並不總是容易，並且有時滾動不起作用」的部分？ – 2013-10-25 07:31:43

似乎他們修復了最近JavaFX中的「跳出」問題，或者我無法重現它。不過，默認情況下，滾動條仍然很小，我認爲它們看起來不太好，所以我繼續使用CSS解決方案。 – 2013-10-28 12:21:31

我自己發現，如果您使用webkit CSS設計您的滾動條，問題就消失了。我認爲，JavaFx將自定義渲染切換到用戶定義的樣式表，並擺脫了這個問題。 – 2013-10-28 12:57:47

JavaFX 2 WebView：如何增強滾動條

回答

相關問題