平滑滚动条 - 啥执行滚动事件？
Posted
技术标签:
【中文标题】平滑滚动条 - 啥执行滚动事件？【英文标题】：Smooth scrollbar - what executes scroll event?平滑滚动条 - 什么执行滚动事件？ 【发布时间】：2021-07-16 17:21:28 【问题描述】：我已经在我的页面上实现了Smooth 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"));
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($h1posXpx,$h1posYpx)` );
window.addEventListener("scroll", function ()
const distance = window.scrollY;
console.log(distance);
if (distance <= $("#section1").outerHeight() / 2) document.querySelector(".container2").style.transform = `translateY($distance * 1.15px)`;
$("#box2").css( transfrom: `translateY($distancepx)` );
$("#section2 h1").css( transform: `translate($distance * 0.15px,$h1posYpx)` );
);
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;
【问题讨论】：
【参考方案1】：您必须将处理的event 作为参数传递给回调函数并使用它。
$("#my-scrollbar").on("scroll", function(event)
console.log(event);
);
该事件将返回属性对象，您可以使用任何您需要的事件属性，例如：event.type
这是一个演示：https://codepen.io/aslami/pen/oNBJvpq
【讨论】：
浏览器控制台中仍然没有出现任何内容。 您是否尝试向下滚动到页面？如果滚动条没有出现，则意味着您的文档内容小于视口。向页面添加更多内容以使其可滚动。我在回答您的问题之前进行了测试。 我有足够的内容让它可以滚动。出现滚动条，正如我之前所说，平滑滚动效果很好。我想这是因为默认滚动被另一个执行滚动而不是$(window) 或$("my-scrollbar") 的对象覆盖，但我不知道是什么导致滚动以及如何检查它。
为“my-scrollbar” div 设置固定高度并设置 CSS “overflow:scroll”
您需要记录滚动事件对象，这就是我回答的解决方案。如果您想测试它，请尝试使用 $(document)。以上是关于平滑滚动条 - 啥执行滚动事件？的主要内容，如果未能解决你的问题，请参考以下文章