check_scrollability

Instructions

Implementation Reference

• src/index.ts:78-80 (schema)

  Zod schema for check_scrollability tool input validation: accepts optional direction parameter (vertical, horizontal, or both) defaulting to 'both'.

  const CheckScrollabilitySchema = z.object({
    direction: z.enum(['vertical', 'horizontal', 'both']).default('both')
  });

• src/index.ts:387-401 (registration)

  Registration of the check_scrollability tool in the ListToolsRequestSchema handler, defining its name, description, and input schema for MCP tool discovery.

  {
    name: 'check_scrollability',
    description: 'Check if the page is scrollable in the specified direction',
    inputSchema: {
      type: 'object',
      properties: {
        direction: {
          type: 'string',
          enum: ['vertical', 'horizontal', 'both'],
          default: 'both',
          description: 'Direction to check for scrollability'
        }
      }
    }
  }

• src/index.ts:809-906 (handler)

  Handler implementation for the check_scrollability tool in the CallToolRequestSchema switch statement. Uses Playwright's page.evaluate() to measure document vs viewport dimensions and returns scrollability status (vertical/horizontal scrollability, current position, max scroll, and direction-specific scroll availability). All in src/index.ts (single file).

            case 'check_scrollability': {
              if (!currentPage) {
                throw new Error('No browser page available. Launch a browser first.');
              }
  
              const params = CheckScrollabilitySchema.parse(args);
              const { direction } = params;
  
              // Check scrollability with proper typing
              const scrollInfo = await currentPage.evaluate((dir) => {
                const documentHeight = Math.max(
                  document.body.scrollHeight,
                  document.body.offsetHeight,
                  document.documentElement.clientHeight,
                  document.documentElement.scrollHeight,
                  document.documentElement.offsetHeight
                );
                
                const documentWidth = Math.max(
                  document.body.scrollWidth,
                  document.body.offsetWidth,
                  document.documentElement.clientWidth,
                  document.documentElement.scrollWidth,
                  document.documentElement.offsetWidth
                );
                
                const viewportHeight = window.innerHeight;
                const viewportWidth = window.innerWidth;
                
                const verticalScrollable = documentHeight > viewportHeight;
                const horizontalScrollable = documentWidth > viewportWidth;
                
                const currentScrollY = window.scrollY;
                const currentScrollX = window.scrollX;
                const maxScrollY = Math.max(0, documentHeight - viewportHeight);
                const maxScrollX = Math.max(0, documentWidth - viewportWidth);
                
                const verticalInfo = {
                  scrollable: verticalScrollable,
                  currentPosition: currentScrollY,
                  maxScroll: maxScrollY,
                  canScrollDown: currentScrollY < maxScrollY,
                  canScrollUp: currentScrollY > 0
                };
                
                const horizontalInfo = {
                  scrollable: horizontalScrollable,
                  currentPosition: currentScrollX,
                  maxScroll: maxScrollX,
                  canScrollRight: currentScrollX < maxScrollX,
                  canScrollLeft: currentScrollX > 0
                };
                
                return {
                  direction: dir,
                  vertical: verticalInfo,
                  horizontal: horizontalInfo,
                  anyScrollable: verticalScrollable || horizontalScrollable
                };
              }, direction);
  
              // Format the response message based on direction
              let message = '';
              
              if (direction === 'both') {
                const v = scrollInfo.vertical;
                const h = scrollInfo.horizontal;
                message = `Page scrollability status:
  Vertical: ${v.scrollable ? 'Scrollable' : 'Not scrollable'}${v.scrollable ? ` (${v.currentPosition}/${v.maxScroll})` : ''}
  Horizontal: ${h.scrollable ? 'Scrollable' : 'Not scrollable'}${h.scrollable ? ` (${h.currentPosition}/${h.maxScroll})` : ''}
  Overall: ${scrollInfo.anyScrollable ? 'Page is scrollable' : 'Page is not scrollable'}`;
              } else if (direction === 'vertical') {
                const v = scrollInfo.vertical;
                message = `Vertical scrolling: ${v.scrollable ? 'Available' : 'Not available'}`;
                if (v.scrollable) {
                  message += `\nPosition: ${v.currentPosition}/${v.maxScroll}`;
                  message += `\nCan scroll up: ${v.canScrollUp}`;
                  message += `\nCan scroll down: ${v.canScrollDown}`;
                }
              } else {
                const h = scrollInfo.horizontal;
                message = `Horizontal scrolling: ${h.scrollable ? 'Available' : 'Not available'}`;
                if (h.scrollable) {
                  message += `\nPosition: ${h.currentPosition}/${h.maxScroll}`;
                  message += `\nCan scroll left: ${h.canScrollLeft}`;
                  message += `\nCan scroll right: ${h.canScrollRight}`;
                }
              }
  
              return {
                content: [
                  {
                    type: 'text',
                    text: message
                  }
                ]
              };
            }