Блог

Главная - Вопросы по программированию - Гладкая полоса прокрутки — что выполняет событие прокрутки?

Гладкая полоса прокрутки — что выполняет событие прокрутки?

#javascript #jquery #css #reactjs

Вопрос:

Я реализовал плавную полосу прокрутки на своей странице, и она работает довольно хорошо, но я также хочу добавить некоторый эффект перехода в содержимое прокрутки. В принципе, я хотел сделать это на событии прокрутки, но я не знаю, как работает гладкая полоса прокрутки и какой объект выполняется при событии прокрутки. Я проверил, что #моя полоса прокрутки этого не делает:

 $("#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(${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;

Приложение.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

Комментарии:

1. По-прежнему ничего не отображается в консоли браузера.

2. Вы пробовали прокрутить страницу вниз? Если скроллер не отображается, это означает, что содержимое вашего документа меньше, чем в окне просмотра. Добавьте больше контента на страницу, чтобы сделать ее прокручиваемой. Я проверил, прежде чем ответить на ваш вопрос.

3. У меня достаточно контента, чтобы сделать его прокручиваемым. Появится полоса прокрутки, и, как я уже говорил, плавная прокрутка работает довольно хорошо. Я предполагаю, что это происходит потому, что прокрутка по умолчанию перезаписывается другим объектом, который выполняет прокрутку, чем $(window) или $("my-scrollbar") , но я не знаю, что вызывает прокрутку и как ее проверить.

4. Установите фиксированную высоту для div «моя полоса прокрутки» и установите CSS «переполнение: прокрутка».

5. Вам нужно было зарегистрировать объект события прокрутки, и это решение, на которое я ответил. Попробуйте это с помощью $(документ), если вы хотите это проверить.

Метки: