How to Remove Vertical Scroll Bar on Wix Studio Websites?

Ask the community
, ,
1

Is it possible to remove the vertical scroll bar on Wix Studio-produced websites? My current Wix Studio website has a white vertical scroll bar on the right side that breaks full-width images and is distracting. This is especially the case for darker photos, videos, or dark themed websites. Thanks!

2

This will work adding to custom code to Body - end

<style>
::-webkit-scrollbar{
display:none;
}
</style>
3

Thanks for the response and link! I have used this custom CSS code successfully to remove the vertical scroll bar from my Wix “Classic” websites since 2021. But can I also do this in Wix Studio websites? Right now, I cannot even see the CSS code tab on my Wix Studio site.

No CSS Code Option
No CSS Code Option923×1170 67 KB

4

you access the custom code from the site dashboard

Screenshot 2024-05-10 113550
Screenshot 2024-05-10 113550723×852 48.1 KB

5

Thanks Dan! The layout is a little different in Wix Studio. But I was able to navigate to the CSS code window via this Settings>Advanced>Custom Code method. Was able to enter the custom code and now my vertical scroll bars are gone!

6

Hey! just wanted to solve this issue, but haven’t found the way to do it. I’m working with VS Code, I can only add the class via “customClassList.add” as I can’t access to the page’s HTML.

I’ve used ChatGPT to find the way to reference to the “Body”, but he has struggled to find a solution. He proposed the following code… but doesn’t work.

CSS

.hide-scrollbar {
    overflow-y: auto !important;
}

Javascript


$w('Document').html.body.customClassList.add('hide-scrollbar');

The error: “Property ‘html’ does not exist on type ‘Document’.ts”

I’ve tryed also $w("#page1").customClassList.add("hide-scrollbar");, but doesn’t work.

Any suggestion?
Thanks in advance

7

Is there other way ? For me it says that I have to connect to a domain first to be able to access custom code