CLOUDCRUISE UNITED

Advanced Scroll Edge Cases

Smooth scroll behavior, bidirectional scroll (data grid), and CSS transform-based positioning.

Smooth Scroll Behavior

This container has scroll-behavior: smooth. Programmatic scrolling is animated, not instant. The agent must wait for the scroll animation to complete.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Target item in smooth-scroll container
Item 27
Item 28
Item 29
Item 30

Bidirectional Data Grid

Scrolls both horizontally and vertically. Find cell [Row 15, Column J] which is highlighted yellow.

#Column AColumn BColumn CColumn DColumn EColumn FColumn GColumn HColumn IColumn JColumn KColumn LColumn MColumn NColumn OColumn PColumn QColumn RColumn SColumn T
Row 1A1B1C1D1E1F1G1H1I1J1K1L1M1N1O1P1Q1R1S1T1
Row 2A2B2C2D2E2F2G2H2I2J2K2L2M2N2O2P2Q2R2S2T2
Row 3A3B3C3D3E3F3G3H3I3J3K3L3M3N3O3P3Q3R3S3T3
Row 4A4B4C4D4E4F4G4H4I4J4K4L4M4N4O4P4Q4R4S4T4
Row 5A5B5C5D5E5F5G5H5I5J5K5L5M5N5O5P5Q5R5S5T5
Row 6A6B6C6D6E6F6G6H6I6J6K6L6M6N6O6P6Q6R6S6T6
Row 7A7B7C7D7E7F7G7H7I7J7K7L7M7N7O7P7Q7R7S7T7
Row 8A8B8C8D8E8F8G8H8I8J8K8L8M8N8O8P8Q8R8S8T8
Row 9A9B9C9D9E9F9G9H9I9J9K9L9M9N9O9P9Q9R9S9T9
Row 10A10B10C10D10E10F10G10H10I10J10K10L10M10N10O10P10Q10R10S10T10
Row 11A11B11C11D11E11F11G11H11I11J11K11L11M11N11O11P11Q11R11S11T11
Row 12A12B12C12D12E12F12G12H12I12J12K12L12M12N12O12P12Q12R12S12T12
Row 13A13B13C13D13E13F13G13H13I13J13K13L13M13N13O13P13Q13R13S13T13
Row 14A14B14C14D14E14F14G14H14I14J14K14L14M14N14O14P14Q14R14S14T14
Row 15A15B15C15D15E15F15G15H15I15K15L15M15N15O15P15Q15R15S15T15
Row 16A16B16C16D16E16F16G16H16I16J16K16L16M16N16O16P16Q16R16S16T16
Row 17A17B17C17D17E17F17G17H17I17J17K17L17M17N17O17P17Q17R17S17T17
Row 18A18B18C18D18E18F18G18H18I18J18K18L18M18N18O18P18Q18R18S18T18
Row 19A19B19C19D19E19F19G19H19I19J19K19L19M19N19O19P19Q19R19S19T19
Row 20A20B20C20D20E20F20G20H20I20J20K20L20M20N20O20P20Q20R20S20T20
Row 21A21B21C21D21E21F21G21H21I21J21K21L21M21N21O21P21Q21R21S21T21
Row 22A22B22C22D22E22F22G22H22I22J22K22L22M22N22O22P22Q22R22S22T22
Row 23A23B23C23D23E23F23G23H23I23J23K23L23M23N23O23P23Q23R23S23T23
Row 24A24B24C24D24E24F24G24H24I24J24K24L24M24N24O24P24Q24R24S24T24
Row 25A25B25C25D25E25F25G25H25I25J25K25L25M25N25O25P25Q25R25S25T25
Row 26A26B26C26D26E26F26G26H26I26J26K26L26M26N26O26P26Q26R26S26T26
Row 27A27B27C27D27E27F27G27H27I27J27K27L27M27N27O27P27Q27R27S27T27
Row 28A28B28C28D28E28F28G28H28I28J28K28L28M28N28O28P28Q28R28S28T28
Row 29A29B29C29D29E29F29G29H29I29J29K29L29M29N29O29P29Q29R29S29T29
Row 30A30B30C30D30E30F30G30H30I30J30K30L30M30N30O30P30Q30R30S30T30

CSS Transform Positioning

Elements positioned via CSS transform: translateY() instead of normal flow. The element is visually below the fold but its DOM position is at the top.

Content at the top of the container.

Transformed Element

This element is at the top of the DOM but visually positioned 400px down via transform.

Keyboard Tab Focus Scroll

A container with many focusable elements. Pressing Tab should scroll to bring the focused element into view.

Target
Main Page|Container|Modal TOS|Accordion|Virtual List|Shadow DOM