Web Page Scroll Top Adjustment via Touch Coordinate Variation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Mobile terminals with limited screen size and unsupported div scroll functionality prevent users from seamlessly scrolling individual contents areas, especially when the touch start event is set to preventDefault, limiting the usability of div scroll functions.
Innovation Solution
A system and method that utilize a user terminal and web page providing server to sense touch movement, calculate touch coordinate variations, determine scroll direction, and adjust the scrollTop value of individual contents areas to simulate scrolling, ensuring the scroll function works across all terminals, including those that do not support div scroll.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If div scroll is used on terminals that support it, then scrolling functionality is available, but it cannot be used on terminals that do not support div scroll or when preventDefault is set
Solution Approach 1:
The patent separates the scrolling functionality into two independent parts: (1) the touch event detection and coordinate calculation performed by the user terminal, and (2) the scrollTop value adjustment performed by the web page providing server. This segmentation allows the scrolling function to work on terminals regardless of their native div scroll support, as the terminal only needs to provide touch input while the server handles the actual scrolling logic.
Solution Approach 2:
The patent introduces an intermediary communication mechanism between the user terminal and the web page providing server. The terminal sends touch event information (coordinates, movement) to the server, which then calculates the appropriate scrollTop adjustment and returns it. This intermediary approach bypasses the limitation of native div scroll support and preventDefault restrictions, enabling universal scrolling functionality.
2Ease of operation
If overflow attribute is used to scroll div, then scrolling is possible on supported terminals, but it creates visual inconsistency and does not work on all terminals
Solution Approach 1:
The patent creates a universal scrolling solution that functions across all terminal types regardless of their native scroll support. By implementing scroll functionality through server-side scrollTop adjustment based on client-side touch detection, the system achieves multi-functionality that works both on terminals with div scroll support and those without, eliminating the need for overflow attribute workarounds.
3Object-affected harmful factors
If touch start event is set to preventDefault, then other touch interactions are prevented, but div scroll function becomes unusable
Solution Approach 1:
The patent extracts the scrolling functionality from the touch start event's preventDefault behavior. Instead of relying on the touch start event to initiate scrolling (which is blocked by preventDefault), the system uses touch move events and calculates scroll based on coordinate variations. This extraction allows scrolling to function independently of the preventDefault setting, maintaining both touch interaction control and scroll usability.
Data Source
AI summary
The present invention relates to a system and method for performing a scroll using a scrollTop attribute of a web page, which allows a user to feel as if an individual contents area is actually scrolled if movement of a touched state is sensed when a portion of an individual contents area is displayed on a screen of a user terminal, by calculating a variation of touch coordinates according to the sensed movement of the touched state, determining a scroll direction according to the calculated variation of touch coordinates, calculating a scroll length corresponding to the variation of touch coordinates according to the sensed movement of the touched state and adjusting a scrollTop value of the individual contents area as much as the calculated scroll length.