Question

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

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

＆＃13;

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>
            )
        }
    }

}

＆＃13;

如何在我的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，因为此处并不真正需要它。

参见演示：

＆＃13;

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')
);

＆＃13;

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

＆＃13;

<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" />

＆＃13;

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

1 个答案: