Skip to main content
Glama

scroll

Scroll web pages or specific elements in any direction with configurable pixel amounts and smooth scrolling options for automated browser navigation.

Instructions

Scroll the page or a specific element

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
directionNodown
amountNoScroll amount in pixels
selectorNoElement to scroll (scrolls page if not specified)
smoothNoUse smooth scrolling
tabIdNoTab ID to operate on (uses active tab if not specified)

Implementation Reference

  • Handler function that executes the scroll tool logic: calculates scroll deltas based on direction and amount, scrolls either a specific element or the page using scrollBy API with smooth option.
    async ({ direction, amount, selector, smooth, tabId }) => { const pageResult = await getPageForOperation(tabId); if (!pageResult.success) { return handleResult(pageResult); } const page = pageResult.data; const scrollDirection = (direction ?? 'down') as ScrollDirection; const scrollAmount = amount ?? 100; const useSmooth = smooth ?? true; try { // Calculate scroll deltas let deltaX = 0; let deltaY = 0; switch (scrollDirection) { case 'up': deltaY = -scrollAmount; break; case 'down': deltaY = scrollAmount; break; case 'left': deltaX = -scrollAmount; break; case 'right': deltaX = scrollAmount; break; } if (selector) { // Scroll specific element const element = await page.$(selector); if (!element) { return handleResult(err(selectorNotFound(selector))); } await element.evaluate( (el, dx, dy, smoothScroll) => { el.scrollBy({ left: dx, top: dy, behavior: smoothScroll ? 'smooth' : 'auto', }); }, deltaX, deltaY, useSmooth ); } else { // Scroll page await page.evaluate( (dx, dy, smoothScroll) => { window.scrollBy({ left: dx, top: dy, behavior: smoothScroll ? 'smooth' : 'auto', }); }, deltaX, deltaY, useSmooth ); } return handleResult(ok({ scrolled: true, direction: scrollDirection, amount: scrollAmount, selector, })); } catch (error) { return handleResult(err(normalizeError(error))); } }
  • Zod schema defining the input parameters for the scroll tool, including direction, amount, optional selector and smooth flag.
    export const scrollSchema = z.object({ direction: z.enum(['up', 'down', 'left', 'right']).optional().default('down'), amount: z.number().int().min(1).optional().default(100).describe('Scroll amount in pixels'), selector: z.string().optional().describe('Element to scroll (scrolls page if not specified)'), smooth: z.boolean().optional().default(true).describe('Use smooth scrolling'), tabId: tabIdSchema, });
  • Registration of the scroll tool via server.tool call within registerInputTools function, specifying name, description, schema, and inline handler.
    // Scroll server.tool( 'scroll', 'Scroll the page or a specific element', scrollSchema.shape, async ({ direction, amount, selector, smooth, tabId }) => { const pageResult = await getPageForOperation(tabId); if (!pageResult.success) { return handleResult(pageResult); } const page = pageResult.data; const scrollDirection = (direction ?? 'down') as ScrollDirection; const scrollAmount = amount ?? 100; const useSmooth = smooth ?? true; try { // Calculate scroll deltas let deltaX = 0; let deltaY = 0; switch (scrollDirection) { case 'up': deltaY = -scrollAmount; break; case 'down': deltaY = scrollAmount; break; case 'left': deltaX = -scrollAmount; break; case 'right': deltaX = scrollAmount; break; } if (selector) { // Scroll specific element const element = await page.$(selector); if (!element) { return handleResult(err(selectorNotFound(selector))); } await element.evaluate( (el, dx, dy, smoothScroll) => { el.scrollBy({ left: dx, top: dy, behavior: smoothScroll ? 'smooth' : 'auto', }); }, deltaX, deltaY, useSmooth ); } else { // Scroll page await page.evaluate( (dx, dy, smoothScroll) => { window.scrollBy({ left: dx, top: dy, behavior: smoothScroll ? 'smooth' : 'auto', }); }, deltaX, deltaY, useSmooth ); } return handleResult(ok({ scrolled: true, direction: scrollDirection, amount: scrollAmount, selector, })); } catch (error) { return handleResult(err(normalizeError(error))); } } );
  • TypeScript type definition for scroll tool input inferred from the schema.
    export type ScrollInput = z.infer<typeof scrollSchema>;
  • Type definition for scroll direction enum used in the tool.
    export type ScrollDirection = 'up' | 'down' | 'left' | 'right';

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/andytango/puppeteer-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server