平滑滚动条-什么执行滚动事件？
我已经在我的页面上实现了平滑滚动条，它的工作相当不错，但我也想在滚动内容中添加一些过渡效果。基本上，我想在一个滚动事件上做这件事，但我不知道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;
}
}
共有1个答案
您必须将处理的事件作为参数传递给回调函数并使用它。
$("#my-scrollbar").on("scroll", function(event) {
console.log(event);
});
事件将返回properties对象，您可以使用所需的任何事件属性，如:event.type
下面是一个演示：https://codepen.io/aslami/pen/onbjvpq
-
本文向大家介绍js滚动条平滑移动示例代码，包括了js滚动条平滑移动示例代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js滚动条平滑移动相关代码，供大家参考，具体内容如下 html页 js页 css页 以上就是本文的全部内容，希望对大家的学习有所帮助。
-
问题内容： 有没有一种方法可以使用jQuery向下滚动到锚链接？ 喜欢： ？ 问题答案： 这是我的方法： 然后，您只需要像这样创建锚：
-
问题内容： 我一直在尝试滚动到div id jquery代码以正常工作。基于另一个堆栈溢出问题，我尝试了以下操作 但这没有用。它只是捕捉到div。我也试过 没有进展。 问题答案： 您需要设置动画
-
我的应用程序中的CoordinatorLayout中的平滑滚动有问题。 我试图做到这一点：http://wstaw.org/m/2015/10/02/google-scroll.gif 但我最好的结果是：http://wstaw.org/m/2015/10/02/my-scroll.gif 我做错了什么？提前感谢。
-
我想实现像Google Play App一样的平滑滚动行为。我尝试过这里提到的解决方案： 解决方案1 解决方案2 解决方案3 但所有上述解决方案都没有像在Google Play应用程序中那样给出预期的结果。以下是xml代码: 如何实现平滑滚动？ 编辑:以下是recyclerview适配器 }