javascript - 为什么我的滚动进度条不是从左侧开始，而是从中间开始？（反应）（附图片）

Question

图片

问题是滚动进度条不会从左到右。反而是在中间，往两边走，很丑。如何解决这个问题？我在在线代码编辑器上尝试了相同的代码，这很正常。我的 VSCode 有问题吗？

代码：

import React from 'react';

class Progress extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            scrolled: 0,
        };
    }

    componentDidMount() {
        window.addEventListener('scroll', this.scrollProgress);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.scrollProgress);
    }

    scrollProgress = () => {
        const scrollPx = document.body.scrollTop || document.documentElement.scrollTop;
        const winHeightPx = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        const scrolled = `${(scrollPx / winHeightPx) * 100}%`;

        this.setState({
            scrolled: scrolled,
        });
    };

    render() {
        const progressContainerStyle = {
            background: 'transparent',
            height: '15px',
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100vw',
            zIndex: 100,
        };

        const progressBarStyle = {
            height: '15px',
            backgroundImage: 'linear-gradient(-90deg, #6098df, #b581b0)',
            width: this.state.scrolled,
        };

        return (
            <div className="progress-container" style={progressContainerStyle}>
                <div className="progress-bar" style={progressBarStyle} />
            </div>
        );
    }
}

export default Progress;

标签： javascripthtmlcssreactjs

Answer 1

我添加'margin: 0'了两者progressContainerStyle，progressBarStyle现在它奇迹般地起作用了！