Page interaction methods and devices

Abstract

This application provides a page interaction method, apparatus, computer device, computer-readable storage medium, and computer program product, belonging to the field of software development technology. The page interaction method includes: determining whether content overflow exists in a target layout container when content changes within the container; determining the overflow direction of the overflow container when overflow exists; generating and displaying a floating overflow interaction control based on the overflow direction, wherein the overflow interaction control at least indicates the presence of overflow content in the overflow direction and can interact according to received interaction instructions. The technical solution of this application embodiment can achieve WYSIWYG without disrupting visual design, while preventing users from ignoring content outside the visible area.

Description

Technical Field

[0001] This application relates to the field of software development technology, and in particular to a page interaction method, apparatus, computer device, computer-readable storage medium, and computer program product. Background Technology

[0002] In the realm of low-code platforms or visual web editors, users typically build pages by dragging and dropping components. Layout containers are the most basic components in such platforms, used to hold images, text, or other sub-components and to control the arrangement of these components.

[0003] When the content within a layout container exceeds the container's original size, relevant technologies either display a native scrollbar or hide the excess content. However, native scrollbars occupy space and their styles are uncontrollable, potentially obscuring content or compressing the layout, preventing users from accurately previewing the final effect on mobile devices or in scrollbar-free environments. Conversely, hiding content can cause users to overlook content outside the visible area, leading to issues like missing content or layout errors after deployment.

[0004] It should be noted that the above content is not necessarily prior art, nor is it intended to limit the scope of patent protection of this application. Summary of the Invention

[0005] This application provides a page interaction method, apparatus, computer device, computer-readable storage medium, and computer program product to solve or alleviate one or more of the technical problems mentioned above.

[0006] One aspect of this application provides a page interaction method, the method comprising:

[0007] In the event of changes to the content within the target layout container, determine whether the target layout container experiences content overflow. In the case where the target layout container overflows, determine the overflow direction of the target layout container; A floating overflow interaction control is generated and displayed based on the overflow direction. The overflow interaction control is at least used to indicate that there is overflow content in the overflow direction, and can interact according to the received interaction instructions.

[0008] Optionally, determining whether the target layout container has content overflow includes: Obtain the viewport size parameters and total content size parameters of the target layout container. The viewport size parameters include the viewport width and viewport height, and the total content size parameters include the total content width and total content height. The viewport size parameter is compared with the total content size parameter. If the viewport width is less than the total content width or the viewport height is less than the total content height, it is determined that there is content overflow.

[0009] Optionally, determining the overflow direction of the target layout container includes: When the viewport width is less than the total width of the content, the overflow direction of the target layout container is determined to include horizontal overflow; When the viewport height is less than the total height of the content, the overflow direction of the target layout container is determined to include vertical overflow; When the viewport width is less than the total width of the content and the viewport height is less than the total height of the content, the overflow direction of the target layout container is determined to be bidirectional overflow.

[0010] Optionally, after generating and displaying the floating overflow interactive control based on the overflow direction, the method further includes: When the overflow interaction control receives the first target interaction instruction, the overflow interaction control is hidden.

[0011] Optionally, the method further includes: When the overflow interaction control is hidden, the current content overflow state of the target layout container is obtained and recorded. The current content overflow state includes whether there is content overflow and the overflow direction. The content changes of the target layout container are continuously monitored. If the content overflow state of the target layout container changes from no content overflow to content overflow again, the overflow interaction control is redisplayed.

[0012] Optionally, after obtaining and recording the current content overflow state of the target layout container, the method further includes: If the overflow state of the target layout container changes to a change in the overflow direction, the overflow interaction control is redisplayed.

[0013] Optionally, after generating and displaying the floating overflow interactive control based on the overflow direction, the method further includes: When the overflow interactive control receives a second target interactive instruction, the viewport width and / or the viewport height are expanded according to the total content size parameter.

[0014] Another aspect of this application provides a page interaction device, the device comprising: The first determining module is used to determine whether there is content overflow in the target layout container when the content in the target layout container changes. The second determining module is used to determine the overflow direction of the target layout container when the target layout container has content overflow. The display module is used to generate and display a floating overflow interaction control based on the overflow direction. The overflow interaction control is at least used to indicate that there is overflow content in the overflow direction, and can interact according to the received interaction instructions.

[0015] Another aspect of this application provides a computer device, including: At least one processor; and A memory that is communicatively connected to the at least one processor; Wherein: the memory stores instructions that can be executed by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the method as described above.

[0016] Another aspect of this application provides a computer-readable storage medium storing computer instructions that, when executed by a processor, implement the method described above.

[0017] Another aspect of this application provides a computer program product including a computer program that, when executed by a processor, implements the method described above.

[0018] The embodiments of this application employing the above-described technical solution may have the following advantages: By determining whether content overflow exists in the target layout container when its content changes, and if so, determining the overflow direction, a floating overflow interaction control is generated and displayed based on the overflow direction. This overflow interaction control at least indicates the direction in which overflow content is stored and can interact with received interaction commands. The floating overflow interaction control can prompt the presence of overflow content in the overflow direction without disrupting the visual design, achieving a WYSIWYG experience and improving the interactive experience. At the same time, the overflow interaction control reminds the user of the existence of overflow content, preventing users from ignoring content outside the visible area and causing deployment errors. Attached Figure Description

[0019] The accompanying drawings exemplify embodiments and form part of the specification, serving together with the textual description to explain exemplary implementations of the embodiments. The illustrated embodiments are for illustrative purposes only and do not limit the scope of the claims. Throughout the drawings, the same reference numerals refer to similar but not necessarily identical elements.

[0020] Figure 1The diagram illustrates the operating environment of the page interaction method according to Embodiment 1 of this application. Figure 2 A flowchart illustrating a page interaction method according to Embodiment 1 of this application is shown schematically; Figure 3 Schematic illustration Figure 2 Flowchart of the sub-steps in step S200; Figure 4 Schematic illustration Figure 2 Flowchart of the sub-steps in step S202; Figure 5 The initial state of the target layout container is schematically shown; Figure 6 This illustration shows a situation where the target layout container has overflowing content; Figure 7 The illustration shows the relevant operation prompts for the overflow interactive control; Figure 8 This illustration shows the state where the overflow interactive control is hidden. Figure 9 The illustration shows the new flow of the page interaction method in Embodiment 1 of this application; Figure 10 The flowchart illustrating the page interaction method of Embodiment 1 of this application is shown in the schematic diagram. Figure 11 The system architecture diagram of the page interaction method of Embodiment 1 of this application is illustrated schematically; Figure 12 A block diagram of a page interaction device according to Embodiment 2 of this application is schematically shown; and Figure 13 A schematic diagram of the hardware architecture of a computer device according to Embodiment 3 of this application is shown. Detailed Implementation

[0021] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application. All other embodiments obtained by those skilled in the art based on the embodiments in this application without inventive effort are within the scope of protection of this application.

[0022] It should be noted that the descriptions involving "first," "second," etc., in the embodiments of this application are for descriptive purposes only and should not be construed as indicating or implying their relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined with "first" or "second" may explicitly or implicitly include at least one of that feature. Furthermore, the technical solutions of the various embodiments can be combined with each other, but this must be based on the ability of those skilled in the art to implement them. If the combination of technical solutions is contradictory or impossible to implement, it should be considered that such a combination of technical solutions does not exist and is not within the scope of protection claimed in this application.

[0023] In the description of this application, it should be understood that the numerical labels before the steps do not indicate the order of the steps, but are only used to facilitate the description of this application and to distinguish each step, and therefore should not be construed as a limitation of this application.

[0024] First, a definition of the terminology used in this application is provided: Low-code platform: refers to a development platform that builds applications through a graphical user interface (GUI) and configuration rather than traditional hand-written code.

[0025] Layout container: refers to the basic rectangular area used in a low-code editor to hold, arrange, and manage child components (such as images, text, buttons, etc.).

[0026] Viewport: The rectangular area of ​​a container component that is actually visible on the screen.

[0027] Secondly, to facilitate understanding of the technical solutions provided in the embodiments of this application by those skilled in the art, the relevant technologies are described below: In related technologies, when the content within a layout container exceeds the original size of the layout container, a native scrollbar is displayed, or the excess content is hidden directly. However, native scrollbars occupy space and their styles are uncontrollable, which can obscure content or compress the layout, preventing users from accurately previewing the final effect on mobile devices or in scrollbar-free environments. On the other hand, hiding the content can easily cause users to overlook content outside the visible area, resulting in missing content or layout errors after deployment.

[0028] To address this, this application provides a page interaction technology solution. In this solution, when content overflows from the layout container, a floating overflow interaction control is generated and displayed based on the direction of the overflow. This avoids disrupting the visual design, achieving a WYSIWYG (What You See Is What You Get) experience, and enhancing the interactive experience. Simultaneously, the overflow interaction control alerts the user to the existence of overflowing content, preventing users from overlooking content outside the visible area and causing deployment errors. See below for details.

[0029] Finally, for ease of understanding, an exemplary operating environment is provided below.

[0030] Figure 1 The illustration shows an environmental application diagram of the method according to an embodiment of this application.

[0031] Computer devices 10000 include various types of electronic devices, such as portable handheld devices, general-purpose computers (such as personal computers and laptops), workstation computers, wearable devices, smart screen devices, self-service terminal devices, service robots, gaming systems, thin clients, various messaging devices, sensors, or other electronic devices. These computer devices can run various types and versions of software applications and operating systems, such as Microsoft Windows, Apple iOS, UNIX-like operating systems, Linux or Linux-like operating systems (such as Google ChromeOS); or include various mobile operating systems, such as Microsoft Windows, Mobile OS, iOS, Windows Phone, and Android. Portable handheld devices can include cellular phones, smartphones, tablets, personal digital assistants, etc. Wearable devices can include head-mounted displays (such as smart glasses). Gaming systems can include various handheld gaming devices, internet-enabled gaming devices, etc. Client devices are capable of executing various applications, such as various internet-related applications, communication applications (such as email applications), short message service (SMS) applications, and can use various communication protocols.

[0032] The technical solutions of this application are described below using a computer device as the execution subject through multiple embodiments. It should be understood that these embodiments can be implemented in many different forms and should not be construed as being limited to the embodiments described herein.

[0033] Example 1 Figure 2 A flowchart illustrating a page interaction method according to Embodiment 1 of this application is shown schematically.

[0034] like Figure 2 As shown, the page interaction method may include steps S200~S204, wherein: Step S200: In the case of changes in the content of the target layout container, determine whether there is content overflow in the target layout container.

[0035] Step S202: If the target layout container has content overflow, determine the overflow direction of the target layout container.

[0036] Step S204: Generate and display a floating overflow interaction control based on the overflow direction. The overflow interaction control is at least used to indicate that there is overflow content in the overflow direction, and can interact according to the received interaction instructions.

[0037] The page interaction method provided in this embodiment determines whether there is content overflow in the target layout container when the content of the target layout container changes. If there is content overflow, the overflow direction of the target layout container is determined. Based on the overflow direction, a floating overflow interaction control is generated and displayed. The overflow interaction control is used to at least indicate the overflow direction where overflow content is stored, and can interact according to the received interaction instructions. The floating overflow interaction control can prompt that there is overflow content in the overflow direction without destroying the visual design, achieving WYSIWYG and improving the interactive experience. At the same time, the overflow interaction control reminds the user of the existence of overflow content, avoiding the user ignoring content outside the visible area and causing an online error.

[0038] The following combination Figure 2 The steps in steps S200 to S204, as well as other optional steps, are described in detail.

[0039] Step S200 In the event of changes to the content within the target layout container, determine whether the target layout container experiences content overflow.

[0040] The target layout container can be a layout container in a low-code platform or a visual editor.

[0041] Specifically, the presence of content changes in the target layout container can be determined by monitoring its Document Object Model (DOM). If content changes are confirmed, further investigation is needed to determine if content overflow occurs. DOM change listeners can be used to monitor the target layout container, such as the browser's native MutationObserver, which monitors changes to the DOM tree. For example, the `childList` property of MutationObserver can control whether to listen for changes in the number of direct children of the target node, such as dragging new components into the layout container or deleting existing components—operations that directly change the number of child nodes. The `subtree` property of MutationObserver can control whether the monitoring scope extends to all descendant nodes of the target node (including direct children, children of children, and other deep nodes), such as listening for changes in the overall content size indirectly affected by changes in child component styles or resizing. Optionally, ResizeObserver can be used to specifically monitor changes in the geometric dimensions of the container and its child elements. Of course, other techniques that can monitor changes in container content size can also be used; there are no restrictions here. Additionally, content overflow can refer to the phenomenon where the content inside the layout container exceeds the container's viewport size.

[0042] To avoid the performance impact of detecting frequent DOM change events (such as continuous dragging), alternatively, DOM change events that are frequently triggered in a short period of time can be merged, and the calculation can be performed only once at a specific time (such as 150ms) after the action stops, thereby achieving debouncing and optimizing performance.

[0043] To determine if the target layout container has content overflow, the viewport size of the target layout container can be compared with the total content size. In optional embodiments, such as Figure 3 As shown, step S200 may further include: Step S300: Obtain the viewport size parameters and total content size parameters of the target layout container. The viewport size parameters include the viewport width and viewport height, and the total content size parameters include the total content width and total content height.

[0044] Step S302: Compare the viewport size parameter with the total content size parameter. If the viewport width is less than the total content width or the viewport height is less than the total content height, it is determined that there is content overflow.

[0045] The total content size can refer to the total layout space occupied by all child components in the target layout container under the container layout rules.

[0046] Specifically, the viewport width and viewport height can be obtained by reading the clientWidth and clientHeight properties of the DOM element of the target layout container; the total content width and total content height can be obtained by reading the scrollWidth and scrollHeight properties of the target layout container; then, the viewport width and the total content width can be compared, and the viewport height can be compared with the total content height; if the viewport width is less than the total content width or the viewport height is less than the total content height, it can be determined that there is content overflow.

[0047] In the embodiments corresponding to steps S300 to S302, by obtaining the viewport size parameter and the total content size parameter of the target layout container, and determining whether there is content overflow based on the comparison between the viewport size parameter and the total content size parameter, it is possible to effectively determine whether there is content overflow in the target layout container.

[0048] Step S202 In the case where the target layout container overflows, determine the overflow direction of the target layout container.

[0049] If the target layout container overflows, the overflow direction of the target layout container can be further determined by comparing the viewport size parameter with the total content size parameter.

[0050] In optional embodiments, such as Figure 4 As shown, step S202 may further include: Step S400: When the viewport width is less than the total content width, determine the overflow direction of the target layout container, including horizontal overflow.

[0051] Step S402: When the viewport height is less than the total content height, determine the overflow direction of the target layout container, including vertical overflow.

[0052] Step S404: When the viewport width is less than the total content width and the viewport height is less than the total content height, determine that the overflow direction of the target layout container is bidirectional overflow.

[0053] Specifically, when the viewport width is less than the total content width, the overflow direction of the target layout container is determined to include horizontal overflow; when the viewport height is less than the total content height, the overflow direction of the target layout container is determined to include vertical overflow; when both the viewport width and the viewport height are less than the total content height, the overflow direction of the target layout container is determined to be bidirectional overflow, that is, both horizontal and vertical overflow are included.

[0054] Please refer to Figure 5 and Figure 6 ,in Figure 5This is the initial state of the target layout container, which contains no task content. Users can add child components to the target layout container as needed. Figure 6 In cases where content overflows in the horizontal direction, comparing the viewport width and the total content width reveals that the viewport width is smaller than the total content width.

[0055] In the embodiments corresponding to steps S400-S404, the specific overflow direction of the target layout container can be determined based on the viewport width and the total content width, as well as the viewport height and the total content height, so as to facilitate the generation of subsequent overflow interactive controls based on the specific overflow direction.

[0056] Step S204 A floating overflow interactive control is generated and displayed based on the overflow direction. The overflow interactive control is used to indicate at least that there is overflow content in the overflow direction, and can interact according to the received interactive instructions.

[0057] Specifically, when the overflow direction only includes horizontal overflow, an overflow interactive control corresponding to the horizontal overflow direction can be generated; when the overflow direction only includes vertical overflow, an overflow interactive control corresponding to the vertical overflow direction can be generated; when the overflow direction is bidirectional overflow, an overflow interactive control corresponding to both horizontal and vertical overflow directions can be generated. The display position of the overflow interactive control can be determined according to the overflow direction. When only horizontal overflow is included, it can be displayed in the right area of ​​the target layout container; when only vertical overflow is included, it can be displayed in the lower area of ​​the target layout container; when bidirectional overflow is included, it can be displayed in the lower right area. Of course, the specific display position is not limited here. The overflow interactive control can be an interactive control that floats above the target layout container, and can be generated and displayed on a non-intrusive (without changing the original DOM structure and CSS layout of the target layout container) floating layer. The interactions that the overflow interactive control can perform can include view reset, content scrolling, control hiding, etc. For example, it can display the overflowed content according to the interaction command. The specific interaction command can be set according to the actual situation, such as click, long press, swipe, or hover, etc., which is not limited here.

[0058] Please continue to refer to this. Figure 6 , Figure 6If the overflow direction is horizontal but not vertical, an overflow interaction control as shown by the arrow in the image can be generated. This control uses left and right arrows to indicate horizontal overflow. Furthermore, this control is displayed in the upper right corner to indicate rightward overflow. Similarly, if the overflow direction is vertical, the overflow interaction control can be an up-down arrow, displayed below the target layout container. If the overflow direction is bidirectional, it can include both left-right and up-down arrows, resembling a cross, displayed in the lower right corner of the target layout container.

[0059] In some possible implementations, the overflow interactive control can also take the form of thumbnail navigation. For example, it can scale all content within the target layout container at a fixed ratio to generate miniature thumbnails. The width and height of the thumbnails can be adapted according to the overflow direction to fit all content within the target layout container. The display position can default to floating in the upper right corner of the target layout container.

[0060] In an optional embodiment, after step S204, that is, after generating and displaying the floating overflow interaction control based on the overflow direction, the page interaction method of this application embodiment may further include: hiding the overflow interaction control when the overflow interaction control receives a first target interaction instruction.

[0061] The primary target interaction command can involve clicking, long-pressing, swiping, or hovering over the overflowing interaction control; the specific command is not limited here. To ensure the user understands the primary target interaction command, a prompt for the primary target interaction command can be generated and displayed briefly.

[0062] Please refer to Figure 7 and Figure 8 ,like Figure 7 As shown, the first target interaction instruction can be clearly defined as "click" by specifying "horizontal scrolling exists, click can temporarily ignore", and the corresponding interaction is also clearly defined as ignoring overflow interaction controls. For example... Figure 8 As shown, the overflow interaction control is hidden after the user clicks it.

[0063] In some possible embodiments, when the overflow interactive control receives the first target interactive instruction, in addition to hiding the overflow interactive control, other interactive behaviors can also be performed simultaneously. For example, in addition to hiding the overflow interactive control, the view can be reset to the starting position.

[0064] In this embodiment, when the first target interaction instruction is received, the overflow interaction control is hidden. This can be done by hiding the overflow interaction control according to the user's needs, provided that the user is aware that there is content overflow in a certain direction, so that it will not obscure the content in the target layout container.

[0065] In optional embodiments, such as Figure 9 As shown, the page interaction method in this application embodiment may further include: Step S500: When the overflow interactive control is hidden, obtain and record the current content overflow state of the target layout container. The current content overflow state includes whether there is content overflow and the overflow direction.

[0066] Step S502: Continuously monitor the content changes of the target layout container. If the content overflow state of the target layout container changes from no content overflow to content overflow again, the overflow interaction control is redisplayed.

[0067] Specifically, when the overflow interaction control is hidden, the current content overflow state of the target layout container can be obtained and recorded, including whether there is content overflow and whether the overflow direction is horizontal, vertical, or bidirectional. Optionally, the current content overflow state of the target layout container can be recorded in the form of a state snapshot. Then, the content changes of the target layout container are continuously monitored, and the overflow interaction control is redisplayed when the content overflow state of the target layout container changes from having content overflow to not having content overflow, and then changes back to having content overflow.

[0068] For example, in the case of content overflow, if a user deletes some content, the content overflow situation changes from present to absent; if the user then adds more content, the content overflow situation changes back to present. At this point, the overflow interaction control can be redisplayed to remind the user that content overflow has occurred again.

[0069] When the overflow interactive control is redisplayed, it can be displayed according to its original position and icon. In some special cases, if the overflow direction changes (such as from horizontal to vertical overflow), the redisplayed overflow interactive control can adjust accordingly based on the changed overflow direction.

[0070] In this embodiment, by acquiring and recording the current content overflow state of the target layout container while hiding the overflow interaction control, continuously detecting changes in the content of the target layout container, and redisplaying the overflow interaction control when the content overflow state of the target layout container changes from no content overflow to having content overflow again, the overflow interaction control can be redisplayed in a timely manner according to the content overflow state of the target layout container, thus preventing users from ignoring new overflow content.

[0071] In an optional embodiment, after step S500, i.e. after acquiring and recording the current content overflow state of the target layout container, the page interaction method of this application embodiment may further include: redisplaying the overflow interaction control when the change in the content overflow state of the target layout container is a change in the overflow direction.

[0072] Specifically, after hiding the overflow interaction control, the system continuously monitors changes in the content of the target layout container. If the overflow state of the target layout container changes, specifically in the direction of the overflow, the overflow interaction control is redisplayed. For example, the overflow direction changes from horizontal to vertical, or from vertical to horizontal, or from bidirectional to horizontal. To ensure that the overflow direction indicated by the redisplayed overflow interaction control corresponds to the changed overflow direction, the overflow direction indicated by the redisplayed overflow interaction control will change. For example, if the overflow direction changes from horizontal to vertical, the indicating arrow can change from left-right to up-down to correspond to the changed overflow direction.

[0073] In this embodiment, when the content overflow state of the target layout container changes to a change in the overflow direction, the overflow interaction control is redisplayed, which allows users to perceive key changes in the content boundary in a timely manner and avoid the risk of blind spots.

[0074] In related technologies, native scrollbars either remain constantly and obstruct the view or disappear continuously, making operation impossible. However, the page interaction method in this application hides the overflow interaction control after the user clicks "ignore," giving the user a clean canvas. When the content undergoes substantial changes, the user's intention may change, and the overflow interaction control is automatically activated, achieving "display on demand" and striking a good balance between "prompting risks" and "reducing interference."

[0075] In an optional embodiment, after step S204, that is, after generating and displaying the floating overflow interactive control based on the overflow direction, the page interaction method of this application embodiment may further include: when the overflow interactive control receives a second target interaction instruction, expanding the viewport width and / or viewport height according to the total content size parameter.

[0076] The second target interaction command can be a click, long press, swipe, or hover, as long as it differs from the first target interaction command; there are no restrictions here. It's understandable that the viewport width and / or height may not fill the entire visible screen space. In this case, the viewport width and / or height can be expanded to a certain extent so that the expanded viewport width and height can accommodate more content, minimizing content overflow. For example, if the original viewport height only occupies half of the visible screen height, and there is content overflowing in a direction other than vertical, when the overflow interaction control receives the second target interaction command, the viewport height can be expanded according to the total height of the content, allowing the expanded viewport height to accommodate more content and minimizing content overflow. When expanding, the visible screen height and width can be used as the maximum limits for expansion. It's understandable that expansion cannot completely eliminate content overflow, but it can accommodate more content and makes the overflowing content more noticeable to the user.

[0077] In this embodiment, when the overflow interaction control receives the second target interaction instruction, the viewport width and / or viewport height are expanded according to the total content size parameter, which can make the target layout container accommodate more content, reduce the possibility of content overflow, and also make it easier for users to notice the overflowing content.

[0078] To make this application easier to understand, the following is combined with... Figure 10 and Figure 11 An example application is provided.

[0079] Figure 10 This is a flowchart illustrating a page interaction method according to an embodiment of this application, which may generally include the following: 1. The user drags and drops the layout container; 2. Users add or modify components within the layout container; 3. Check if the contents of the layout container overflow. If there is no overflow, proceed to step 4; otherwise, proceed to step 5. 4. Keep the interface clean and without any prompts; 5. A scroll indicator (i.e., an overflow interactive control) appears in the upper right corner. 6. When the user clicks the scroll indicator, the container view is smoothly scrolled to the top, the scroll indicator disappears, and the view enters an ignored state; 7. When the user modifies the content again, a smart wake-up judgment is performed. If the overflow changes from no overflow to overflow, the overflow direction changes, or the overflow changes from overflow to no overflow and then back to overflow, the scroll indicator is redisplayed; otherwise, the scroll indicator is ignored.

[0080] Figure 11This is a system architecture diagram of the page interaction method according to an embodiment of this application, which may generally include the following: 1. Observer Layer: Use the MutationObserver API to deeply bind to the target layout container DOM.

[0081] Configure `subtree:true` and `childList:true` to ensure that both adding and deleting child nodes directly, as well as style changes to deep child nodes (such as height changes), can be captured.

[0082] 2. Logic Layer (Logic Core - useScrollIndicator Hook): Debouncer: Performs 150ms debouncing on high-frequency DOM change events to avoid performance jitter.

[0083] Size Calculator: Compare scrollWidth vs clientWidth and scrollHeight vs clientHeight.

[0084] State Machine: Maintains ignored (whether it is currently ignored) and lastIgnoredState (a snapshot of the last time it was ignored), which is the brain that enables "intelligent wake-up".

[0085] 3. Render Layer: EvaLayoutContainer: The host component, responsible for mounting Refs.

[0086] ScrollIndicator: A pure UI component that determines whether to render the DOM based on the state issued by the logic layer.

[0087] The core algorithm flow (intelligent reset strategy) corresponding to this architecture: The logic layer employs a decision-making algorithm based on historical state comparison. The specific steps are as follows: 1. Capture changes: MutationObserver triggers a callback.

[0088] 2. Calculate the current state: Get the current hasHorizontalScroll (current horizontal overflow) and hasVerticalScroll (current vertical overflow).

[0089] 3. Decision on whether to reset the Ignored state (core algorithm): The system reads prev.ignored (whether it is currently ignored) and prev.lastIgnoredState (a snapshot of the state when it was last ignored).

[0090] ①Condition 1: From nothing to something.

[0091] If lastIgnoredState is no scrolling, but scrolling is currently detected →→ reset to display.

[0092] ②Condition 2: Ability mutation.

[0093] If lastIgnoredState is only for horizontal scrolling, the current state will change to vertical scrolling (or vice versa) →→ reset to display.

[0094] ③ Condition 3: Recurrence.

[0095] If a user previously fixed the overflow (intermediate state became no scrolling), causing prev.hasScroll to be false, but the latest operation caused curr.hasScroll to be true again →→ reset to display.

[0096] 4. State Update: Update ReactState based on the above decisions, driving the UI to re-render.

[0097] In this exemplary application, a scroll indicator is displayed based on whether the content overflows, which can alert the user to the existence of overflowing content and avoid blind spots; when the user clicks the scroll indicator, the scroll indicator enters an ignored state, which can prevent the scroll indicator from obscuring the content; through the judgment of intelligent wake-up, the indicator can be redisplayed when a key change occurs in the overflow state, which can enable the user to perceive key changes in the content boundary in a timely manner.

[0098] Example 2 Figure 12 The diagram schematically illustrates a page interaction device according to Embodiment 2 of this application. This device can be divided into one or more program modules. One or more program modules are stored in a storage medium and executed by one or more processors to complete the embodiments of this application. The program module referred to in the embodiments of this application refers to a series of computer program instruction segments capable of performing a specific function. The following description will specifically introduce the functions of each program module in this embodiment. For example... Figure 12 As shown, the device 600 may include: a first determining module 610, a second determining module 620, and a display module 630, wherein: The first determining module 610 is used to determine whether there is content overflow in the target layout container when the content in the target layout container changes. The second determining module 620 is used to determine the overflow direction of the target layout container when the target layout container has content overflow. Display module 630 is used to generate and display a floating overflow interaction control based on the overflow direction. The overflow interaction control is at least used to indicate that there is overflow content in the overflow direction and can interact according to the received interaction instructions.

[0099] In an optional embodiment, the first determining module 610 is further configured to: Obtain the viewport size parameters and total content size parameters of the target layout container. The viewport size parameters include the viewport width and viewport height, and the total content size parameters include the total content width and total content height. The viewport size parameter is compared with the total content size parameter. If the viewport width is less than the total content width or the viewport height is less than the total content height, it is determined that there is content overflow.

[0100] In an optional embodiment, the second determining module 620 is further configured to: When the viewport width is less than the total width of the content, the overflow direction of the target layout container is determined to include horizontal overflow; When the viewport height is less than the total height of the content, the overflow direction of the target layout container is determined to include vertical overflow; When the viewport width is less than the total width of the content and the viewport height is less than the total height of the content, the overflow direction of the target layout container is determined to be bidirectional overflow.

[0101] In an optional embodiment, the device 600 is further used for: When the overflow interaction control receives the first target interaction instruction, the overflow interaction control is hidden.

[0102] In an optional embodiment, the device 600 is further used for: When the overflow interaction control is hidden, the current content overflow state of the target layout container is obtained and recorded. The current content overflow state includes whether there is content overflow and the overflow direction. The content changes of the target layout container are continuously monitored. If the content overflow state of the target layout container changes from no content overflow to content overflow again, the overflow interaction control is redisplayed.

[0103] In an optional embodiment, the device 600 is further used for: If the overflow state of the target layout container changes to a change in the overflow direction, the overflow interaction control is redisplayed.

[0104] In an optional embodiment, the device 600 is further used for: When the overflow interactive control receives a second target interactive instruction, the viewport width and / or the viewport height are expanded according to the total content size parameter.

[0105] Example 3 Figure 13 This illustration schematically depicts the hardware architecture of a computer device 10000 suitable for implementing a page interaction method according to Embodiment 3 of this application. In some embodiments, the computer device 10000 may be a terminal device such as a smartphone, wearable device, tablet computer, personal computer, in-vehicle terminal, game console, virtual device, workbench, digital assistant, set-top box, or robot. In other embodiments, the computer device 10000 may be a rack server, blade server, tower server, or cabinet server (including independent servers or server clusters composed of multiple servers), etc. Figure 13 As shown, the computer device 10000 includes, but is not limited to: a memory 10010, a processor 10020, and a network interface 10030 that can communicate and be linked with each other via a system bus. Wherein: The memory 10010 includes at least one type of computer-readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 10010 may be an internal storage module of a computer device 10000, such as the hard disk or memory of the computer device 10000. In other embodiments, the memory 10010 may also be an external storage device of the computer device 10000, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device 10000. Of course, the memory 10010 may also include both the internal storage module and the external storage device of the computer device 10000. In this embodiment, the memory 10010 is typically used to store the operating system and various application software installed on the computer device 10000, such as program code for page interaction methods. In addition, the memory 10010 can also be used to temporarily store various types of data that have been output or will be output.

[0106] In some embodiments, processor 10020 may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other chip. Processor 10020 is typically used to control the overall operation of computer device 10000, such as performing control and processing related to data interaction or communication with computer device 10000. In this embodiment, processor 10020 is used to run program code stored in memory 10010 or process data.

[0107] Network interface 10030 may include a wireless network interface or a wired network interface, which is typically used to establish a communication link between computer device 10000 and other computer devices. For example, network interface 10030 is used to connect computer device 10000 to an external terminal via a network, establishing a data transmission channel and communication link between computer device 10000 and the external terminal. The network may be an intranet, the Internet, Global System for Mobile Communication (GSM), Wideband Code Division Multiple Access (WCDMA), 4G network, 5G network, Bluetooth, Wi-Fi, or other wireless or wired networks.

[0108] It should be pointed out that, Figure 13 Only computer devices with components 10010-10030 are shown; however, it should be understood that it is not required to implement all of the shown components, and more or fewer components may be implemented instead.

[0109] In this embodiment, the page interaction method stored in memory 10010 can also be divided into one or more program modules and executed by one or more processors (such as processor 10020) to complete the embodiment of this application.

[0110] Example 4 This application also provides a computer-readable storage medium storing a computer program thereon, wherein the computer program, when executed by a processor, implements the steps of the page interaction method in the embodiments.

[0111] In this embodiment, the computer-readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the computer-readable storage medium may be an internal storage unit of a computer device, such as the hard disk or memory of the computer device. In other embodiments, the computer-readable storage medium may also be an external storage device of the computer device, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device. Of course, the computer-readable storage medium may include both the internal storage unit and the external storage device of the computer device. In this embodiment, the computer-readable storage medium is typically used to store the operating system and various application software installed on the computer device, such as the program code of the page interaction method in the embodiment. In addition, the computer-readable storage medium can also be used to temporarily store various types of data that have been output or will be output.

[0112] Example 5 This application also provides a computer program product, including a computer program that, when executed by a processor, implements the methods described in the above embodiments.

[0113] Obviously, those skilled in the art should understand that the modules or steps of the embodiments of this application described above can be implemented using general-purpose computer devices. They can be centralized on a single computer device or distributed across a network of multiple computer devices. Optionally, they can be implemented using computer-executable program code, thereby storing them in a storage device for execution by a computer device. In some cases, the steps shown or described can be performed in a different order than those presented here, or they can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. Thus, the embodiments of this application are not limited to any particular combination of hardware and software.

[0114] It should be noted that the above are merely preferred embodiments of this application and do not limit the scope of patent protection of this application. Any equivalent structural or procedural changes made using the content of this application's specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the scope of patent protection of this application.

Claims

1. A page interaction method, characterized by, The method includes: In the event of changes to the content within the target layout container, determine whether the target layout container experiences content overflow. In the case where the target layout container overflows, determine the overflow direction of the target layout container; A floating overflow interaction control is generated and displayed based on the overflow direction. The overflow interaction control is at least used to indicate that there is overflow content in the overflow direction, and can interact according to the received interaction instructions.

2. The method of claim 1, wherein, Determining whether the target layout container has content overflow includes: Obtain the viewport size parameters and total content size parameters of the target layout container. The viewport size parameters include the viewport width and viewport height, and the total content size parameters include the total content width and total content height. The viewport size parameter is compared with the total content size parameter. If the viewport width is less than the total content width or the viewport height is less than the total content height, it is determined that there is content overflow.

3. The method according to claim 2, characterized in that, Determining the overflow direction of the target layout container includes: When the viewport width is less than the total width of the content, the overflow direction of the target layout container is determined to include horizontal overflow; When the viewport height is less than the total height of the content, the overflow direction of the target layout container is determined to include vertical overflow; When the viewport width is less than the total width of the content and the viewport height is less than the total height of the content, the overflow direction of the target layout container is determined to be bidirectional overflow.

4. The method according to claim 1, characterized in that, After generating and displaying the floating overflow interactive control based on the overflow direction, the method further includes: When the overflow interaction control receives the first target interaction instruction, the overflow interaction control is hidden.

5. The method according to claim 4, characterized in that, The method further includes: When the overflow interaction control is hidden, the current content overflow state of the target layout container is obtained and recorded. The current content overflow state includes whether there is content overflow and the overflow direction. The content changes of the target layout container are continuously monitored. If the content overflow state of the target layout container changes from no content overflow to content overflow again, the overflow interaction control is redisplayed.

6. The method according to claim 5, characterized in that, After acquiring and recording the current content overflow state of the target layout container, the method further includes: If the overflow state of the target layout container changes to a change in the overflow direction, the overflow interaction control is redisplayed.

7. The method according to claim 2, characterized in that, After generating and displaying the floating overflow interactive control based on the overflow direction, the method further includes: When the overflow interactive control receives a second target interactive instruction, the viewport width and / or the viewport height are expanded according to the total content size parameter.

8. A page interaction device, characterized in that, The device includes: The first determining module is used to determine whether there is content overflow in the target layout container when the content in the target layout container changes. The second determining module is used to determine the overflow direction of the target layout container when the target layout container has content overflow. The display module is used to generate and display a floating overflow interaction control based on the overflow direction. The overflow interaction control is at least used to indicate that there is overflow content in the overflow direction, and can interact according to the received interaction instructions.

9. A computer device, characterized in that, include: At least one processor; and A memory communicatively connected to the at least one processor; wherein: The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions that, when executed by a processor, implement the method as described in any one of claims 1 to 7.

11. A computer program product, comprising a computer program, characterized in that, When executed by a processor, the computer program implements the steps of the method according to any one of claims 1 to 7.

Images