Tab Scroll



  • I've been trying to emulate a new Opera feature as described here: https://forum.vivaldi.net/topic/26784/return-to-previous-position-after-scroll-to-top
    It's a mod that scrolls to top of the current page when clicking the tab title and scrolls back to initial position when clicking the tab title again.
    You will need a custom.js file to implement this modification. Instructions: https://forum.vivaldi.net/topic/10549/modding-vivaldi/


    custom.js

    function tabScroll(event) {
        const target = event.target;
        if (target.classList.contains('title')) {
            const par = target.parentNode;
            if (par.classList.contains('tab-header') && target.hasAttribute('id')) {
                const id = target.getAttribute('id');
                if (id === 'scrollTop') {
                    chrome.tabs.executeScript({code:'function pos(){var position=window.pageYOffset;window.scrollTo(0,0);return position;};pos();'}, msg);
                    target.id = 'scrollPre';
                }
                if (id === 'scrollPre') {
                    chrome.tabs.executeScript({code:'chrome.storage.local.get({"offset":""},function(local){var offset=local.offset;window.scrollTo(0,offset);});'});
                    target.id = 'scrollTop';
                }
            }
            if (par.classList.contains('tab-header') && !target.hasAttribute('id')) {
                rmID();
                target.id = 'scrollTop';
            }
        }
    };
    
    function msg(position) {
        var offset = position[0];
        chrome.storage.local.set({'offset': offset});
    };
    
    function rmID() {
        const top = document.getElementById('scrollTop');
        const pre = document.getElementById('scrollPre');
        if (top) {
            top.removeAttribute('id');
        }
        if (pre) {
            pre.removeAttribute('id');
        }
    };
    
    
    let adr = {};
    setTimeout(function wait() {
        adr = document.querySelector('.toolbar-addressbar.toolbar');
        if (adr) {
            document.body.addEventListener('click', tabScroll);
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300);
    
    

    I'm sure this can be improved, but the current version functions. Be aware that you need to click the tab title for this mod to work. Hitting the favicon or the parent element (tab-header) won't do anything. If you click on a tab title, you switch to the tab. If you click the title again, you scroll to top and if you hit the title a third time, you scroll back to the position before you scrolled to top of page. If you have any questions about this, please let me know.

    Just found the opera blog post with the feature announcement – https://blogs.opera.com/desktop/2018/02/opera-51/



  • @luetage Nice, testing.
    Good idea. I think would better a hover button to scroll up or use the favicon to do that and prevent accidental scroll-to-top.

    But it works :P



  • @hadden89 Would be far easier to do this with a dedicated button, but the point was to emulate the request. I'm not too concerned about accidental clicking, because why should you click the title of an active tab, if you didn't want to use the functionality to go to top? And even if you click it by accident, you can just return to the previous position by clicking again :P



  • I found out that I can just put the scrollTab.js code into custom.js. It's far easier to use one file, especially if you are using a bash script to reload the files on update. OP has been updated.



  • Thanks for making this. I have learned interesting things:

    • You can use chrome.* APIs in the context of a chrome.tabs.executeScript(). I guess chrome treats the executed script like a content script.
    • The callback function can take in the output of execution of the script. I guess I completely skipped over that part in the docs.


  • @lonm Yeah, I was surprised too. Especially that it's so easy to use the local storage when needed. The callback function from the execute script part was a fluke, I found it on stackoverflow by accident. I really wanted to avoid using multiple files and passing messages.

    https://stackoverflow.com/questions/41577988/chrome-tabs-executescript-how-to-get-result-of-content-script


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.