My code includes a progress bar that works fine - it shows a movable progress bar when the window is scrolled. However, I want the progress bar to move when scrolling inside my div, not on the entire window. I am currently using jQuery for this functionality.
Is it acceptable to write a jQuery function in componentWillmount?
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>
)
}
}
}What steps should I take to make my progress bar move based on scrolling within my div instead of the window scroll?