Scroll-sync for tiles

newscpq

+1
I support this, too. Whoelse?

Hercu1es

Support this too!

DRYN

@bimlas so underrated. I think about this feature every day since tiling is a thing. As a coder this should be the most basic thing in every program that has the capability of side-by-side panels. I really hope this will be implemented in the near future.

mikefmmedia

Yeees, this is must have for development and i need this every day , but don't have it

Pesala

Vote for the first post if you haven't already done so. (Voting again will remove your vote).

Vote for Feature Request.png

blrdaywater

Just started using Vivaldi today. Synchronous scroll is something I'd use daily- not only technical work but also for comparison shopping. I registered with an account specifically so I could up-vote this feature request! If this was already working, I'd probably just delete the rest of my browsers right now.

daemon_byte

I don't know how this is still not a thing. It seems the most logical thing to put in with tiled tabs

neosun

Please add that.

mikefmmedia

Hi all, because i need this too, i made a short script to sync scrolling between two or more tabs. This only works for the same Website, where the script is added. So it's more a Developertool, not for regular user.

If you need this for website, where you are not the owner, you can but this script in your developer console of every site and it will sync this sites.

    let mouseOverDoc = false;
    let relativeScrollPos = localStorage.getItem('scrollY') || 0;
    document.addEventListener('mouseenter', () => mouseOverDoc = true);
    document.addEventListener('mouseleave', () => mouseOverDoc = false);
    window.addEventListener('scroll', (e) => {
        if (mouseOverDoc) {
            relativeScrollPos = window.scrollY/(document.body.clientHeight - window.innerHeight);
            localStorage.setItem('scrollY', relativeScrollPos);
        }
    })
    window.addEventListener('storage', () => {
        const scrollToY = localStorage.getItem('scrollY');
        window.scrollTo(0, scrollToY*(document.body.clientHeight - window.innerHeight));
    })```

fmaiabatista

@mikefmmedia Thanks, this works great!

For those who don't know how to "activate" it, you have to open both tiles (this code works for the same website only as it currently stands). Then, for both, you do:

right click > developer tools (last option) > inspector (last option)
then you click the "console" tab (next to the "elements" tab, which is the first tab and should be active and underlined in blue)
then in the "console" tab area, you paste the code above (please ignore the last ``` because they were a typo in the original message - you should copy the code until the last parentheses (including it) in the last line)
if you did it correctly, the console will return a new line with "undefined" in light grey (this is ok, means that the code ran without errors)
now you should be able to scroll either tile and the other should follow!

For more advanced users, this script can be set to run automatically by using a script injection extension such as TamperMonkey.

Hope the community can make use of this snippet until the Vivaldi team is able to provide an official feature!!

Credit and thanks to @mikefmmedia for creating and sharing the code!

shifte

@mikefmmedia
Great!

// ==UserScript==
// @name         Scroll-Sync for Tiles
// @version      0.1
// @description  Scroll-Sync
// @author       @mikefmmedia
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    let mouseOverDoc = false;
    let relativeScrollPos = localStorage.getItem('scrollY') || 0;
    document.addEventListener('mouseenter', () => mouseOverDoc = true);
    document.addEventListener('mouseleave', () => mouseOverDoc = false);
    window.addEventListener('scroll', (e) => {
        if (mouseOverDoc) {
            relativeScrollPos = window.scrollY/(document.body.clientHeight - window.innerHeight);
            localStorage.setItem('scrollY', relativeScrollPos);
        }
    })
    window.addEventListener('storage', () => {
        const scrollToY = localStorage.getItem('scrollY');
        window.scrollTo(0, scrollToY*(document.body.clientHeight - window.innerHeight));
    })
    // Your code here...
})();

Reinz66

can this script works for sync mouse movement for two tiles?

mikefmmedia

@reinz66 Not as it is, you would have to write some code on your own.
Like the scroll position, you could also write the mouse position into the localstorage and move a kind of fakemouse (HTMLElement like a div) around. Trigger clicks my also be possible, but i thing this will bring up more problems and therefore will be trickier to handle.

madonnaragu

We need this, please!

RadekPilich

Zooming is synced, so why not scrolling?
Make it so!
+1

gggmmm

Would use it almost daily, tiled view without it really misses a lot of productivity.

But I would much prefer a modifier key to an on-off switch, as I would prob use it only about half the time - "Shift+scroll", for example

jordonbc

What if we used the scroll lock key as a toggle for this?

When scroll lock is activated, window scrolling across all tiled views would be synchronized, allowing users to compare content more efficiently. When it's turned off, scrolling would revert to normal behavior for each tile.

Using scroll lock this way could provide an easily accessible method for controlling this functionality, without the need to navigate the right click menu or use complex key combinations.

mickael28

@shifte said in Scroll-sync for tiles:

@mikefmmedia
Great!

// ==UserScript==
// @name         Scroll-Sync for Tiles
// @version      0.1
// @description  Scroll-Sync
// @author       @mikefmmedia
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    let mouseOverDoc = false;
    let relativeScrollPos = localStorage.getItem('scrollY') || 0;
    document.addEventListener('mouseenter', () => mouseOverDoc = true);
    document.addEventListener('mouseleave', () => mouseOverDoc = false);
    window.addEventListener('scroll', (e) => {
        if (mouseOverDoc) {
            relativeScrollPos = window.scrollY/(document.body.clientHeight - window.innerHeight);
            localStorage.setItem('scrollY', relativeScrollPos);
        }
    })
    window.addEventListener('storage', () => {
        const scrollToY = localStorage.getItem('scrollY');
        window.scrollTo(0, scrollToY*(document.body.clientHeight - window.innerHeight));
    })
    // Your code here...
})();

I didn't know anything about UserScripts, further info if anyone is on the same boat in the future - https://greasyfork.org/en

I managed to make it work installing Tampermonkey and creating a local script.

Thank you guys.

We made it to 100 votes, maybe it comes natively at some point...

mickael28

@mikefmmedia Do you know why this script might not work in google sheets?

I've got 2 tiled spreadsheets and the script doesn't do anything on those...

The format is:
https://docs.google.com/spreadsheets/d/..../edit#gid=12....

Could you think of any kind of tweak to see if the script could work there too?

mikefmmedia

Hi @mickael28 ,
the problem here is that the scrollingcontainer is not html "window", as it is in default webpages. That means you would have to update the script to work with google spreadsheet.

To be honest, I don't think this works well, because google has probably built in a lot of javascript here, which in turn may set the scroll positions.