当前位置: 首页 > 知识库问答 >
问题:

平滑滚动条-什么执行滚动事件?

樊博雅
2023-03-14

我已经在我的页面上实现了平滑滚动条,它的工作相当不错,但我也想在滚动内容中添加一些过渡效果。基本上,我想在一个滚动事件上做这件事,但我不知道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个答案

吕冠宇
2023-03-14

您必须将处理的事件作为参数传递给回调函数并使用它。

$("#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适配器 }