滚动到右侧的进度条- React - e-commerce product行

Question

我正在尝试制作一个进度条，当用户向右滚动到一个示例电子商务站点的一行产品时，它就会启动。我已经得到了一些类型错误，我已经做了调整，但我现在仍然得到错误"TypeError:无法读取属性'addEventListener‘的null“的第12行。

请有人提供帮助，这样它就可以工作了吗？(仅供参考，这段代码仍然有点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

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

​

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;

​

Answer 2

querySelector的语法不正确。尝试在此处添加.前缀，因为您是按类选择的：

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

作为将来的参考，MDN的文档关于为不同类型的ID/选择器/标签编写查询选择器

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