Website Building » Wix » How Do I Change Scroll Effect in Wix?

How Do I Change Scroll Effect in Wix?

Last updated on January 7, 2023 @ 7:01 pm

There are many ways to change the scroll effect in Wix. You can use the HTML tag, CSS, or JavaScript. In this article, we will show you how to change scroll effect in Wix using HTML, CSS, and JavaScript.

HTML:

GREAT NEWS:

Exciting update! We've collaborated with Wix to offer WBI users with a free plan for all website creation needs - Explore the details here.

The HTML tag is the most basic way to change the scroll effect in Wix. To do this, simply add the following code to your Wix website:

<style>
body {
overflow-y: scroll; /* horizontal scrollbar */
overflow-x: hidden; /* hide vertical scrollbar */
}
</style>

CSS:

If you want more control over the scroll effect, you can use CSS. To do this, add the following code to your Wix website:

<!-- Change Scrollbar Color and Size -->

<style>
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background: #1a1a1a; /* scrollbar color */
}
::-webkit-scrollbar-track:hover {
background:#717171; /* horizontal scrollbar color on mouse over*/
}
</style>

JavaScript:

If you want even more control over the scroll effect, you can use JavaScript. To do this, add the following code to your Wix website:

PRO TIP: If you are not careful, changing the scroll effect in Wix can break your site. Make sure to back up your site before making any changes.
<!-- Change Scroll Effect on Mouseover --><!-- Change Scroll Effect on Mouseover -->
<script>
function changeScroll() {
document.getElementById('id01').style.overflow='auto';  /* auto scroll on mouse over*/    document.getElementById('id02').overflow='hidden'; /* no scroll on mouse out*/
}
</script>

Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.