为什么在滚动我的进度条时在窗口滚动而不是在我的 div reactjs 上移动？

Question

这是我的代码。 我的进度条工作正常。它在窗口滚动上显示可移动的进度条。但我希望它在我滚动 div 时移动。 这里我使用的是js查询。

在componentWillmount中写jquery函数也可以吗。

export default class NewPreview extends React.Component {
    constructor(props) {
        super(props);
        self = this;
        this.scrollPercent=''
        this.xmlType=''
        this.d=''
        this.c=''
        this.state = {
        }
    }

  
    componentWillMount() {
      $(window).scroll(function () {
        console.log("h")
            var s = $(window).scrollTop()
                  this.d = $(document).height()
                  this.c = $(window).height()
                this.scrollPercent = (s / (d-c)) * 100;
                  var position = scrollPercent;
          
             $("#progressbar").attr('value', position);
          
          });
        
    }


    render() {
        const panel_body = {
            borderLeft: "3px solid #00BCD4",
            height: "90px",
            backgroundColor:"lightyellow",
            borderRadius:"4px",
            margin:"6px"
        }
        const progress ={
            width:"40%",
              position:"fixed",
              top:"103px",
              backgroundColor:"red"
          }
        const panel_XML = {
            color: "#00BCD4",
            fontSize: "17px",
            position: "relative",
            left: "12px",
            top: "10px"
        }
        if(this.xmlType='slideshow'){
            return (
                <div id="progressBarID">
                    <progress style={progress} id="progressbar" value="0" max="100"></progress>
                    {this.state.newXML.map((data,item)=>
                        <div class="panel panel-default" style={panel_body}>
                            <p style={panel_XML}>{data.header}</p>
                            <p style={panel_XML}>{data.article}</p>
                        </div>
                    )}
                </div>
            )
        }
        else if(this.xmlType='timeline') {
            return(
                <div>heloo</div>
            )
        }
    }

}

我应该怎么做才能在我的 div 滚动而不是我的窗口滚动上移动我的进度条。

Answer 1

您非常接近，但您应该将百分比放入状态，以便组件重新渲染（也更改为componentDidMount）：

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

componentWillUnmount() {
  // remove scroll listener
  window.removeEventListener('scroll', this.onScrollHandler);
}

// it's good to extract the scroll handler into a function
onScrollHandler = () => {
  const s = $(window).scrollTop();
  const d = $(document).height();
  const c = $(window).height();
  const scrollPercent = (s / (d - c)) * 100;
  this.setState({
    scrollPercent
  });
}

然后根据状态改变css宽度：

const progress = {
  width: `${this.state.scrollPercent}%`,
  ...

如果您在应用程序的其他地方需要它，可以使用 jquery，但如果您只是想添加一个滚动侦听器，您可以摆脱它。 我更新了代码以删除 jquery，因为这里并不真正需要它。

---

查看演示：

class NewPreview extends React.Component {
    constructor(props) {
        super(props);
        this.scrollPercent = 0;
        this.xmlType='slideshow'
        this.d=''
        this.c=''
        this.state = {
          newXML: []
        }
    }

    componentDidMount() {
      window.addEventListener('scroll', this.onScrollHandler);
    }
    
    componentWillUnmount() {
      // remove scroll listener
      window.removeEventListener('scroll', this.onScrollHandler);
    }
    
    onScrollHandler = () => {
      const s = $(window).scrollTop();
      const d = $(document).height();
      const c = $(window).height();
      const scrollPercent = (s / (d - c)) * 100;
      this.setState({
        scrollPercent
      });
    }

    render() {
        const panel_body = {
            borderLeft: "3px solid #00BCD4",
            height: "90px",
            backgroundColor:"lightyellow",
            borderRadius:"4px",
            margin:"6px"
        }
        const progress = {
            width: `${this.state.scrollPercent}%`,
              position:"fixed",
              top:"103px",
              backgroundColor:"red",
              height: '20px'
          }
        const panel_XML = {
            color: "#00BCD4",
            fontSize: "17px",
            position: "relative",
            left: "12px",
            top: "10px"
        }
        if(this.xmlType='slideshow'){
            return (
                <div id="progressBarID">
                    Scroll down
                    <div style={progress} id="progressbar" value="0" max="100"></div>
                    {this.state.newXML.map((data,item)=>
                        <div class="panel panel-default" style={panel_body}>
                            <p style={panel_XML}>{data.header}</p>
                            <p style={panel_XML}>{data.article}</p>
                        </div>
                    )}
                </div>
            )
        }
        else if(this.xmlType='timeline') {
            return(
                <div>heloo</div>
            )
        }
    }

}

ReactDOM.render(
  <NewPreview />,
  document.getElementById('app')
);

#app {
  border: solid 1px #000;
  height: 800px;
  overflow: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />