Parallel PDF in a side by side div scrolling

Question

I have two scrollable elements: one on the left side and one on the right side of the page. The left one is normal div element, the right one is a object element which has a PDF embedded.

<object width="100%" height="100%" data="@ViewBag.ImageUrl" ></object>

When I scroll the left side div, the right side PDF div should automatically should get scrolled too. The PDF is displayed in a Object element (Object is embedded in partial view)

Hey, you should add more code examples of what you're trying to achieve. You should also avoid using images on your question. I believe that what you're trying to implement was already asked here: https://stackoverflow.com/questions/9236314/how-do-i-synchronize-the-scroll-position-of-two-divs — Adriel Santos, Sep 11 '20 at 21:07
@Adriel thanks solution you have mention works in case both side are div i have pdf displayed in which scroll is enabled so i want to scroll left div with pdf div. — daoootim, Sep 12 '20 at 07:45
I see, can you post an example on https://jsfiddle.net/ ? It will be easier to us to find a solution — Adriel Santos, Sep 12 '20 at 12:15

score -1 · Answer 1 · answered Jul 05 '23 at 13:56

This can be achieved by marking each of the divs you want to scroll in parallel with a certain class, and every individual one with a distinct id. Then you add an event listener for the "scroll" event on every such div, and make the scroll settings of the other divs match the one that triggered the event listener.

const allNodes = Array.from(document.querySelectorAll('.parallel-scroll'));

allNodes.forEach(node => {
  const otherNodes = allNodes.filter(x => x.id !== node.id);
  node.addEventListener('scroll', e => {
    const scrollLeft = e.target.scrollLeft
    otherNodes.forEach(x => x.scrollTo(scrollLeft, 0));
  });
});

.parent {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.container {
  display: flex;
  gap: 20px;
}

.container > * {
  flex-shrink: 0;
}

.red {
  background: red;
  width: 100px;
  height: 100px;
}

<div class="parent">
    <div class='overflow-x-scroll parallel-scroll' id='1'>
        <div class="container">
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
        </div>
    </div>

    <div class='overflow-x-scroll parallel-scroll' id='2'>
        <div class="container">
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
            <div class="red"></div>
        </div>
    </div>
</div>

Optionally, you could configure some kind of debouncing for the listeners (if performance is a problem), but in my experience, it performs well. Also, adding a debouncer may make the controlled scrolling too jittery and affect the user experience negatively.

Parallel PDF in a side by side div scrolling

1 Answers1