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


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 交通频道 作文范文 【精品】抽样调查项目计划书 默名字 "大罗山烧烤"团日活动策划书 读书伴我成长作文1200字 社区党支部书记年终工作总结 世界何时铸剑为犁600字作文 医学事业论 关于惜时的名言警句 足球少年 双休日作文300字 与书结缘作文500字 那炎热的夏天 新四军老兵——李春华 2015最新经典语录大全 我的小狗“球球” 最好的礼物作文450字 图解:商务西餐的礼仪 阳光体育伴我行 在全市反腐倡廉工作会议上的讲话 党建党委 最新销售员辞职报告 冬至随笔作文250字 励志的句子:只有活着,才有希望 涓涓心事 ---你们都在骗我,有天可不可以告诉我为什么、 他是我的爷爷!作文1000字 一推销员的精神 空壳虾的秘密 元宵晚会邀请函 浅析交通状况对城市经济发展的影响 山际·流水·淙淙作文800字 关于过马路的作文50字 在午后,独想伊人 公安2011年工作计划 描写雪的诗句 超级搞笑愚人节短信14 搞笑短信精选16条 最喜欢的季节秋天英语作文 继续解放思想心得体会:领导带头 深刻剖析 精选QQ心情说说大全:每个人心中,都有一座回不去的城。 有趣的护蛋活动作文350字 2016年幼儿园工作计划 恋上天使的坏2作文1300字 恩情无价 高中高三作文1000字:银杏树下的约定(10) 暑假里的新鲜事作文800字 在县直机关党建工作研讨暨参加学习会议上的讲话 小学五年级作文450字:大象救小兔 万圣节微信文章 2010年暑假回顾及反思 秋,却在冬雪之后作文400字

Copyright © 2016 phpStudy |