大家好,我是新手,所以请原谅我提出的愚蠢问题 Angular 中的 js 函数可以让我同时水平滚动两个 div
ngOnInit() {
this.settActivityAndTaskCells();
//-------------------Begin Scroll-------------------
var isSyncingLeftScroll = false;
var isSyncingRightScroll = false;
var leftDiv = document.getElementById('top');
var rightDiv = document.getElementById('bot');
leftDiv.onscroll = function () {
if (!isSyncingLeftScroll) {
isSyncingRightScroll = true;
rightDiv.scrollLeft = this.scrollLeft;
}
isSyncingLeftScroll = false;
}
rightDiv.onscroll = function () {
if (!isSyncingRightScroll) {
isSyncingLeftScroll = true;
leftDiv.scrollLeft = this.scrollLeft;
}
isSyncingRightScroll = false;
}
//-------------------End Scroll-------------------
}
所以我在reactjs上像这样改变它
Scrolling = () => {
var isSyncingLeftScroll = false,
isSyncingRightScroll = false,
leftDiv = document.getElementById('top'),
rightDiv = document.getElementById('bot');
if (!isSyncingLeftScroll) {
isSyncingRightScroll = true;
rightDiv.scrollLeft = this.scrollLeft;
}
isSyncingLeftScroll = false;
if (!isSyncingRightScroll) {
isSyncingLeftScroll = true;
leftDiv.scrollLeft = this.scrollLeft;
}
isSyncingRightScroll = false;
}
并在 div 中调用它,例如
但滚动不起作用感谢任何花时间帮助我、审查并提供反馈的人。
最佳答案
您的迁移代码缺少最重要的部分,即将新函数绑定(bind)到 scroll
事件。应该是:
Scrolling = () => {
var isSyncingLeftScroll = false,
isSyncingRightScroll = false,
leftDiv = document.getElementById('top'),
rightDiv = document.getElementById('bot');
leftDiv.onscroll = () => {
if (!isSyncingLeftScroll) {
isSyncingRightScroll = true;
rightDiv.scrollLeft = this.scrollLeft;
}
isSyncingLeftScroll = false;
};
rightDiv.onscroll = () => {
if (!isSyncingRightScroll) {
isSyncingLeftScroll = true;
leftDiv.scrollLeft = this.scrollLeft;
}
isSyncingRightScroll = false;
};
}
关于javascript - 我如何将我的js代码迁移到reactjs并调用它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49517835/