如何通过ID同步两个div的滚动 [英] How to sync the scroll of two divs by ID

查看：51
本文介绍了如何通过ID同步两个div的滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两个 div，每个 div 垂直占据屏幕的一半.其中之一有一个滚动条.
在每个 div 上都有航点或 ID.
滚动时，我希望滚动条对齐两个 div，以便相同的 id 始终彼此相对.

一个例子是这样的http://jasmine.github.io/edge/introduction.html

解决方案

我想我明白你想要什么 请试试这个你可以增强代码

$('#dv2').on("scroll", function () {var lastDivInView = -1变量停止=假var allCommts=$("#dv2").find("div")var cnt=allCommts.length变量 i=0;while (!stop && i < cnt) {如果 ($(allCommts[i]).offset().top > 0 && $(allCommts[i]).offset().top < $(this).height()) {lastDivInView = i;停止 = 真}我++}if (lastDivInView>-1)$("#dv1").find("a")[lastDivInView].scrollIntoView()});功能滚动视图(索引){var dvCommt = $("#dv2").find("div")[index - 1]dvCommt.scrollIntoView()}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div style="width: 400px"><div id="dv1" style="float: left; max-height: 40px; width: 45%; border: 1px solid red; overflow: auto"><a href="#" onclick="ScrollToView(1)">代码 1</a><br/><a href="#" onclick="ScrollToView(2)">代码 2</a><br/><a href="#" onclick="ScrollToView(3)">代码 3</a><br/><a href="#" onclick="ScrollToView(4)">代码 4</a><br/><a href="#" onclick="ScrollToView(5)">代码 5</a><br/><a href="#" onclick="ScrollToView(6)">代码 6</a><br/><a href="#" onclick="ScrollToView(7)">代码 7</a><br/><a href="#" onclick="ScrollToView(8)">代码 8</a><br/><a href="#" onclick="ScrollToView(9)">代码 9</a><br/><a href="#" onclick="ScrollToView(10)">代码 10</a><br/>

<div id="dv2" style="float: left; max-height: 150px; width: 45%; border: 1px solid green; overflow: auto"><div style="border:1px solid black;margin:10px">代码 1 的注释:aaa bbbbb cccc dddd eee ffff

<div style="border:1px solid black;margin:10px">代码 2 的注释:aaa bbbbb cccc dddd eee ffff

<div style="border:1px solid black;margin:10px">代码 3 的注释:aaa bbbbb cccc dddd eee ffff

<div style="border:1px solid black;margin:10px">代码 4 的注释:aaa bbbbb cccc dddd eee ffff

<div style="border:1px solid black;margin:10px">代码 5 的注释:aaa bbbbb cccc dddd eee ffff

<div style="border:1px solid black;margin:10px">代码 6 的注释:aaa bbbbb cccc dddd eee ffff

<div style="border:1px solid black;margin:10px">代码 7 的注释:aaa bbbbb cccc dddd eee ffff

<div style="border:1px solid black;margin:10px">代码 8 的注释:aaa bbbbb cccc dddd eee ffff

<div style="border:1px solid black;margin:10px">代码 9 的注释:aaa bbbbb cccc dddd eee ffff

<div style="border:1px solid black;margin:10px">代码 10 的注释:aaa bbbbb cccc dddd eee ffff

I have two divs each taking up half the screen vertically. on one of them there is a scroll bar.
On each of the divs there are waypoints, or id's.
When scrolling, i want the scroll to align the two divs so that the same id's are always opposite each other.

An example is something like this http://jasmine.github.io/edge/introduction.html

解决方案

I think I understand what you want please try this and you can enhance the code

$('#dv2').on("scroll", function () {
        var lastDivInView = -1
        var stop=false
        var allCommts=$("#dv2").find("div")
        var cnt=allCommts.length
        var i=0;
        while (!stop && i < cnt) {
            if ($(allCommts[i]).offset().top > 0 && $(allCommts[i]).offset().top < $(this).height()) {
                lastDivInView = i;
                stop = true
            }
            i++
        }
        if (lastDivInView>-1)
          $("#dv1").find("a")[lastDivInView].scrollIntoView()
    });
    function ScrollToView(index) {
        var dvCommt = $("#dv2").find("div")[index - 1]
        dvCommt.scrollIntoView()
       
      
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width: 400px">
    <div id="dv1" style="float: left; max-height: 40px; width: 45%; border: 1px solid red; overflow: auto">
          <a href="#" onclick="ScrollToView(1)">Code 1</a><br />
           <a href="#" onclick="ScrollToView(2)">Code 2</a><br />
           <a href="#" onclick="ScrollToView(3)">Code 3</a><br />
           <a href="#" onclick="ScrollToView(4)">Code 4</a><br />
           <a href="#" onclick="ScrollToView(5)">Code 5</a><br />
           <a href="#" onclick="ScrollToView(6)">Code 6</a><br />
           <a href="#" onclick="ScrollToView(7)">Code 7</a><br />
           <a href="#" onclick="ScrollToView(8)">Code 8</a><br />
           <a href="#" onclick="ScrollToView(9)">Code 9</a><br />
           <a href="#" onclick="ScrollToView(10)">Code 10</a><br />
        </div>
    <div id="dv2" style="float: left; max-height: 150px; width: 45%; border: 1px solid green; overflow: auto">
        <div style="border:1px solid black;margin:10px">
            Comments for code 1:aaa bbbbb cccc dddd eee ffff
        </div>
         <div style="border:1px solid black;margin:10px">
            Comments for code 2:aaa bbbbb cccc dddd eee ffff
        </div>
         <div style="border:1px solid black;margin:10px">
            Comments for code 3:aaa bbbbb cccc dddd eee ffff
        </div>
         <div style="border:1px solid black;margin:10px">
            Comments for code 4:aaa bbbbb cccc dddd eee ffff
        </div>
         <div style="border:1px solid black;margin:10px">
            Comments for code 5:aaa bbbbb cccc dddd eee ffff
        </div>
         <div style="border:1px solid black;margin:10px">
            Comments for code 6:aaa bbbbb cccc dddd eee ffff
        </div>
         <div style="border:1px solid black;margin:10px">
            Comments for code 7:aaa bbbbb cccc dddd eee ffff
        </div>
         <div style="border:1px solid black;margin:10px">
            Comments for code 8:aaa bbbbb cccc dddd eee ffff
        </div>
         <div style="border:1px solid black;margin:10px">
            Comments for code 9:aaa bbbbb cccc dddd eee ffff
        </div>
         <div style="border:1px solid black;margin:10px">
            Comments for code 10:aaa bbbbb cccc dddd eee ffff
        </div>
     </div>
</div>

这篇关于如何通过ID同步两个div的滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆