Почему при прокрутке моего индикатора выполнения перемещение по прокрутке окна происходит не на моем div-реале?

70
3

Вот мой код. Мой индикатор выполнения работает нормально. Он показывает подвижный индикатор выполнения на прокрутке окна. но я хочу, чтобы он двигался, когда я прокручивал свой div. Здесь я использую js-запрос.

Также можно написать функцию jquery в компонентеWillmount.

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 не на моей прокрутке окна.

спросил(а) 2018-03-09T08:27:00+03:00 2 года, 7 месяцев назад
1
Решение
116

Вы были очень близки, но вы должны поместить проценты в состояние, чтобы компонент повторно отображал (также был изменен на componentDidMount):

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

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

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

ответил(а) 2018-03-09T09:06:00+03:00 2 года, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема