Scrollbars design and hide

Tips
1

I had searched through the forum for some answers and found a few threads that helped get things rolling. I then went through websites I found online on the topic and found some helpful sites. I will link to them as well as an editor where I put together different pages showcasing different approaches that could be taken.

As a fair warning, I do not have any real coding experience and therefore my not being doing things the best way, nor do I have all the answers to the questions that got me started down this wormhole.

These links give some ideas on the styling involved in a custom scrollbar.

https://www.w3schools.com/cssref/pr_pos_overflow.asp

I am not 100% sure how to implement these ideas onto one specific repeating group or group using ID attributes and would love some input from others who are more familiar with coding that may provide examples of how to target a specific group without affecting the pages’ scrollbar.

Here is the link to my editor

Go to this page

00%20PM

In workflows, check out the page load. It has the following set up

14%20PM
14%20PM946Ă—458 58.8 KB

The background color, border-radius and other aspects can be changed to design the scroll bar as you see fit. This particular one is pretty slim with red bar and black background. If you were to have this

Note that the scrollbar design of the repeating group on the page is the same…I didn’t attempt to set the repeating group to have its own style or to be styled. I assume this is because things point to “web-kit scrollbar” — and I don’t really know what the webkit part is.

I have another page: this one: Which uses javascript instead of CSS to target the scrollbar.

21%20PM

In workflows, which needs to run the plugin “Toolbox” ( thanks @mishav )

07%20PM
07%20PM769Ă—464 50 KB

What you will see is that the group1 will have a scrollbar now as well as the repeating group and the page…What I am unable to figure out as of yet ( and would assuredly update the post if I find out) is how to use the javascript to design the scrollbar.

This is because the scrollbar is “created” by the javascript and I assume could be targeted without affecting the page scrollbar or the repeating group scrollbar.

Finally the last page with combination of the two approaches gets what you might imagine (NO, not an error) but instead it has a custom scrollbar in the group element.

04%20PM
04%20PM870Ă—471 35.2 KB

I am really hoping others find this helpful as it seems to solve some problems for people who are looking to hide the scrollbars…what I have found is the “CSS overflow property : hidden” just hides the scroll but also renders it unusable, so not just invisible. I would use the design to “hide” it with colors to blend in with background of the group.

Also, I would love some seasoned bubblers or coders to chime in with ideas of how to target a specific group. What I am lost on is applying the ID attribute to the CSS so that the pages scrollbar remains unaffected and only the repeating group or group’s scrollbar will have the custom design features.

Any help would be appreciated.

9 Likes
2

Nice article, you can target a specific group by using its id

#bubble-element {
overflow: hidden;
}

You may need to set an !important condition here as bubble tends to overwrite it (Be Careful with !important and only use it as a last resort)

#bubble-element {
overflow: hidden !important;
}

If there is demand in this I can include it in my new plugin here

3 Likes
3

Thanks @AliFarahat

I think adding that to the plugin would be very helpful as it seems to be an issue a lot of people have and has been popping up in the forums since 2016.

I do have a question though about your implementation with the above mentioned code

How would you implement it? Would it use an html element on the page, would it be in the page header, or in a CSS or Javascript workflow as in my examples?

I am really lost on this stuff and getting a better idea of how to write up the code for bubble has been a nightmare for me as I have no coding experience. Would it be possible to show a complete screen shot of the code being implemented?

Also, from what I have played around with here:

https://www.w3schools.com/cssref/pr_pos_overflow.asp

it seems that the overflow:hidden would make it so that the scroll doesn’t work, albeit it does “hide” the scrollbar, it seems like it really just removes its functionality all together.

From what I have found in my novice attempts is that the CSS approach which is using the ::webkit-scrollbar is capable of designing the scrollbars so that you could essentially hide them by utilizing the width or color aspects to make it nearly invisible while still maintaining functionality of the scroll; however as mentioned I can’t find a way to target a specific group using the webkit-scrollbar and don’t see online anywhere an ability to design the “overflow” attribute, therefore not able to target the specific.

Cheers

**** This is an edit

I have searched more online and come to the conclusion that designing a scroll bar for a specific element is not possible. Not because of bubble but because of browser compatibility.

Seems that using a method from this site

only works on firefox and so would be useless. The :webkit approach seems to be the only way to effectively design your own custom scrollbar that is supported by multiple browsers and seems to cause no problems in bubble. The problem as noted previously is that the :webkit approach doesn’t allow for the designation of one particular group element, but instead changes all scrollbars on the page.

This would mean it could be effective for pages that do not need a visible scroll on page. I was attempting to create a chat app that had a group containing the R.G. of messages with an invisible scroll but wanted it to live on a page that had scroll bar visible as content on page below the chat window.

Thats my conclusion, unless somebody has figured this out.

4

I will probably just use a library to be honest. Would be better than trying to reinvent the wheel on this. It would be an element that you need to Target with element if attribute

Let me see what I can fit in my schedule this weekend and will let you know.

4 Likes
6

But webkit won’t work in FF. There are, however, updated FF styling rules for scrollbars. Check it out!

2 Likes
7

@AliFarahat Would be cool to have scrolling that snaps to row too

1 Like
11

Hi Boston! Thanks for all the great posts!

Just wondering, have you found the solution to this yet?

12

I haven’t really bothered to get bogged down on the subject and just left it at the fact that on firefox it doesn’t work.

13

@hafidz @boston85719 this works on ff

#elementid{
  scrollbar-color: #grey #fff;
  scrollbar-width: thin;    
}
5 Likes
14

You’re Awesome Duke!

15

Working!

#elementID::-webkit-scrollbar { 
    display: none; 
}
5 Likes
16

I will have to try that out on firefox.

I’ve been using this for firefox which is doing the trick

<style>    
:root{
      scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important;
      scrollbar-width: thin !important;
}
</style>
2 Likes
17

Hey guys! I took it a bit further and created a youtube video concerning the issue of hiding unwanted scrollbars.

Feel free to check it out!

Cheers, Luke

13 Likes
18

Solution man!!! thank you very much.
VERY BIG LIKE

19

Amazing, Luke. Brilliant solution.

20

You are the man!