Page scrolling display processing method and device, equipment and storage medium

Abstract

The invention relates to the technical field of page display, and discloses a page scrolling display processing method and device, equipment and a storage medium. The page scrolling display processing method comprises the following steps: monitoring whether a current page has scrolling operation or not in real time; if the rolling operation exists in the current page, obtaining a rolling offset corresponding to the rolling operation; based on the rolling offset, determining a to-be-displayed target area of the current page and a rolling display strategy of the target area, the target area including one area or a plurality of adjacent areas of the current page; and in a viewport range of a current page, synchronously scrolling and displaying the target area based on the scrolling display strategy. By introducing the virtualization layout container and the rolling synchronization mechanism, synchronous rolling display of the head area, the middle virtual control area and the tail area of the page under the same rolling operation is achieved.

Description

Technical Field

[0001] This invention relates to the field of page display technology, and in particular to a page scrolling display processing method, apparatus, device, and storage medium. Background Technology

[0002] In traditional desktop graphics frameworks, virtual loading lists are widely used to efficiently render large datasets. The core of this technology lies in using data virtualization to create UI element instances only within the visible area, thus avoiding the memory consumption and I / O overhead of loading all data. Specifically, virtual loading lists dynamically calculate the virtual controls that need to be displayed in the current viewport, rendering only these visible items during page display and updating the rendered content in real time as the user scrolls the page, thereby improving performance in long list scenarios. For example, only the 10 visible card elements are instantiated during scrolling, while the remaining hundreds of card elements are deferred, thus optimizing memory usage and rendering efficiency.

[0003] Existing technologies have significant limitations when handling the header and footer of virtual loading lists. Typically, elements in both the header and footer areas are treated as fixed child elements of the page. This results in only the virtual loading list content in the middle of the page being scrollable, while the header and footer areas remain static. In other words, the header and footer areas cannot scroll synchronously with the virtual loading list content in the middle area. Consequently, in large-scale data scenarios such as live streaming lists, it is difficult to ensure the continuity of page scrolling, resulting in a disjointed scrolling experience and degrading the user's browsing experience. Summary of the Invention

[0004] The main objective of this invention is to provide a page scrolling display processing method, apparatus, device, and storage medium, aiming to solve the technical problem that existing pages based on virtual loading list technology cannot achieve overall synchronous scrolling of various parts of the page during the scrolling process.

[0005] The first aspect of this invention provides a page scrolling display processing method, wherein all page sub-elements in each area of ​​the page are registered in the same virtualized layout container, and the page scrolling display processing method includes: Real-time monitoring of whether scrolling occurs on the current page; If the current page is scrolling, then obtain the scroll offset corresponding to the scrolling operation; Based on the scroll offset, the target area to be displayed on the current page and the scroll display strategy of the target area are determined. The target area includes one area of ​​the current page or multiple adjacent areas. Within the viewport of the current page, the target area is synchronously scrolled and displayed based on the aforementioned scrolling display strategy.

[0006] Optionally, in a first implementation of the first aspect of the present invention, the page includes a header area, a middle area, and a footer area. The middle area is a virtual control area used to display virtually loaded virtual controls, and the height of the middle area is related to the number of displayed virtual controls. The header area is located above the middle area, and the upper boundary of the header area is aligned with the top boundary of the virtualized layout container. The footer area is located below the middle area, and the lower boundary of the footer area is aligned with the bottom boundary of the virtualized layout container.

[0007] Optionally, in a second implementation of the first aspect of the present invention, determining the target area to be displayed on the current page and the scrolling display strategy of the target area based on the scroll offset includes: Determine whether the scroll offset is less than the height of the head region; If the scroll offset is less than the height of the header area, then it is determined that the target area to be displayed on the current page includes part of the header area, and the scroll offset is used as the upward movement distance of the header area when scrolling the current page. If the scroll offset is greater than or equal to the height of the header area, then it is determined that the target area to be displayed on the current page does not include the header area. The scrolling display strategy for the head area includes: when the target area is scrolling synchronously, if the target area includes part of the head area, the head area is moved upward by the upward movement distance.

[0008] Optionally, in a third implementation of the first aspect of the present invention, determining the target area to be displayed on the current page and the scrolling display strategy of the target area based on the scroll offset further includes: Calculate the first difference between the scroll offset and the height of the head region; If the first difference is within a preset range, then the target area to be displayed on the current page is determined to include the middle area; Based on the first difference, the starting position of the intermediate region in the virtualized layout container is determined; Based on the starting position and the viewport height of the current page, the index range of the virtual controls to be rendered in the middle area is determined, wherein each of the virtual controls is located in the same virtual control list, and one index corresponds to one virtual control. The scrolling display strategy for the intermediate area includes: while synchronously scrolling the target area, rendering and displaying the virtual control corresponding to the index range.

[0009] Optionally, in a fourth implementation of the first aspect of the present invention, determining the target area to be displayed on the current page and the scrolling display strategy of the target area based on the scroll offset further includes: Calculate a first sum between the viewport height of the page and the height of the tail region, and calculate a second difference between the height of the virtualized layout container and the first sum; If the scroll offset is greater than the second difference, then it is determined that the target area to be displayed on the current page includes part of the tail area; Calculate a second sum between the scroll offset and the viewport height of the page, and calculate a third difference between the height of the virtualized layout container and the second sum. Use the third difference as the downward displacement distance of the tail area when scrolling the current page. If the sum of the scroll offset and the viewport height of the page is greater than or equal to the height of the virtualized layout container, then the target area to be displayed on the current page is determined to include the entire tail area. The scrolling display strategy for the tail area includes: when the target area is scrolling synchronously, if the target area includes part of the tail area, the tail area is moved downwards by the downward movement distance.

[0010] Optionally, in a fifth implementation of the first aspect of the present invention, the page scrolling display method further includes: When rendering and displaying the virtual control in the middle area within the viewport of the current page, multiple other virtual controls adjacent to the currently rendered virtual control are synchronously rendered from the list of virtual controls and cached in a preset buffer.

[0011] Optionally, in a sixth implementation of the first aspect of the present invention, the page scrolling display method further includes: When a new scrolling operation occurs, the visual tree instance of the virtual control corresponding to the previous scrolling operation is marked as recyclable and stored in the preset cache pool; When rendering and displaying the new virtual control in the middle area, determine whether there is a visual tree instance corresponding to the new virtual control in the cache pool; If a visual tree instance corresponding to the new virtual control exists in the cache pool, then the visual tree instance corresponding to the new virtual control is loaded into the middle area for display.

[0012] A second aspect of the present invention also provides a page scrolling display processing apparatus, wherein the page sub-elements of each area of ​​the page are all registered in the same virtualized layout container, and the page scrolling display processing apparatus includes: The monitoring module is used to monitor in real time whether there is a scrolling operation on the current page; The acquisition module is used to acquire the scroll offset corresponding to the scroll operation if there is a scroll operation on the current page. The determination module is used to determine the target area to be displayed on the current page and the scrolling display strategy of the target area based on the scroll offset. The target area includes one area of ​​the current page or multiple adjacent areas. The scrolling display module is used to synchronously scroll and display the target area within the viewport of the current page, based on the scrolling display strategy.

[0013] Optionally, in a first implementation of the second aspect of the present invention, the page includes a header area, a middle area, and a footer area. The middle area is a virtual control area used to display a list of virtually loaded virtual controls, and the height of the middle area is related to the number of virtual controls displayed. The header area is located above the middle area, and the upper boundary of the header area is aligned with the top boundary of the virtualized layout container. The footer area is located below the middle area, and the lower boundary of the footer area is aligned with the bottom boundary of the virtualized layout container.

[0014] Optionally, in a second implementation of the second aspect of the present invention, the determining module is specifically used for: Determine whether the scroll offset is less than the height of the head region; If the scroll offset is less than the height of the header area, then it is determined that the target area to be displayed on the current page includes part of the header area, and the scroll offset is used as the upward movement distance of the header area when scrolling the current page. If the scroll offset is greater than or equal to the height of the header area, then it is determined that the target area to be displayed on the current page does not include the header area. The scrolling display strategy for the head area includes: when the target area is scrolling synchronously, if the target area includes part of the head area, the head area is moved upward by the upward movement distance.

[0015] Optionally, in a third implementation of the second aspect of the present invention, the determining module is further configured to: Calculate the first difference between the scroll offset and the height of the head region; If the first difference is within a preset range, then the target area to be displayed on the current page is determined to include the middle area; Based on the first difference, the starting position of the intermediate region in the virtualized layout container is determined; Based on the starting position and the viewport height of the current page, the index range of the virtual controls to be rendered in the middle area is determined, wherein each of the virtual controls is located in the same virtual control list, and one index corresponds to one virtual control. The scrolling display strategy for the intermediate area includes: while synchronously scrolling the target area, rendering and displaying the virtual control corresponding to the index range.

[0016] Optionally, in a fourth implementation of the second aspect of the present invention, the determining module is further configured to: Calculate a first sum between the viewport height of the page and the height of the tail region, and calculate a second difference between the height of the virtualized layout container and the first sum; If the scroll offset is greater than the second difference, then it is determined that the target area to be displayed on the current page includes part of the tail area; Calculate a second sum between the scroll offset and the viewport height of the page, and calculate a third difference between the height of the virtualized layout container and the second sum. Use the third difference as the downward displacement distance of the tail area when scrolling the current page. If the sum of the scroll offset and the viewport height of the page is greater than or equal to the height of the virtualized layout container, then the target area to be displayed on the current page is determined to include the entire tail area. The scrolling display strategy for the tail area includes: when the target area is scrolling synchronously, if the target area includes part of the tail area, the tail area is moved downwards by the downward movement distance.

[0017] Optionally, in a fifth implementation of the second aspect of the present invention, the page scrolling display processing device further includes: The preloading module is used to render and display the virtual control in the middle area within the viewport of the current page, and simultaneously render and cache multiple other virtual controls adjacent to the currently rendered virtual control in the list of virtual controls in a preset buffer.

[0018] Optionally, in a sixth implementation of the second aspect of the present invention, the page scrolling display processing module further includes: The caching module is used to mark the visual tree instance of the virtual control corresponding to the previous scrolling operation as recyclable and store it in a preset cache pool when a new scrolling operation occurs; when rendering and displaying a new virtual control in the middle area, it determines whether there is a visual tree instance corresponding to the new virtual control in the cache pool; if there is a visual tree instance corresponding to the new virtual control in the cache pool, it loads the visual tree instance corresponding to the new virtual control into the middle area for display.

[0019] A third aspect of the present invention provides a computer device, comprising: a memory and at least one processor, wherein the memory stores instructions; the at least one processor invokes the instructions in the memory to cause the computer device to perform the page scrolling display processing method described above.

[0020] A fourth aspect of the present invention provides a computer-readable storage medium storing instructions that, when executed on a computer, cause the computer to perform the page scrolling display processing method described above.

[0021] The page scrolling display processing method provided by this invention establishes a unified scrolling context by registering all child elements of the page header area, the middle virtual loading list area, and the footer area into the same virtualized layout container. This ensures that all areas of the page share the same scroll offset and viewport range, avoiding the page scrolling fragmentation problem caused by different page areas being located in different containers in traditional solutions. Furthermore, this invention also sets up a scrolling synchronization mechanism for different areas of the page. When a page scrolling operation is detected, the target area to be displayed within the current page viewport range and the scrolling display strategy for the target area are determined in advance based on the scroll offset. Based on the pre-determined scrolling display strategy, the natural transition of each area of ​​the page during scrolling is ensured, achieving seamless synchronous scrolling without the need for additional layout recalculation, thus reducing system overhead. Attached Figure Description

[0022] Figure 1 This is a schematic diagram of one embodiment of the page scrolling display processing method in this invention; Figure 2 This is a schematic diagram of one embodiment of the page scrolling display processing device in this invention; Figure 3 This is a schematic diagram of one embodiment of the computer device in this invention. Detailed Implementation

[0023] The terms "first," "second," "third," "fourth," etc. (if present) in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" or "having" and any variations thereof are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0024] For ease of understanding, the specific process of the embodiments of the present invention is described below. Please refer to [link / reference]. Figure 1 In this embodiment of the invention, all page sub-elements in each area of ​​the page are registered in the same virtualized layout container. One embodiment of the page scrolling display processing method includes: 101. Monitor in real time whether there is scrolling on the current page; In this embodiment, the current page being monitored in real time is a visual carrier used to achieve overall content scrolling and efficient rendering. It typically includes multiple areas, each carrying different information display and interaction needs. Page sub-elements are specific control instances within each area, such as menu bars, data items, media players, information flow cards, and operation buttons. These page sub-elements are all registered in the same virtualized layout container. By constructing a single scrolling context, it is ensured that each area shares the same scroll offset and viewport range, thereby achieving synchronous scrolling of each area. Scrolling operation refers to the behavior of the user triggering the vertical displacement of page content through input methods such as mouse wheel, touch swipe, or scroll bar dragging. Specifically, it can be monitored by listening to scroll events, capturing displacement signals from input devices, or detecting changes in scroll bar position, thereby providing triggering conditions for subsequent scroll offset calculation and synchronous scrolling of areas.

[0025] Optionally, in some embodiments, the page includes a header area, a middle area, and a footer area. The middle area is a virtual control area used to display dynamically loaded virtual data items, and its height changes dynamically with the amount of data. The header area is located above the middle area, and its upper boundary is aligned with the top of the virtualized layout container. The footer area is located below the middle area, and its lower boundary is aligned with the bottom of the container.

[0026] In this optional embodiment, three areas are specifically defined for the page. The header area is typically used to carry frequently accessed functional entry points and contextual information, such as the page navigation bar, brand logo, real-time status indicator, media player control, or header image. The footer area is typically used to carry content expansion and interactive auxiliary controls, such as pagination indicator, refresh / load more button, copyright information, or user feedback entry point. The height of these two areas can be pre-set according to content layout requirements during the initialization phase. After initialization, since structural adjustments in the height direction are usually not triggered, they can be used as fixed size parameters in the calculation of the total page height during subsequent scrolling calculations. For situations where the size changes due to height direction expansion (such as header navigation expansion or footer refresh prompts), a size change monitoring mechanism can be established to monitor dynamic updates of the content in these two areas and adjust the total page height and scroll range in real time. In addition, independent resource management logic can be set for the head and tail sections respectively. For example, an incremental update strategy can be adopted to redraw only the changed parts of the content update. Efficient updates can be achieved through partial redrawing, avoiding the performance overhead caused by completely rebuilding the visualization tree when updating content.

[0027] In this optional embodiment, the middle area between the header and footer areas is typically used to hold large-scale dynamic data items on the page, such as live stream list cards, advertising cards, information feed content, or product items—core interactive elements. In this invention, this middle area is specifically configured as a virtual control area for implementing virtualized data loading. Through virtual loading technology, interactive element instances are created only within the visible area. Based on the on-demand loading characteristic of virtual loading, the height of this middle area dynamically changes with the number of virtual controls currently displayed. For example, when the user scrolls to load new data, the height of the middle area increases synchronously with the cumulative height of the newly added cards; conversely, when the number of data items decreases, the height shrinks accordingly, thus adapting to the data scale to avoid content overflow or blank space issues caused by traditional fixed-height containers. During subsequent scrolling calculations, the dynamic height of the middle area can be monitored in real time to ensure accurate calculation of the total page height, providing a foundation for the smoothness of the overall scrolling.

[0028] Optionally, in some embodiments, before monitoring in real time whether there is a scrolling operation on the current page, the method further includes: registering the page sub-elements of each area of ​​the current page in the same virtualized layout container.

[0029] In this optional embodiment, before monitoring the scrolling operation, the page sub-elements can be registered according to the aforementioned requirement that "all page sub-elements in each area of ​​the current page are registered in the same virtualized layout container". The specific registration process can be implemented by inheriting and extending the virtualized layout container. Taking the aforementioned case including the header, footer, and middle areas as an example: First, the virtualized layout container in the traditional desktop graphics framework can be inherited to create a custom virtualized layout container as the main container for the entire scrolling content, and the header and footer areas can be bound as fixed sub-elements. Next, by registering the virtual list areas to the same container level, a unified scrolling context can be established to ensure that each area shares the same scrolling offset and viewport range, avoiding the scrolling asynchrony problem caused by traditional multi-container nesting. After that, by setting the rendering priority, it can be ensured that each area maintains a clear visual hierarchy in the depth direction and is arranged sequentially in the height direction, avoiding occlusion or misalignment between the fixed areas and the list content during scrolling. In addition, the container's sub-element binding strategy can be configured so that the header and footer areas do not trigger additional virtualization instantiation logic, but only participate in scrolling calculations as fixed-size areas, while the virtual list maintains its on-demand loading characteristic. By inheriting and extending this custom virtualized layout container, the scrolling logic of fixed areas and virtual lists can be integrated, the size calculation and resource allocation of each area can be uniformly managed, and seamless synchronous scrolling of areas such as the header, virtual controls and the tail can be achieved.

[0030] 102. If the current page has a scrolling operation, obtain the scroll offset corresponding to the scrolling operation; In this embodiment, when a scrolling operation occurs on the current page, a corresponding scroll offset is generated. This scroll offset refers to the displacement distance of the current page content in the height direction relative to the initial position of the virtualized layout container, representing the degree and direction of the overall scrolling of the current page. In this invention, the offset of the top of the viewport range can be used as the scroll offset. Since the page sub-elements of each area of ​​the current page can scroll synchronously after being registered in the same virtualized layout container, the scroll offset can accurately describe the real-time positional relationship of each area in the viewport, serving as a quantitative benchmark parameter for determining the display status of the area and scheduling resources, so as to allow for subsequent dynamic adjustment of the visible range of the target area and the virtual control loading strategy. The scroll offset can be obtained by reading from the application interface that listens for scrolling events, calculated based on the height parameters of the current page and the viewport, or determined by back-calculation from the real-time position of the head / tail area. Subsequently, based on the real-time height of each area using the scroll offset, the upward movement distance of the head, the downward movement distance of the tail, and the rendering index range of the virtual controls in the middle area can be accurately calculated, so as to dynamically trigger the preloading and delayed recycling mechanism to achieve efficient resource allocation and a low-latency scrolling experience.

[0031] 103. Based on the scroll offset, determine the target area to be displayed on the current page and the scrolling display strategy for the target area; 104. Within the viewport of the current page, the target area is synchronously scrolled and displayed based on the scrolling display strategy.

[0032] In this embodiment, the target area to be displayed on the current page refers to the content area that needs to be dynamically rendered within the viewport range based on the current scroll offset, used to achieve resource-focused rendering and scroll context coherence. This target area may specifically include one area of ​​the current page or multiple adjacent areas, such as a single header area (when the scroll offset does not exceed the header height and the viewport range does not touch the middle area), a single middle area (when the scroll offset completely exceeds the header height and the viewport range does not touch the tail), a single tail area (when the scroll offset completely exceeds the sum of the header and middle area heights), a header and middle area (when the scroll offset does not exceed the header height, the viewport range touches the middle area but not the tail area), a middle and tail area (when the scroll offset completely exceeds the header height and the viewport range touches both the middle and tail areas), or three areas (when the scroll offset does not exceed the header height and the viewport range touches both the middle and tail areas), etc. These areas are linked based on the current page layout constraints, a unified scroll offset, or a dynamic area switching algorithm, thereby ensuring a natural transition between areas during scrolling without any layout fragmentation.

[0033] In this embodiment, the scrolling display strategy corresponding to the target area refers to the set of dynamic display rules for the structure of the target area on the current page during the scrolling operation. Specifically, this scrolling display strategy may include pre-defined logic for visibility determination, position adjustment, and resource scheduling, as well as flexible triggering of preloading and delayed recycling based on the relationship between scroll offset and area size. After determining the scrolling display strategy, the positions of each area can be adjusted, virtual controls rendered on demand, and resources scheduled within the viewport of the current page according to the corresponding scroll offset, the height parameters of each area, and the viewport size. This achieves the rendering and display of the target area within the viewport, resulting in a seamless synchronous scrolling effect. This synchronous scrolling method not only avoids synchronous delay and repeated rendering problems but also reduces layout recalculation overhead. It can precisely control the rendering range and resource allocation of each area, thereby achieving a low memory footprint and high responsiveness overall scrolling effect. It is particularly effective in ensuring interface smoothness and low-latency visualization in big data scenarios such as live stream lists.

[0034] Optionally, in some embodiments, determining the target area to be displayed on the current page and the scrolling display strategy of the target area based on the scroll offset includes: determining whether the scroll offset is less than the height of the header area; if the scroll offset is less than the height of the header area, then determining that the target area to be displayed on the current page includes part of the header area, and using the scroll offset as the upward movement distance of the header area when scrolling the current page; if the scroll offset is greater than or equal to the height of the header area, then determining that the target area to be displayed on the current page does not include the header area; wherein, the scrolling display strategy of the header area includes: when synchronously scrolling the target area, if the target area includes part of the header area, then moving the header area upward by the upward movement distance.

[0035] This optional embodiment provides a method for determining whether a target area contains a header area, and for implementing synchronized scrolling through a scrolling display strategy when the target area contains a header area. Specifically, when the scroll offset is less than the height of the header area, it indicates that the overall upward movement of the current page content has not exceeded the height of the header area. At this time, the top of the viewport is still within the header area, therefore the target area contains the header area. Since the scroll offset can directly reflect the vertical displacement of the content relative to the initial position of the viewport, and this scroll offset is a unified scrolling reference for each area, its value can accurately characterize the vertical displacement distance that each area needs to move synchronously. Therefore, this scroll offset can be used as the upward movement distance of the header area, ensuring that the scrolling displacement parameters of the header area can be synchronized with other areas, avoiding visual gaps or content overlap caused by independent calculation of the offset. Conversely, if the scroll offset is greater than or equal to the height of the header area, it indicates that the header area has completely moved out of the viewport range, and the top of the viewport has entered the middle area. At this time, the target area no longer contains the header area, and no additional rendering or position adjustment of the header area is required subsequently. Through this dynamic visibility determination and precise displacement control strategy, the header area can achieve a natural transition from being partially visible to completely exiting the viewport. This avoids the sense of content fragmentation caused by traditional fixed header designs and reduces unnecessary rendering of the header area when the target area does not include it. This helps to reduce the consumption of computing resources and improve the current page scrolling response speed.

[0036] Optionally, in some embodiments, determining the target area to be displayed on the current page and the scrolling display strategy of the target area based on the scroll offset further includes: calculating a first difference between the scroll offset and the height of the header area; if the first difference is within a preset range, determining that the target area to be displayed on the current page includes the middle area; determining the starting position of the middle area in the virtualized layout container based on the first difference; determining the index range of the virtual controls to be rendered in the middle area based on the starting position and the viewport height of the current page, wherein each virtual control is located in the same virtual control list, and one index corresponds to one virtual control; wherein the scrolling display strategy of the middle area includes: rendering and displaying the virtual controls corresponding to the index range while synchronously scrolling and displaying the target area.

[0037] In this optional embodiment, a method is provided for determining the visible range of the intermediate region and performing scrolling display. First, a first difference between the scroll offset and the height of the head region is calculated (first difference = scroll offset - head region height). When the first difference is negative, the top of the viewport is in the head region, and the head region has not completely exited the viewport, meaning the target region includes the head region. When the first difference is positive, the top of the viewport has entered the intermediate region, and the head region has completely exited the viewport, meaning the target region does not include the head region. The preset range corresponding to the first difference is a preset threshold range determined based on the height of each region and the height of the viewport range. This range is used to determine whether the target region includes the intermediate region and whether to trigger the corresponding scrolling display strategy. When the first difference is within this preset range, it indicates that the intermediate region is partially or completely within the viewport range, meaning the target region includes the intermediate region. If the first difference is not within the preset range, it usually indicates that the middle area has not yet entered the viewport (the first difference is below the lower limit of the range), or that the middle area has completely moved out of the viewport (the first difference is above the upper limit of the range). In these cases, the middle area does not need to render virtual controls; it only maintains the container's placeholder state to maintain the current page's total height calculation. Furthermore, this first difference also reflects the starting position of the middle area within the virtualized layout container, that is, the distance in the height direction from the upper boundary of the middle area to the top of the container, which can be used to determine the starting coordinates for rendering virtual controls.

[0038] In this optional embodiment, after determining the starting position of the intermediate region and the viewport height of the current page, the range of virtual controls to be rendered in the intermediate region can be further determined. Specifically, the starting position can be used to determine the rendering starting point of the intermediate region within the virtualized layout container, while the viewport height and starting position of the current page can be used to determine the span of the visible area within the intermediate region in the height direction, thereby determining the ending position of the virtual controls displayed within the viewport. Based on this, the present invention specifically defines the boundaries of the virtual controls to be instantiated through an index range, so as to render all data items stored in the virtual control list on demand. The virtual list control is a dynamic management structure based on data index mapping. For example, by arranging multiple virtual controls side-by-side along the width direction within a continuous sub-range in the height direction, a complete intermediate region content is formed. It stores the metadata of the virtual controls in data order and instantiates actual page sub-elements only within the index range, realizing on-demand loading and resource recycling of virtual controls.

[0039] In this optional embodiment, the index range refers to a continuous integer interval consisting of a start index and an end index. It marks the position boundary from the first control to be rendered to the last control in the virtual control list. It can be determined based on the start and end positions of the intermediate area obtained above. For example, the virtual control corresponding to the start index is determined by dividing the start position by the height of a single virtual control and rounding down, and the virtual control corresponding to the end index is determined by dividing the end position by the height of a single virtual control, rounding up, and subtracting one. Combined with the span of the start and end positions, the index range of the number and position of virtual controls to be rendered is determined. The virtual controls within the index range are instantiated and rendered to the viewport. Thus, during the scrolling display of the intermediate area, only the controls in the current viewport and the critical area are loaded, achieving a low memory usage virtual control rendering effect. Meanwhile, since the starting and ending positions are constrained and linked with the scroll offset shared by each region and the associated head or tail region, the seamless connection of the boundaries of each region can be maintained if the middle region and the head or tail region need to be rendered at the same time during the scrolling process, thus presenting an overall scrolling effect in which the head, middle, and tail regions move synchronously.

[0040] Optionally, in some embodiments, determining the target area to be displayed on the current page and the scrolling display strategy of the target area based on the scroll offset further includes: calculating a first sum between the viewport height of the current page and the height of the tail area, and calculating a second difference between the height of the virtualized layout container and the first sum; if the scroll offset is greater than the second difference, then it is determined that the target area to be displayed on the current page includes a portion of the tail area; calculating a second sum between the scroll offset and the viewport height of the current page, and calculating a third difference between the height of the virtualized layout container and the second sum, using the third difference as the downward shift distance of the tail area when scrolling the current page; if the sum of the scroll offset and the viewport height of the current page is greater than or equal to the height of the virtualized layout container, then it is determined that the target area to be displayed on the current page includes the entire tail area; wherein, the scrolling display strategy of the tail area includes: when synchronously scrolling the target area, if the target area includes a portion of the tail area, then the tail area is moved downward by the downward shift distance.

[0041] In this optional embodiment, a method is provided for calculating the visible range of the tail region and performing corresponding scrolling display. The second difference is calculated by subtracting the viewport height and the tail region height from the height of the virtualized layout container, representing the critical threshold for the tail region to enter the viewport. When the scroll offset is greater than the second difference, it corresponds to the bottom of the viewport already touching the tail region, meaning the target area includes at least part of the tail region. If, while the scroll offset is greater than the second difference, the sum of the scroll offset and the current page's viewport height is greater than or equal to the height of the virtualized layout container, it indicates the tail region has completely entered the viewport, meaning the target area includes the entire tail region, and the tail region needs to be aligned with the bottom of the container. If the scroll offset is not greater than the second difference, it corresponds to the tail region not yet entering the viewport or the tail region not entering the viewport at all, meaning the target area does not include the tail region, and no additional position adjustment or rendering of the tail region is required, avoiding unnecessary layout calculations and resource consumption.

[0042] In this optional embodiment, after determining that the tail region is partially visible, its downward displacement distance can be further determined. Specifically, a third difference can be calculated by subtracting the scroll offset and viewport height from the height of the virtualized layout container. This third difference represents the displacement of the tail region relative to the bottom of the viewport in the height direction, i.e., the number of pixels the tail region needs to move downward. Since this third difference is based on the quantization result of a unified scroll offset and container size, reflecting the real-time positional relationship between the tail region and the bottom of the viewport, it can be used as the downward displacement distance of the tail region to ensure that the scroll displacement parameters of the tail region are consistent with those of the middle and head regions. During the actual scrolling display process, the position coordinates of the tail region can be dynamically adjusted according to this downward displacement distance to determine the portion of the tail region that needs to be displayed within the visible range and the offset, achieving seamless connection between the tail region and the middle and head regions. Meanwhile, since each region shares a unified scroll offset and is linked with the aforementioned head region and middle region based on the same virtualized layout container, the tail region can maintain positional coordination with the head region and middle region during synchronous scrolling, thus achieving overall scrolling continuity and low-latency response.

[0043] Optionally, in some embodiments, the page scrolling display processing method further includes: when rendering and displaying the virtual control in the middle area within the viewport of the current page, simultaneously rendering multiple other virtual controls adjacent to the currently rendered virtual control from the list of virtual controls and caching them in a preset buffer.

[0044] In this optional embodiment, a preloading mechanism is provided to optimize the loading timing and resource scheduling of virtual controls through a pre-set buffer. The pre-set buffer refers to an additional area set outside the visible range of the virtual list, used to pre-instantiate and cache virtual controls that are about to enter the viewport, thereby reducing loading latency during rapid scrolling. During scrolling of the list in this intermediate area, the pre-set buffer can pre-load virtual controls in critical areas, thus achieving smooth transitions and resource reuse of virtual controls. This ensures controllable memory usage while also guaranteeing the smoothness of the current page display during rapid scrolling, providing technical support for a low-latency visual experience.

[0045] In this optional embodiment, the preset buffer may specifically include an upper buffer for caching virtual controls that are about to enter the visible area due to scrolling upwards above the viewport, and a lower buffer for caching virtual controls that are about to enter the visible area due to scrolling downwards below the viewport. During upward scrolling of the current page, if the top of the viewport touches the upper buffer threshold, the pre-cached virtual controls in the upper buffer can be activated sequentially, and after the scrolling operation continues, the control instances in the upper buffer are gradually moved into the viewport for display. Similarly, during downward scrolling of the current page, if the bottom of the viewport touches the lower buffer threshold, the pre-loaded virtual controls in the lower buffer can complete data binding, and after the scrolling operation continues, the control instances in the lower buffer are gradually moved into the viewport for display. Simultaneously, after the scrolling operation stops, a recycling mechanism can be used to perform batch recycling of control instances in the buffer that exceed the threshold range. For example, when control instances in the preset buffer are completely moved out of the viewport and buffer boundaries, or after a preset delay time after scrolling stops, or when the number of cache pool instances reaches a preset storage limit, idle control instances in the preset buffer can be cleared to ensure dynamic balance of memory resources and avoid the buffer from occupying system resources without limit. The setting of the upper and lower buffers ensures that the scrolling direction is precisely matched with the control loading logic. These buffers serve as dynamic transition zones between the viewport and non-visible areas. By pre-caching adjacent area controls, resource reuse is achieved, which avoids the frequent creation and destruction of control instances, effectively reducing loading delays and thread blocking. Furthermore, it avoids visual fragmentation caused by current page flickering and content breaks, effectively balancing preloaded resource consumption and scrolling response speed, further improving scrolling smoothness and user experience consistency.

[0046] Optionally, in some embodiments, the page scrolling display processing method further includes: when a new scrolling operation exists, marking the visual tree instance of the virtual control corresponding to the previous scrolling operation as recyclable and storing it in a preset cache pool; when rendering and displaying a new virtual control in the middle area, determining whether there is a visual tree instance corresponding to the new virtual control in the cache pool; if there is a visual tree instance corresponding to the new virtual control in the cache pool, loading the visual tree instance corresponding to the new virtual control into the middle area for display.

[0047] In this optional embodiment, a caching mechanism for the recycling and reuse of virtual control instances based on a cache pool is provided. The visual tree instance of a virtual control refers to a tree structure that carries control layout information, style attributes, and data binding relationships, used for control rendering and interactive responses. When a new scrolling operation is triggered, virtual controls that have moved out of the viewport and buffer area in the previous scrolling cycle are marked as "recyclable" and stored in a preset cache pool, instead of being directly destroyed as visual tree instances. This process implements a "delayed recycling" mechanism, delaying batch recycling until scrolling stops, avoiding frequent instance destruction operations during high-frequency scrolling that could block the main thread. When rendering a new virtual control, the cache pool is queried first. If a matching reusable instance exists, it is retrieved directly from the cache pool, and the latest data source is synchronized through a dynamic data context inheritance mechanism, achieving an efficient update mode of "instance reuse + data refresh". If no available instance is found in the cache pool, a new visual tree instantiation process is triggered, creating a new visual tree instance based on the metadata of the virtual control list, and rendering it to the central area for display after data binding is completed. This mechanism significantly reduces control creation overhead through the recycling and reuse of card instances. Especially in scenarios with infinitely scrolling lists, it avoids performance fluctuations caused by frequent creation / destruction of controls in traditional solutions, thereby maintaining interface smoothness.

[0048] above Figure 1 The page scrolling display processing method in the embodiments of the present invention has been described. The page scrolling display processing apparatus in the embodiments of the present invention is described below. All page sub-elements in each area of ​​the page are registered in the same virtualized layout container. Please refer to [link to relevant documentation]. Figure 3 One embodiment of the page scrolling display processing device in this invention includes: Monitoring module 201 is used to monitor in real time whether there is a scrolling operation on the current page; The acquisition module 202 is used to acquire the scroll offset corresponding to the scroll operation when there is a scroll operation on the current page; The determination module 203 is used to determine the target area to be displayed on the current page and the scrolling display strategy of the target area based on the scroll offset. The target area includes one area of ​​the current page or multiple adjacent areas. The scrolling display module 204 is used to synchronously scroll and display the target area within the viewport of the current page based on a scrolling display strategy.

[0049] Optionally, the page includes a header area, a middle area, and a footer area. The middle area is a virtual control area used to display a list of virtual controls that are loaded virtually, and the height of the middle area is related to the number of virtual controls displayed. The header area is located above the middle area, and the upper boundary of the header area is aligned with the top boundary of the virtualized layout container. The footer area is located below the middle area, and the lower boundary of the footer area is aligned with the bottom boundary of the virtualized layout container.

[0050] Optionally, the determining module 203 is specifically used to: determine whether the scroll offset is less than the height of the header area; if the scroll offset is less than the height of the header area, then determine that the target area to be displayed on the current page includes part of the header area, and use the scroll offset as the upward movement distance of the header area when scrolling the current page; if the scroll offset is greater than or equal to the height of the header area, then determine that the target area to be displayed on the current page does not include the header area; wherein, the scrolling display strategy of the header area includes: when synchronously scrolling the target area, if the target area includes part of the header area, then move the header area upward by the upward movement distance.

[0051] Optionally, the determining module 203 is further configured to: calculate a first difference between the scroll offset and the height of the header area; if the first difference is within a preset range, determine that the target area to be displayed on the current page includes the middle area; based on the first difference, determine the starting position of the middle area in the virtualized layout container; based on the starting position and the viewport height of the current page, determine the index range of the virtual controls to be rendered in the middle area, wherein each virtual control is located in the same virtual control list, and one index corresponds to one virtual control; wherein the scrolling display strategy of the middle area includes: rendering and displaying the virtual controls corresponding to the index range while synchronously scrolling and displaying the target area.

[0052] Optionally, the determining module 203 is further configured to: calculate a first sum between the viewport height of the current page and the height of the tail area, and calculate a second difference between the height of the virtualized layout container and the first sum; if the scroll offset is greater than the second difference, determine that the target area to be displayed on the current page includes part of the tail area; calculate a second sum between the scroll offset and the viewport height of the current page, and calculate a third difference between the height of the virtualized layout container and the second sum, using the third difference as the downward shift distance of the tail area when scrolling the current page; if the sum of the scroll offset and the viewport height of the current page is greater than or equal to the height of the virtualized layout container, determine that the target area to be displayed on the current page includes the entire tail area; wherein, the scrolling display strategy of the tail area includes: when synchronously scrolling the target area, if the target area includes part of the tail area, then the tail area is moved downward by the downward shift distance.

[0053] Optionally, the page scrolling display processing device further includes: a preloading module, used to simultaneously render multiple other virtual controls adjacent to the currently rendered virtual control from the list of virtual controls and cache them in a preset buffer when rendering and displaying the virtual control in the middle area within the viewport of the current page.

[0054] Optionally, the page scrolling display processing module also includes: a caching module, used to mark the visual tree instance of the virtual control corresponding to the previous scrolling operation as recyclable and store it in a preset cache pool when a new scrolling operation occurs; when rendering and displaying a new virtual control in the middle area, it determines whether there is a visual tree instance corresponding to the new virtual control in the cache pool; if there is a visual tree instance corresponding to the new virtual control in the cache pool, it loads the visual tree instance corresponding to the new virtual control into the middle area for display.

[0055] Since the embodiments of the device part correspond to the embodiments of the above method, the description of the page scrolling display processing device provided by the present invention should refer to the above method embodiments. The present invention will not be described again here, and it has the same beneficial effects as the above page scrolling display processing method.

[0056] above Figure 2 The page scrolling display processing device in this embodiment of the invention will be described in detail from the perspective of modular functional entities. The computer device in this embodiment of the invention will be described in detail from the perspective of hardware processing.

[0057] Figure 3 This is a schematic diagram of a computer device 300 provided in an embodiment of the present invention. The computer device 300 can vary significantly due to different configurations or performance characteristics. It may include one or more Central Processing Units (CPUs) 310 (e.g., one or more processors) and a memory 320, and one or more storage media 330 (e.g., one or more mass storage devices) for storing application programs 333 or data 332. The memory 320 and storage media 330 can be temporary or persistent storage. The program stored in the storage media 330 may include one or more modules (not shown in the diagram), each module including a series of instruction operations on the computer device 300. Furthermore, the processor 310 may be configured to communicate with the storage media 330 and execute the series of instruction operations in the storage media 330 on the computer device 300.

[0058] Computer device 300 may also include one or more power supplies 340, one or more wired or wireless network interfaces 350, one or more input / output interfaces 360, and / or one or more operating systems 331. Those skilled in the art will understand that... Figure 3 The computer device structure shown does not constitute a limitation on the computer device and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0059] The present invention also provides a computer device, the computer device including a memory and a processor, the memory storing computer-readable instructions, which, when executed by the processor, cause the processor to perform the steps of the page scrolling display processing method in the above embodiments.

[0060] The present invention also provides a computer-readable storage medium, which may be a non-volatile computer-readable storage medium or a volatile computer-readable storage medium, wherein the computer-readable storage medium stores instructions that, when the instructions are executed on a computer, cause the computer to perform the steps of the page scrolling display processing method.

[0061] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0062] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0063] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A page scroll display processing method characterized by comprising: The page sub-elements of the regions of the page are registered in the same virtual layout container, and the page scrolling display processing method comprises: Real-time monitoring whether there is a scrolling operation on the current page; If there is a scrolling operation on the current page, obtaining a scrolling offset corresponding to the scrolling operation; Based on the scrolling offset, determining a target region to be displayed on the current page and a scrolling display strategy of the target region, the target region comprising one region or multiple adjacent regions of the current page; Within the viewport range of the current page, based on the scrolling display strategy, synchronously scrolling and displaying the target region.

2. The page scroll display processing method according to claim 1, characterized by, The page comprises a header region, a middle region and a tail region, the middle region being a virtual control region for displaying virtually loaded virtual controls, the height of the middle region being related to the number of displayed virtual controls; the header region is located at the upper part of the middle region, and the upper boundary of the header region is aligned with the top boundary of the virtual layout container; the tail region is located at the lower part of the middle region, and the lower boundary of the tail region is aligned with the bottom boundary of the virtual layout container.

3. The page scroll display processing method according to claim 2, characterized by, The method comprises: Determining whether the scrolling offset is smaller than the height of the header region; If the scrolling offset is smaller than the height of the header region, determining that the target region to be displayed on the current page comprises part of the header region, and taking the scrolling offset as the upward moving distance of the header region when scrolling and displaying the current page; If the scrolling offset is greater than or equal to the height of the header region, determining that the target region to be displayed on the current page does not comprise the header region; The scrolling display strategy of the header region comprises: when synchronously scrolling and displaying the target region, if the target region comprises part of the header region, moving the header region upward by the upward moving distance.

4. The page scroll display processing method according to claim 2, characterized by, The method further comprises: Calculating a first difference between the scrolling offset and the height of the header region; If the first difference is within a preset range, determining that the target region to be displayed on the current page comprises the middle region; Based on the first difference, determining the starting position of the middle region in the virtual layout container; Based on the starting position and the viewport height of the current page, determining the index range of the virtual controls to be rendered in the middle region, wherein each of the virtual controls is located in a same virtual control list, and one index corresponds to one virtual control; The scrolling display strategy of the middle region comprises: when synchronously scrolling and displaying the target region, rendering and displaying the virtual controls corresponding to the index range.

5. The page scroll display processing method according to claim 2, characterized by, The method further comprises: calculating a first sum value between a viewport height of the page and a height of the tail region, and calculating a second difference value between a height of the virtualized layout container and the first sum value; if the scroll offset is greater than the second difference value, determining that a target region to be displayed in the current page includes part of the tail region; calculating a second sum value between the scroll offset and the viewport height of the page, and calculating a third difference value between the height of the virtualized layout container and the second sum value, and taking the third difference value as a downward moving distance of the tail region in the scroll display of the current page; if the sum of the scroll offset and the viewport height of the page is greater than or equal to the height of the virtualized layout container, determining that the target region to be displayed in the current page includes all of the tail region; wherein the scroll display strategy of the tail region includes: in the synchronous scroll display of the target region, if the target region includes part of the tail region, moving the tail region downward by the downward moving distance.

6. The page scroll display processing method according to any one of claims 2 to 5, characterized by, The page scroll display processing method further includes: in the viewport range of the current page, when rendering and displaying the virtual control of the middle region, synchronously rendering and caching into a preset buffer area, from a virtual control list, a plurality of other virtual controls adjacent to the currently rendered virtual control.

7. The page scroll display processing method according to any one of claims 2 to 5, characterized by, The page scroll display processing method further includes: when there is a new scroll operation, marking a visual tree instance of a virtual control corresponding to a previous scroll operation as a recyclable state and storing into a preset cache pool; when rendering and displaying a new virtual control of the middle region, judging whether there is a visual tree instance corresponding to the new virtual control in the cache pool; if there is a visual tree instance corresponding to the new virtual control in the cache pool, loading the visual tree instance corresponding to the new virtual control into the middle region for display.

8. A page scroll display processing apparatus characterized by comprising: The page scroll display processing apparatus includes: a monitoring module for monitoring in real time whether there is a scroll operation in the current page; an obtaining module for obtaining a scroll offset corresponding to the scroll operation if there is a scroll operation in the current page; a determining module for determining a target region to be displayed in the current page and a scroll display strategy of the target region based on the scroll offset, the target region including one region or a plurality of adjacent regions of the current page; a scroll display module for synchronously scroll displaying the target region in the viewport range of the current page based on the scroll display strategy.

9. A computer device, comprising: The computer device includes a memory and at least one processor, and the memory has instructions stored therein; the at least one processor invokes the instructions in the memory, so that the computer device executes the page scroll display processing method according to any one of claims 1-7.

10. A computer-readable storage medium having stored thereon instructions, the instructions comprising, The instructions are executed by the processor to implement the page scroll display processing method according to any one of claims 1-7.

Images