Add a "visible on hover" toggle for scroll functionality

Feature requests
1

Hi,

Would be nice as the title states, if it was possible to only show scroll on hover, like you have in your components menu in create :slight_smile:

image
image1902×761 122 KB

I am designing a view where the scroll needs to be in the middle of the page, and it is relatively eye catching.

Regards
Sondre

2

Hi Sondre,

Thank you for the feature request. I have created a feature request challenge for this topic :grinning:

Could a possible solution be to style the scrollbar through a run code action node?

It’s possible to style scrollbars for a specific container using its element ID.

let css = `#scroller::-webkit-scrollbar {
  width: 0px; 

}

#scroller::-webkit-scrollbar-track {
  background-color: transparent;
  width: 0px; 
  higth: 0px;
}

#scroller::-webkit-scrollbar-thumb {
  background-color: #113349;
  background-clip: content-box;
}

#scroller::-webkit-scrollbar-thumb:hover {
  background-color: #113349;
}`



let head = document.head || document.getElementsByTagName('head')[0]
let style = document.createElement('style')

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

resolve()

Place this code in a run-code block and make sure the scrollable container has the element ID set to “scroller” (or any other ID, as long as it matches the code).

This snippet hides the scrollbar by setting its width to zero, but you can tweak it to achieve the look you want. There’s no hover effect or similar behavior included, so you’ll likely need to do some research and testing to make it work smoothly.

You can see an example of this custom scrollbar by downloading the “Breeze” weather app from Farmers Market.

Regards,
//Ulrik

3

Thanks for the tip! I will try it out :slight_smile:

Regards
Sondre