Js控制滚动条,双窗口滚动条绑定

Posted by zjh on September 15, 2020

绑定两个容器窗口的滚动条

适用场景:

编辑画面的编辑区和预览区,超出一页范围会增加翻页的损耗,所以绑定编辑区和预览区,编辑区滚动引起预览器的滚动,但是不要双向绑定,会引起递归循环的调用

//绑定滚动条
$("#oriContent").scroll(function () {
 //console.log("写入区",$("#oriContent").scrollTop(),$("#oriContent")[0].scrollHeight,$("#oriContent").scrollTop()/$("#oriContent")[0].scrollHeight*100+"%")
 //console.log("预览区",$("#result").scrollTop(),$("#result")[0].scrollHeight,$("#result").scrollTop()/$("#result")[0].scrollHeight*100+"%")
document.getElementById('result').scrollTop=($("#oriContent").scrollTop()*$("#result")[0].scrollHeight)/$("#oriContent")[0].scrollHeight;
                    })

其他示例

 //获取当前滚动条的位置
var long1 = $("#dd2").scrollTop();
//获取滚动条的长度
var long2=$('#dd2').height();
//alert(h);
//设置滚动条的位置
// document.getElementById('dd2').scrollTop=100;
//获取滚动条的高度
 var long3 = $("#dd2")[0].scrollHeight;
document.getElementById('dd2').scrollTop=(long2+long3)*nows-200;