JavaFX 8自定义ScrollBar样式问题：如何调整至目标效果？

It looks like your current CSS is on the right track, but there are a few common JavaFX scrollbar styling pitfalls that might be throwing off your desired look. Let's adjust the code to address specificity issues, hidden default styles, and missing interactive states:

/* Ensure the viewport behind the scrollbar is transparent */
.workspace-grid .viewport {
    -fx-background-color: transparent;
}

/* Track styling - clean up transparency and add subtle padding */
.workspace-grid .scroll-bar:horizontal .track,
.workspace-grid .scroll-bar:vertical .track {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-background-radius: 0em;
    -fx-border-radius: 2em;
    -fx-padding: 2px; /* Gives the thumb breathing room */
}

/* Fully hide increment/decrement buttons */
.workspace-grid .scroll-bar:horizontal .increment-button,
.workspace-grid .scroll-bar:horizontal .decrement-button,
.workspace-grid .scroll-bar:vertical .increment-button,
.workspace-grid .scroll-bar:vertical .decrement-button {
    -fx-background-color: transparent;
    -fx-background-radius: 0em;
    -fx-padding: 0;
    -fx-min-width: 0; /* Force buttons to collapse */
    -fx-min-height: 0;
}

/* Remove arrow icons entirely */
.workspace-grid .scroll-bar .increment-arrow,
.workspace-grid .scroll-bar .decrement-arrow {
    -fx-shape: "";
    -fx-padding: 0;
}

/* Thumb styling with consistent sizing and interactive states */
.workspace-grid .scroll-bar:horizontal .thumb,
.workspace-grid .scroll-bar:vertical .thumb {
    -fx-background-color: derive(black, 90%); /* Light gray thumb */
    -fx-background-insets: 2, 0, 0;
    -fx-background-radius: 2em;
    -fx-min-width: 10px; /* Ensure vertical thumb doesn't get too thin */
    -fx-min-height: 10px; /* Ensure horizontal thumb doesn't get too short */
}

/* Hover state for better user feedback */
.workspace-grid .scroll-bar:horizontal .thumb:hover,
.workspace-grid .scroll-bar:vertical .thumb:hover {
    -fx-background-color: derive(black, 70%); /* Darken on hover */
}

/* Pressed state for active interaction */
.workspace-grid .scroll-bar:horizontal .thumb:pressed,
.workspace-grid .scroll-bar:vertical .thumb:pressed {
    -fx-background-color: derive(black, 50%); /* Darken more when clicked */
}

Key Fixes Explained: #

• Viewport Transparency: The default viewport might have a background color that shows through your transparent track—adding this rule fixes that.
• Button Removal: Your original padding left visible space for the buttons; setting min-width/min-height to 0 ensures they're completely hidden.
• Consistent Thumb Size: Without minimum dimensions, the thumb can shrink to almost invisible when content is small—this keeps it usable.
• Interactive States: Adding hover/pressed states makes the scrollbar feel responsive, which is a common user expectation.

If you're aiming for a specific look (like a darker thumb, wider track, etc.), just tweak the color values or padding/sizing properties to match your target style.

内容的提问来源于stack exchange，提问作者Saurabh Kumar