如何控制页面所有滚动条随着一个滚动条一起动


1、项目开发需要去查看页面上的四幅图片,而且需要同时查看这些图片的相同的相对位置来进行比对,因此想实现滚动图片1的滚动条时,图片2伴随一起运动。
2、

3、图片效果如图,如何实现呢?


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{padding: 100px;}
        *{margin: 0;padding: 0;box-sizing:border-box;}
        div{width: 200px;height: 300px;overflow: scroll;border: 1px solid green;float: left;}
    </style>
</head>
<body>
    <div class="box1">
        <p>h ivherhgeiah ilaherli ghesr lhcfknrwerovwerve;irvehkrvhweoytvowehfvhe fhriweuhf ciuwegfiwegfihawhrovyitybiqyrtiviweroweyvahiwoetuweyricworiwjo wayiyawvbiahwefhcwehacaiyeifhaekhfvkshlkfvhlsehilseyylsvhsliuhiuyriehtvlbaherflhlvh ivherhgeiah ilaherli ghesr lhcfknrwerovwerve;irvehkrvhweoytvowehfvhe fhriweuhf ciuwegfiwegfihawhrovyitybiqyrtiviweroweyvahiwoetuweyricworiwjo wayiyawvbiahwefhcwehacaiyeifhaekhfvkshlkfvhlsehilseyylsvhsliuhiuyriehtvlbaherflhlvh ivherhgeiah ilaherli ghesr lhcfknrwerovwerve;irvehkrvhweoytvowehfvhe fhriweuhf ciuwegfiwegfihawhrovyitybiqyrtiviweroweyvahiwoetuweyricworiwjo wayiyawvbiahwefhcwehacaiyeifhaekhfvkshlkfvhlsehilseyylsvhsliuhiuyriehtvlbaherflhlvh ivherhgeiah ilaherli ghesr lhcfknrwerovwerve;irvehkrvhweoytvowehfvhe fhriweuhf ciuwegfiwegfihawhrovyitybiqyrtiviweroweyvahiwoetuweyricworiwjo wayiyawvbiahwefhcwehacaiyeifhaekhfvkshlkfvhlsehilseyylsvhsliuhiuyriehtvlbaherflhlvh ivherhgeiah ilaherli ghesr lhcfknrwerovwerve;irvehkrvhweoytvowehfvhe fhriweuhf ciuwegfiwegfihawhrovyitybiqyrtiviweroweyvahiwoetuweyricworiwjo wayiyawvbiahwefhcwehacaiyeifhaekhfvkshlkfvhlsehilseyylsvhsliuhiuyriehtvlbaherflhlv</p>
    </div>
    <div class="box2">
        <p>h ivherhgeiah ilaherli ghesr lhcfknrwerovwerve;irvehkrvhweoytvowehfvhe fhriweuhf ciuwegfiwegfihawhrovyitybiqyrtiviweroweyvahiwoetuweyricworiwjo wayiyawvbiahwefhcwehacaiyeifhaekhfvkshlkfvhlsehilseyylsvhsliuhiuyriehtvlbaherflhlvh ivherhgeiah ilaherli ghesr lhcfknrwerovwerve;irvehkrvhweoytvowehfvhe fhriweuhf ciuwegfiwegfihawhrovyitybiqyrtiviweroweyvahiwoetuweyricworiwjo wayiyawvbiahwefhcwehacaiyeifhaekhfvkshlkfvhlsehilseyylsvhsliuhiuyriehtvlbaherflhlvh ivherhgeiah ilaherli ghesr lhcfknrwerovwerve;irvehkrvhweoytvowehfvhe fhriweuhf ciuwegfiwegfihawhrovyitybiqyrtiviweroweyvahiwoetuweyricworiwjo wayiyawvbiahwefhcwehacaiyeifhaekhfvkshlkfvhlsehilseyylsvhsliuhiuyriehtvlbaherflhlvh ivherhgeiah ilaherli ghesr lhcfknrwerovwerve;irvehkrvhweoytvowehfvhe fhriweuhf ciuwegfiwegfihawhrovyitybiqyrtiviweroweyvahiwoetuweyricworiwjo wayiyawvbiahwefhcwehacaiyeifhaekhfvkshlkfvhlsehilseyylsvhsliuhiuyriehtvlbaherflhlvh ivherhgeiah ilaherli ghesr lhcfknrwerovwerve;irvehkrvhweoytvowehfvhe fhriweuhf ciuwegfiwegfihawhrovyitybiqyrtiviweroweyvahiwoetuweyricworiwjo wayiyawvbiahwefhcwehacaiyeifhaekhfvkshlkfvhlsehilseyylsvhsliuhiuyriehtvlbaherflhlv</p>
    </div>
</body>
<script src="E:/作业/914/京东/js/jquery-3.1.0.min.js"></script>
<script>
    //方法1
    $('.box1').scroll(function(){
        var a=$(this).scrollTop();
        var b=$(this).scrollLeft();
        $('.box2').
        animate({'scrollTop':a,'scrollLeft':b},0)
    })
    $('.box2').scroll(function(){
        var a=$(this).scrollTop();
        var b=$(this).scrollLeft();
        $('.box1').
        animate({'scrollTop':a,'scrollLeft':b},0)
    })
    //方法2
    $('div').scroll(function(){
        var a=$(this).scrollTop();
        var b=$(this).scrollLeft();
        $('div').animate({'scrollTop':a,'scrollLeft':b},0);
    })  
</script>
</html>

那个,没做过类似的项目,找了一个方法,获取滚动距离的,你可以用js来动态修改图2 的滚动距离:
function ___getPageScroll() {
var xScroll, yScroll;
if (self.pageYOffset) {

yScroll = self.pageYOffset;
xScroll = self.pageXOffset;

} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict

yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;

} else if (document.body) {// all other Explorers

yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;  

}
arrayPageScroll = new Array(xScroll,yScroll);
return arrayPageScroll;
};


监听所有图片容器 divonscroll 事件
修改其他 divscrollTop 为当前事件触发元素的 scrollTop



相关阅读:
Laravel sql 排序
vue.js,我想把自定义组件里面的函数写到methods里面,但不成功
vue activate and deactivate
ajax请求异常问题
if...else if..else第三句不执行?
一个简单的react-router报错,无从着手
数组使用join拼接失败,求看一下
Hive向表里导入数据是不是会在HDFS上生成新文件及多个副本?
为什么有时候把代码压缩之后应用就不能正常运行了?
如何阻止h5body的滑动
webpack+react打包后的文件如何在Apache服务器上部署?
mysql优化的常用方法有哪些??
html接收res.render数据
JavaScript要是不用 <script src="***.js"> ,只用 js 自身,能导入 别的js 文件吗?
请问seajs怎样引进非CMD的框架?
centos7.2安装php7.1后配置listen的问题
有哪些预测算法可以根据实时增量数据更新算法并预测后续数据?
蚂蚁金服的calendar组件怎么赋值
对于“Javascript天生异步“这句话不太理解
请问datagrip怎么创建数据库?



快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 听(二)作文600字 懂得珍惜(上) 班婕妤的名言 开学让我很紧张 学校不教的学问 蚂蚁依然在搬家 梦 境 周记开学第一天400字 杂诗-人生 梅花,寄赠北方佳人 盘古开天地说课稿 教学秘书工作设想 微笑待成长——读《感悟成长的56封信》有感作文1200字 醉月 洋娃娃变脸 哈莫,去吧2550字 英语故事演讲稿 《北京遇上西雅图》经典语句经典台词 时间2100年作文1000字 先进事迹学习体会:转变工作作风,做好本职工作 殇“东方之星” 元旦幽默祝福短信精编 一诺天涯,红尘咫尺 镇保持共产党员先进性教育活动动员大会讲话 党建党委 十米气手枪比赛 交通安全法心得体会 给自已的一封信 妈妈,我爱你作文550字 2015年全国两会高层关注的焦点 《笑》诗歌 纪检工作会议上关于从严治党问题的讲话 帮妈妈做饭的作文500字 一老一少两个男人搞笑对话 落日般的忧伤作文500字 我与《钟馗 深紫色的云1000字 上半年机关干部个人工作总结 逃命的狍子 高中三年级作文650字:可爱同学 编童话故事作文500字 熊猫叔叔的食品店 小学父亲节作文300字 周密部署精心组织我处党员先进性教育起步良好 巧克力节300字 莲塘浅夏,相思如梦中泰服饰丽人裳梅万林诗词散文集 初中初二作文800字:红领巾的骄傲 我的舞蹈梦【张扬艺】 目标就在前方,何必在意起点在何处 穿越半世浮华 在XX公司职工代表大会上的致辞 初一作文700字:我深深得感受到了失败的滋味

Copyright © 2016 phpStudy |