求助,Iscroll插件如何实现各滚动关联

风淡_云清 2016-10-30 02:02:02


不知道如何实现这样的效果,思路是什么,求指点
...全文
352 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
adomlin 2017-05-22
  • 打赏
  • 举报
回复
你好,这块怎么实现能帮助我下嘛
风淡_云清 2016-10-30
  • 打赏
  • 举报
回复
引用 10 楼 qq_29594393 的回复:
哦,话说纠结这个干啥呢
找到原因了
风淡_云清 2016-10-30
  • 打赏
  • 举报
回复
引用 10 楼 qq_29594393 的回复:
哦,话说纠结这个干啥呢
我准备要做的这个项目,需要实现这个功能,话说我已经实现大概效果了,但是就是滚动中事件 无法生效,有点郁闷
当作看不见 2016-10-30
  • 打赏
  • 举报
回复
哦,话说纠结这个干啥呢
风淡_云清 2016-10-30
  • 打赏
  • 举报
回复
引用 8 楼 qq_29594393 的回复:
<script src='zepto.js'></script>,scroll是这个里面的 方法,原生js是没有scroll方法 的。 插件就用jquery了,其他的都是手写实现,像这个没用过。。
zepto.js 是我后加的,iscroll插件不依赖其他库,他自身提供了一些API
当作看不见 2016-10-30
  • 打赏
  • 举报
回复
<script src='zepto.js'></script>,scroll是这个里面的 方法,原生js是没有scroll方法 的。 插件就用jquery了,其他的都是手写实现,像这个没用过。。
风淡_云清 2016-10-30
  • 打赏
  • 举报
回复
你需要在多复制几个 tr
风淡_云清 2016-10-30
  • 打赏
  • 举报
回复
引用 4 楼 qq_29594393 的回复:
刚写的实例,scroll ,是onscroll 吧。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JS使图片左右移动_何问起</title>
	<meta charset="utf-8" />
    <base target="_blank" />
    <style>
    
    span{margin: 100px;}
    p{margin-top: 20px;}
    div{overflow: auto;}
    #main,#top1{width: 300px;background-color: aquamarine;}
    #left,#main{width: 300px;display: inline-block;height: 100px;}
    </style>
</head>
<body>
	<div id="top1">
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
	</div>
	<div id="left">
		<p>1234</p><p>1234</p><p>1234</p><p>1234</p>
		<p>1234</p><p>1234</p><p>1234</p><p>1234</p><p>1234</p>
	</div>
	<div id="main">
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<p>1234</p><p>1234</p><p>1234</p><p>1234</p>
		<p>1234</p><p>1234</p><p>1234</p><p>1234</p>
	</div>
    <script>
		main.onscroll=function(){
			console.log(main.scrollTop)
			console.log(main.scrollLeft)
			top1.scrollLeft=main.scrollLeft;
			left.scrollTop= main.scrollTop;
		}
		top1.onscroll=function(){
			main.scrollLeft=this.scrollLeft;
		}
		left.onscroll=function(){
			main.scrollTop=this.scrollTop
		}
		
    </script>
</body>
</html>
引用 4 楼 qq_29594393 的回复:
刚写的实例,scroll ,是onscroll 吧。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JS使图片左右移动_何问起</title>
	<meta charset="utf-8" />
    <base target="_blank" />
    <style>
    
    span{margin: 100px;}
    p{margin-top: 20px;}
    div{overflow: auto;}
    #main,#top1{width: 300px;background-color: aquamarine;}
    #left,#main{width: 300px;display: inline-block;height: 100px;}
    </style>
</head>
<body>
	<div id="top1">
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
	</div>
	<div id="left">
		<p>1234</p><p>1234</p><p>1234</p><p>1234</p>
		<p>1234</p><p>1234</p><p>1234</p><p>1234</p><p>1234</p>
	</div>
	<div id="main">
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<p>1234</p><p>1234</p><p>1234</p><p>1234</p>
		<p>1234</p><p>1234</p><p>1234</p><p>1234</p>
	</div>
    <script>
		main.onscroll=function(){
			console.log(main.scrollTop)
			console.log(main.scrollLeft)
			top1.scrollLeft=main.scrollLeft;
			left.scrollTop= main.scrollTop;
		}
		top1.onscroll=function(){
			main.scrollLeft=this.scrollLeft;
		}
		left.onscroll=function(){
			main.scrollTop=this.scrollTop
		}
		
    </script>
</body>
</html>
写的挺好的,效果就是这样,但是我这是用iscroll插件 写的,我源码已经发了,你看一下,iscroll官方提供的滚动中事件就是scroll啊
风淡_云清 2016-10-30
  • 打赏
  • 举报
回复

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Document</title>
    <script src='zepto.js'></script>
    <script src='iscroll.js'></script>
    <script>
    var myScroll;
    var myScroll_2;
    var myScroll_3;

    function loaded() {
        myScroll = new IScroll('#wrapper',{
            // scroll:false
        });
        myScroll_2 = new IScroll('#thead', {
            scrollX: true
        });
        myScroll_3 = new IScroll('#box', {
            scrollX: true,
            scrollbars:true
        });
        console.log(myScroll_3);
        var box = document.getElementById('box');
             
        // myScroll_3.scrollEnd = function(){
        //     console.log('name');
        // }
        myScroll_3.on('scroll', function(e) {
        console.log(myScroll_3.y);          
        console.log(myScroll_3.x);  
            console.log(myScroll_2.x);
            console.log(e);
            myScroll_2.x = -1872;
        });

    }
    </script>
    <style>
    #wrapper {
        height: 300px;
        overflow: hidden;
        position: absolute;
        top: 34px;
        bottom: 0px;
        left: 30px;
    }
    
    thead {
        position: absolute;
        width: 500px;
        left: 100px;
        right: 0px;
        overflow: hidden;
    }
    
    ul,
    li {
        margin: 0;
        padding: 0;
    }
    
    h3 {
        position: absolute;
        top: 10px;
        left: 40px;
        padding: 0;
        margin: 0;
    }
    
    #box {
        width: 500px;
        height: 300px;
        position: absolute;
        left: 100px;
        top: 34px;
        overflow: hidden;
    }
    </style>
</head>

<body onload="loaded()">
    <h3>期号</h3>
    <div id="wrapper">
        <ul>
            <li>20150901</li>
            <li>20150902</li>
            <li>20150903</li>
            <li>20150904</li>
            <li>20150905</li>
            <li>20150906</li>
            <li>20150907</li>
            <li>20150908</li>
            <li>20150909</li>
            <li>20150910</li>
            <li>20150911</li>
            <li>20150912</li>
            <li>20150913</li>
            <li>20150904</li>
            <li>20150905</li>
            <li>20150906</li>
            <li>20150907</li>
            <li>20150908</li>
            <li>20150909</li>
            <li>20150910</li>
            <li>20150911</li>
            <li>20150912</li>
            <li>20150913</li>
            <li>20150904</li>
            <li>20150905</li>
            <li>20150906</li>
            <li>20150907</li>
            <li>20150908</li>
            <li>20150909</li>
            <li>20150910</li>
            <li>20150911</li>
            <li>20150912</li>
            <li>20150913</li>
            <li>20150904</li>
            <li>20150905</li>
            <li>20150906</li>
            <li>20150907</li>
            <li>20150908</li>
            <li>20150909</li>
            <li>20150910</li>
            <li>20150911</li>
            <li>20150912</li>
            <li>20150913</li>
            <li>20150914</li>
            <li>20150915</li>
            <li>20150916</li>
            <li>20150917</li>
            <li>20150918</li>
            <li>20150919</li>
            <li>20150920</li>
            <li>20150921</li>
            <li>20150922</li>
            <li>20150923</li>
            <li>20150924</li>
            <li>20150925</li>
            <li>20150926</li>
            <li>20150927</li>
            <li>20150928</li>
            <li>20150929</li>
            <li>20150930</li>
        </ul>
    </div>
    <table>
        <thead id="thead">
            <tr>
                <th>202033301</th>
                <th>202033302</th>
                <th>202033303</th>
                <th>202033304</th>
                <th>202033305</th>
                <th>202033306</th>
                <th>202033307</th>
                <th>202033308</th>
                <th>202033309</th>
                <th>202033310</th>
                <th>202033311</th>
                <th>202033312</th>
                <th>202033313</th>
                <th>202033314</th>
                <th>202033315</th>
                <th>202033316</th>
                <th>202033317</th>
                <th>202033318</th>
                <th>202033319</th>
                <th>202033320</th>
                <th>202033321</th>
                <th>202033322</th>
                <th>202033323</th>
                <th>202033324</th>
                <th>202033325</th>
                <th>202033326</th>
                <th>202033327</th>
                <th>202033328</th>
                <th>202033329</th>
                <th>202033330</th>
            </tr>
        </thead>
    </table>
    <div id="box">
        <table>
            <tbody>
                <tr>
                    <td>9203030401</td>
                    <td>9203030402</td>
                    <td>9203030403</td>
                    <td>9203030404</td>
                    <td>9203030405</td>
                    <td>9203030406</td>
                    <td>9203030407</td>
                    <td>9203030408</td>
                    <td>9203030409</td>
                    <td>9203030410</td>
                    <td>9203030411</td>
                    <td>9203030412</td>
                    <td>9203030413</td>
                    <td>9203030414</td>
                    <td>9203030415</td>
                    <td>9203030416</td>
                    <td>9203030417</td>
                    <td>9203030418</td>
                    <td>9203030419</td>
                    <td>9203030420</td>
                    <td>9203030421</td>
                    <td>9203030422</td>
                    <td>9203030423</td>
                    <td>9203030424</td>
                    <td>9203030425</td>
                    <td>9203030426</td>
                    <td>9203030427</td>
                    <td>9203030428</td>
                    <td>9203030429</td>
                    <td>9203030430</td>
                </tr>
                <tr>
                    <td>9203030401</td>
                    <td>9203030402</td>
                    <td>9203030403</td>
                    <td>9203030404</td>
                    <td>9203030405</td>
                    <td>9203030406</td>
                    <td>9203030407</td>
                    <td>9203030408</td>
                    <td>9203030409</td>
                    <td>9203030410</td>
                    <td>9203030411</td>
                    <td>9203030412</td>
                    <td>9203030413</td>
                    <td>9203030414</td>
                    <td>9203030415</td>
                    <td>9203030416</td>
                    <td>9203030417</td>
                    <td>9203030418</td>
                    <td>9203030419</td>
                    <td>9203030420</td>
                    <td>9203030421</td>
                    <td>9203030422</td>
                    <td>9203030423</td>
                    <td>9203030424</td>
                    <td>9203030425</td>
                    <td>9203030426</td>
                    <td>9203030427</td>
                    <td>9203030428</td>
                    <td>9203030429</td>
                    <td>9203030430</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
当作看不见 2016-10-30
  • 打赏
  • 举报
回复
刚写的实例,scroll ,是onscroll 吧。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JS使图片左右移动_何问起</title>
	<meta charset="utf-8" />
    <base target="_blank" />
    <style>
    
    span{margin: 100px;}
    p{margin-top: 20px;}
    div{overflow: auto;}
    #main,#top1{width: 300px;background-color: aquamarine;}
    #left,#main{width: 300px;display: inline-block;height: 100px;}
    </style>
</head>
<body>
	<div id="top1">
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
	</div>
	<div id="left">
		<p>1234</p><p>1234</p><p>1234</p><p>1234</p>
		<p>1234</p><p>1234</p><p>1234</p><p>1234</p><p>1234</p>
	</div>
	<div id="main">
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<span>1234</span><span>1234</span><span>1234</span>
		<p>1234</p><p>1234</p><p>1234</p><p>1234</p>
		<p>1234</p><p>1234</p><p>1234</p><p>1234</p>
	</div>
    <script>
		main.onscroll=function(){
			console.log(main.scrollTop)
			console.log(main.scrollLeft)
			top1.scrollLeft=main.scrollLeft;
			left.scrollTop= main.scrollTop;
		}
		top1.onscroll=function(){
			main.scrollLeft=this.scrollLeft;
		}
		left.onscroll=function(){
			main.scrollTop=this.scrollTop
		}
		
    </script>
</body>
</html>
风淡_云清 2016-10-30
  • 打赏
  • 举报
回复
引用 1 楼 qq_29594393 的回复:
主体绑定滚动事件,判断滚动的值,scrolltop 和scrollleft 把主体的scrolltop 的值对应到1的scrolltop ,而主体的scrollleft 对应 2 的scrollleft 就可以达到上述效果,而且就只有一个滚动事件
不知道为什么我绑定给主体的scroll事件不生效,其他的scrollEnd,scrollStart就可以
风淡_云清 2016-10-30
  • 打赏
  • 举报
回复
不知道为什么我绑定给主体的scroll事件不生效,其他的scrollEnd,scrollStart就可以
当作看不见 2016-10-30
  • 打赏
  • 举报
回复
主体绑定滚动事件,判断滚动的值,scrolltop 和scrollleft 把主体的scrolltop 的值对应到1的scrolltop ,而主体的scrollleft 对应 2 的scrollleft 就可以达到上述效果,而且就只有一个滚动事件

10,606

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 其他
社区管理员
  • 其他
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧