I've successfully integrated Smooth scrollbar on my website and it's working great. However, I'm now looking to enhance the scrolling experience with some transition effects in the content as it scrolls. My initial idea was to trigger these effects on a scroll event, but since I'm not sure how Smooth scrollbar operates and which object executes on such an event, I attempted the following code without success:
$("#my-scrollbar").on("scroll", function () {
console.log("scroll"); //not working
});
What triggers the scroll event in this case? Is there an alternative method to incorporate additional effects without solely relying on the scroll event?
UPDATE: Let me provide more context by sharing my code (which utilizes React.js).
index.html
<!DOCTYPE html>
<html>
<head>
<title>Implementing Smooth Scrollbar with Parallax Effects</title>
</head>
<body>
<noscript>Please enable JavaScript to view this site.</noscript>
<div id="my-scrollbar">
<div id="root"></div>
</div>
</body>
</html>
index.js
import React from "react";
import ReactDOM from "react-dom";
import "./website/App.css";
import App from "./website/App";
import Scrollbar from "smooth-scrollbar";
Scrollbar.init(document.querySelector("#my-scrollbar"));
ReactDOM.render(<App/>, document.getElementById("root"));
App.js
import React, { Fragment, Component } from "react";
import $ from "jquery";
class App extends Component {
componentDidMount() {
$(document).on("scroll", function (e) {
console.log(e);
});
const h1posX = 64;
const h1posY = 64;
$("#section2 h1").css({ transform: `translate(${h1posX}px,${h1posY}px)` });
window.addEventListener("scroll", function () {
const distance = window.scrollY;
console.log(distance);
if (distance <= $("#section1").outerHeight() / 2) document.querySelector(".container2").style.transform = `translateY(${distance * 1.15}px)`;
$("#box2").css({ transfrom: `translateY(${distance}px)` });
$("#section2 h1").css({ transform: `translate(${distance * 0.15}px,${h1posY}px)` });
});
}
render() {
return (
<Fragment>
<main>
<header>
<div className="container2">
<h3>Hello world!</h3>
<p>Scroll to see smooth scrolling</p>
</div>
</header>
<div id="section1">
<h3>Lorem ipsum</h3>
</div>
<div id="section2">
<h1>Dolor sit amet</h1>
</div>
</main>
</Fragment>
);
}
}
export default App;
App.css
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
height: 100vh;
color: #eee;
z-index: -1;
text-align: center;
background: linear-gradient(135deg, #0056a7, #165fa3, #477aaa);
animation: fadeIn 1.5s ease-in-out;
}
#section1 {
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
height: 100vh;
font-size: 5rem;
background: transparentize(#47aa79, 0);
}
#section2 {
display: flex;
z-index: 2;
height: 100vh;
font-size: 9rem;
font-weight: bold;
background: #477aaa;
color: #eee;
h1 {
position: absolute;
transition: all 0.1s linear;
}
}