Introduction:

In this Blog, we discuss how to perform a scroll event from one tab to another tab in javascript. Chrome extension triggers when a user scrolls up or down a webpage, allowing developers to create interactive features or perform the scroll event.

Scroll event:

When a user scrolls a web page, the browser triggers scroll events to notify JavaScript code about the scrolling activity. These events provide valuable information such as the current scroll position, direction, and velocity. By listening to these events, you can create dynamic and interactive web experiences.

Flow diagram:

Prerequisites:

Javascript

Steps:

Step 1: Add the Chrome extension to the browser

Add the Chrome extension to the browser, and follow the steps on the below reference page.

Ref – How to create a browser extension tab events communication using JavaScript?

Step 2: Update the content.js and background.js file

Content.js file

Create a content script that will be injected into the web pages where you want to detect scroll events. This script will listen for scroll events and send messages to the background script to handle them.

Add the following code to the content.js file

document.addEventListener('scroll', function () {
    let rect = document.body.getBoundingClientRect();
    let dimension = {
      height: rect.height,
      width: rect.width,
      viewport: window.visualViewport.height
    }
    if (chrome.runtime?.id) {
      chrome.runtime.sendMessage({ type: 'scrollEvent', scrollY: window.scrollY, obj: dimension }, function () {
        if (!chrome.runtime.lastError) {
        }
      });
    }
  });

This JavaScript code adds a scroll event listener to the document. When the user scrolls, it calculates the dimensions of the document body and the viewport. Then, if the Chrome extension is installed (chrome.runtime.id exists), it sends a message containing scroll position (scrollY) and dimension data to the extension background script.

background.js file

Create a background script to receive messages from the content script and perform actions in response to scroll events.

Add the following code to the background.js file

let scrollPositions = {};
let globalScrollY = 0;
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    if (message.type === 'scrollEvent') {
        chrome.storage.sync.get(['mobiletabid'], function (result) {
            let mobileTabId = result.mobiletabid
            if (globalScrollY !== message.scrollY) {
                globalScrollY = message.scrollY;
                let res = getPageOffsetHeight(mobileTabId)
                chrome.tabs.sendMessage(mobileTabId, { type: 'scrollEvent', scrollY: message.scrollY, obj: message.obj, mobileTabId: mobileTabId });  
            }
        });
    }

This JavaScript code listens for messages from a Chrome extension background script. When it receives a 'scroll event' message, it retrieves a value from Chrome storage, compares it to the received scroll position, and then sends a message to the active tab with updated scroll information.

content.js

Background Page: Alternatively, if you're using a manifest version before version 3, you can use a background page instead of a background script. In this case, you would specify the background page in your manifest file and handle scroll events directly in the background page's JavaScript.

Add the following code to the content.js file

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
     if (message.type === 'scrollEvent') {
        window.scrollTo(0, message.scrollY);
        let tagId = null
        if (tagId) {
          var iframe = document.getElementById(tagId);
          ScrollFunction(tagId, request)
          setTimeout(() => {
            ScrollFunction(tagId, request)
          }, 500)
        }
        sendResponse({ status: 'Scrolled' });
      }
});

This JavaScript code listens for messages from a Chrome extension background script. When it receives a 'scroll event' message, it scrolls the window to the specified scroll position, invokes a function related to a specified tag ID, waits for 500 milliseconds, then invokes the same function again. Finally, it sends a response confirming the scrolling action.

Step 3: The scroll event page test

The final step is to open the website to the actual tab

If you want to test the scroll event, you can open the website

If you scroll on the actual tab, the new tab will also get the values

Conclusion:

In conclusion, understanding how to trigger a scroll event dynamically through JavaScript opens up possibilities for enhancing user experience and interactivity on web pages.

scroll event one tab to another tab in javascript