向右滚动的进度条 - React - 电子商务产品行

Question

我正在尝试制作一个进度条，该进度条在用户向右滚动以获取示例电子商务网站的一行产品时启动。我已经收到一些类型错误，我已经对其进行了调整，但我现在仍然收到错误 “类型错误：无法读取第 12 行的属性 'addEventListener'”。

有人可以提供帮助吗？（请原谅这段代码，仍然是一个 React 新手）。谢谢！

import React from 'react';
import { taskData } from "./cdg-data";
import ProgressBar from './progress';

class CDG extends React.Component {
  state = {
    scrollPosition: 0
  }

  listenToScrollEvent = () => {
    const element = document.querySelector("CDG");
    element.addEventListener("scroll", () => {
      requestAnimationFrame(() => {
        element.calculateScrollDistance();
      });
    });
  }
  
  calculateScrollDistance = () => {
    const element = document.querySelector("CDG");
    const pixels = element.scrollLeft; // CURRENT number of pixels scrolled by the user

    const elementWidth = element.clientWidth; // width of just the element (no scrolling)
    const fullElementWidth = element.scrollWidth; // full total distance of the element (with scrolling)
  
    const totalScrollableDistance = fullElementWidth - elementWidth;
    const scrollPosition = Math.floor(pixels / totalScrollableDistance * 100) // gets the percentage that the user has scrolled
    
    element.setState({
      scrollPosition,
    })
  }

  componentDidMount() {
    this.listenToScrollEvent();
  }

  render() {
    return(
      <div>
    <h2 className="cdg-title">THE COLLECTION</h2>
      <div className="CDG">
        {taskData.map(item => {
          return (
            <div className="image-container">
              <a href={item.url} target="_blank" rel="noreferrer">
              <p className="title">{item.title}</p>
              <p className="price">{item.price}</p>
              </a>
                <img className="cdg-image" 
                  src={item.image} 
                  alt="Converse"
                />
            </div>
          );
        })}
      </div>
      <div className="Progress">
        <ProgressBar scroll={this.state.scrollPosition + '%'}/>
      </div>
      </div>
    );
  }
}



export default CDG;

Answer 1

querySelector 的语法不正确。尝试在此处使用 . 作为前缀，因为您选择的是 class:

const element = document.querySelector('.CDG')

为了将来参考，MDN 关于为不同类型的 ID/selectors/tags

编写查询选择器的文档

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Answer 2

如果有人需要，这是最终的正确解决方案：

import React from 'react';
import { taskData } from "./cdg-data";
import ProgressBar from './progress';

class CDG extends React.Component {
  state = {
    scrollPosition: 0
  }

  listenToScrollEvent = () => {
    const element = document.querySelector(".CDG");
    element.addEventListener("scroll", () => {
      requestAnimationFrame(() => {
        this.calculateScrollDistance();
      });
    });
  }
  
  calculateScrollDistance = () => {
    const element = document.querySelector(".CDG");
    const pixels = element.scrollLeft; // CURRENT number of pixels scrolled by the user

    const elementWidth = element.clientWidth; // width of just the element (no scrolling)
    const fullElementWidth = element.scrollWidth; // full total distance of the element (with scrolling)
  
    const totalScrollableDistance = fullElementWidth - elementWidth;
    const scrollPosition = Math.floor(pixels / totalScrollableDistance * 100) // gets the percentage that the user has scrolled
    
    this.setState({
      scrollPosition,
    })
  }

  componentDidMount() {
    this.listenToScrollEvent();
  }

  render() {
    return(
      <div>
    <h2 className="cdg-title">THE COLLECTION</h2>
      <div className="CDG">
        {taskData.map(item => {
          return (
            <div className="image-container">
              <a href={item.url} target="_blank" rel="noreferrer">
              <p className="title">{item.title}</p>
              <p className="price">{item.price}</p>
              </a>
                <img className="cdg-image" 
                  src={item.image} 
                  alt="Converse"
                />
            </div>
          );
        })}
      </div>
      <div className="Progress">
        <ProgressBar scroll={this.state.scrollPosition + '%'}/>
      </div>
      </div>
    );
  }
}



export default CDG;

import React from 'react';

const ProgressBar = (props) => {
    const { scroll } = props;

    const containerStyles = {
        height: 5,
        width: '33%',
        backgroundColor: '#939191',
        margin: '0 auto 50px',
    }

    const fillerStyles = {
        height: '100%',
        width: `${scroll}`, // dependent on JavaScript scroll, not the percentage completed as in the example
        backgroundColor: '#A50209',
        textAlign: 'center'
    }
    return (
        <div style={containerStyles}>
            <div style={fillerStyles}>
            </div>
        </div>
    );
};


export default ProgressBar;

向右滚动的进度条 - React - 电子商务产品行

Progress bar on scroll to the right - React - e-commerce product row

scroll

e-commerce

progress-bar

reactjs