Results 1 to 8 of 8

Thread: Scroll 2 divs with one scrollbar

  1. #1
    Join Date
    Mar 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Scroll 2 divs with one scrollbar

    Hi,

    I have two divs that I would like to scroll with one vertical scrollbar, but each should use their own horizontal scrollbar. Is this possible??

    I have the following code in my page:

    Code:
    <table><tr><td>
    
    <div style="HEIGHT: 70px; WIDTH: 100%; OVERFLOW: auto">
    some text<br>some text<br>
    some text<br>some text<br>
    some text<br>some text<br>
    some text<br>some text</div>
    </td>
    <td>
    <div id="ta2" style="HEIGHT: 70px; WIDTH: 100%; OVERFLOW: auto">
    some text<br>some text<br>
    some text<br>some text<br>
    some text<br>some text<br>
    some text<br>some text</div>
    </td>
    </tr>
    </table>
    Regards,
    Riz

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    On which DIV do you wish the scrollbar to appear?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Mar 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The one on the right, although thinking about it, it would probably be better to have it on both and they both scroll up and down together.

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    How about this:
    Code:
    <script type="text/javascript">
    var lastSeen = [0, 0];
    function checkScroll(div1, div2) {
      if(!div1 || !div2) return;
      var control = null;
      if(div1.scrollTop != lastSeen[0]) control = div1;
      else if(div2.scrollTop != lastSeen[1]) control = div2;
      if(control == null) return;
      else div1.scrollTop = div2.scrollTop = control.scrollTop;
      lastSeen[0] = div1.scrollTop;
      lastSeen[1] = div2.scrollTop;
    }
    
    window.setInterval("checkScroll(document.getElementById('ta1'), document.getElementById('ta2'))", 200);
    </script>
    <table><tr><td>
    
    <div style="height: 70px; width: 100%; overflow: auto" id="ta1">
    some text<br>some text<br>
    some text<br>some text<br>
    some text<br>some text<br>
    some text<br>some text</div>
    </td>
    <td>
    <div id="ta2" style="height: 70px; width: 100%; overflow: auto">
    some text<br>some text<br>
    some text<br>some text<br>
    some text<br>some text<br>
    some text<br>some text</div>
    </td>
    </tr>
    </table>
    And yes, CSS is case-sensitive.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Mar 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, that works - although there is a slight time lag between the two scrollers.

  6. #6
    Join Date
    Mar 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Changing

    Code:
    window.setInterval("checkScroll(document.getElementById('ta1'), document.getElementById('ta2'))", 200);
    to

    Code:
    window.setInterval("checkScroll(document.getElementById('ta1'), document.getElementById('ta2'))", 1);
    seems to fix the problem. Thanks again for the quick reply.

  7. #7
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Yes, unfortunately there is no reliable scroll event. Therefore, we must poll them -- check for changes every so often. A lower delay there will make the script more responsive, but may have a negative effect on the performance of the page. Experiment on a couple of other machines.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. #8
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    For better berformance add onscroll event to first div and call checkScroll on the onscroll event

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •