我已经在我的页面上实现了平滑滚动条，它的工作相当不错，但我也想在滚动内容中添加一些过渡效果。基本上，我想在一个滚动事件上做这件事，但我不知道scrollbar的工作有多流畅，以及在滚动事件上执行什么对象。我检查了#my-scrollbar没有执行此操作：
$("#my-scrollbar").on("scroll", function () {
console.log("scroll"); //not working
});
滚动事件的原因是什么？或者有没有其他的方法可以做一些额外的效果而不检查滚动事件？
编辑：我正在粘贴我的代码（我正在使用react.js）来进行更多的解释。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Smooth scrollbar with parallax</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</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"));
应用程序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;
}
}
您必须将处理的事件作为参数传递给回调函数并使用它。
$("#my-scrollbar").on("scroll", function(event) {
console.log(event);
});
事件将返回properties对象，您可以使用所需的任何事件属性，如:event.type
下面是一个演示：https://codepen.io/aslami/pen/onbjvpq
