Scrolling & Interaction Sync

Keep every viewport in step while you test.

How Sync Works

Responsive Tester runs your page in several viewports side by side at once. Sync is what keeps those viewports feeling like one surface instead of a wall of independent windows. Rather than checking each frame in isolation, you drive one and the rest follow, so a single pass tells you how a layout holds up across phone, tablet, and desktop widths.

Sync is split into three distinct behaviors, each with its own scope. Page navigation is always on and cannot be turned off. Scroll sync and interaction sync are separate toolbar toggles you switch on only when you want them. Understanding which one does what makes it easy to keep the frames as tightly or as loosely coupled as the task calls for.

Page Navigation

Every frame shows the same page at all times. When you navigate one viewport, whether by clicking a link, submitting a form, or entering a new address, every other viewport navigates with it. This keeps the whole set pinned to a single URL so you never end up comparing a checkout screen in one frame against a landing page in another.

This behavior is unconditional. There is no toggle to enable it and no toggle to switch it off, and it is available to everyone at no cost. It is the one piece of sync that is always active, and it is the foundation the other two build on: because all frames already agree on which page they are showing, scrolling and interaction have a shared context to sync against.

Scroll Sync

Scroll sync is a toolbar toggle. Switch it on and scrolling any one frame scrolls every other frame to match, so you can walk a long page from top to bottom across all your viewports in a single motion and compare the same region of the page in each one as you go.

It is not limited to the main document scroll. Scroll sync also follows scroll areas inside the page, so a scrollable panel, a modal body, an overflow list, or any nested region with its own scrollbar stays aligned across frames the same way the page as a whole does. Wherever content scrolls, the other viewports track it.

Scroll sync is a free feature. Toggle it on when you want the frames locked together for a scroll pass, and toggle it off when you want to inspect one viewport on its own without disturbing the others.

Interaction Sync

Interaction sync is a toolbar toggle that mirrors what you do in one viewport across every other viewport in real time. Your clicks, hovers, focus changes, and typing all replay in each frame as you perform them, so you can exercise a flow once and watch it play out simultaneously at every width. This turns a multi-viewport layout into a single interactive session: open a menu, move focus through a form, or drive a component, and each frame responds in lockstep.

Alongside pointer and focus events, interaction sync also mirrors a specific set of keyboard actions so keyboard-driven UI behaves consistently across frames. It relays the Arrow keys, Esc, Home, and End, plus the characters you type. That covers the keys that commonly drive application behavior: Esc to close a dialog or popover, the Arrow keys to move through a listbox or menu, and Home or End to jump within a control, along with typed input flowing into fields in every frame at once.

Interaction sync is a Pro feature. Its toolbar toggle stays locked until you start a trial or upgrade, and while it is locked the toggle will not turn on. Scroll sync and page navigation remain fully available whether or not interaction sync is unlocked, so you can still keep the frames aligned for scrolling and navigation without Pro.