import { html } from '@design.estate/dees-element'; export const pageLongScroll = () => html`

Long Scroll Test Page

Section 1: Introduction

This is a long page designed to test scroll position preservation. Scroll down to see more content and then reload the page to verify that the scroll position is restored correctly.

The URL should update with scroll position parameters as you scroll, and when you reload the page, it should automatically scroll to the last position.

Placeholder Content Block 1

Section 2: Testing Scroll Behavior

As you scroll through this page, the dashboard should track your scroll position and update the URL accordingly. The updates should be debounced to avoid excessive URL changes.

Try scrolling quickly and slowly to see how the debouncing works. The URL should update smoothly without interfering with your scrolling experience.

Placeholder Content Block 2

Section 3: Reload Testing

Once you've scrolled to this section, try reloading the page. The page should automatically scroll back to this position after the content loads.

This demonstrates that the scroll position is being preserved across page reloads using URL parameters.

Placeholder Content Block 3

Section 4: Navigation Testing

Try navigating to a different element or page in the sidebar, then use the browser's back button to return here. The scroll position should be preserved.

This tests that the browser history correctly maintains scroll state for each navigation entry.

Placeholder Content Block 4

Section 5: Deep Scroll Testing

Keep scrolling! This page has plenty of content to ensure we can test scroll positions at various depths.

The scroll tracking should work reliably regardless of how far down the page you scroll.

Placeholder Content Block 5

Section 6: Performance Testing

Even with continuous scroll tracking, the page should remain responsive and smooth. The debouncing mechanism ensures that URL updates don't impact scrolling performance.

Try scrolling rapidly up and down to verify that the scrolling remains smooth.

Placeholder Content Block 6

Section 7: Sidebar Scroll Testing

Don't forget to test the sidebar scrolling as well! If the sidebar has enough items to scroll, its position should also be tracked and restored.

Both the main content and sidebar scroll positions should be preserved independently.

Placeholder Content Block 7

Section 8: Edge Cases

This section tests edge cases like scrolling to the very bottom of the page, then reloading.

The scroll restoration should handle these cases gracefully without any visual glitches or errors.

Placeholder Content Block 8

Section 9: Final Section

You've reached the end of the scroll test page! Try reloading from here to ensure that even the bottom-most scroll positions are correctly preserved.

The scroll position tracking has been successfully implemented if you can reload and return to this exact position.

`;