Почему мой индикатор выполнения прокрутки начинается не слева, а посередине? (Реагировать) (Изображение прилагается)

Question

Изображение

Проблема в том, что индикатор выполнения прокрутки не go слева направо. Вместо этого он посередине и идет в обе стороны, что некрасиво. Как это исправить? Я попробовал тот же код в онлайн-редакторах кода, и это нормально. Что-то не так с моим 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;

Answer 1

Я добавил 'margin: 0' к progressContainerStyle и progressBarStyle, и теперь это чудесным образом работает!