Method, device and equipment for realizing seamless scrolling of webpage information and medium

Abstract

The present application relates to the technical field of computer, provide a kind of processing method, device, electronic equipment and storage medium for realizing seamless scrolling of webpage information, the method comprises: determining the height of information container is less than the height of display container, the information container is lengthened and completed;The information container is displayed based on the display container and is rolled;In the current cycle of rolling display, it is determined that the information container in the display container reaches the bottom line, the information container is lengthened and completed again;Determine the first sub-container in the information container is rolled out of the display container, remove the first sub-container from the information container, and start the rolling display of next cycle.The present application can support the seamless scrolling animation effect of list when the width and height of list container are not fixed.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a processing method, apparatus, electronic device, and storage medium for achieving seamless scrolling of web page information. Background Technology

[0002] With the continuous development of computer technology, scrolling effects are often used to present more content on a limited page.

[0003] Existing seamless scrolling technologies for lists typically set a fixed width or height for each container within the list, achieving seamless scrolling animations based on this. However, in practical applications, situations inevitably arise where the width or height of list containers is not fixed, such as news summary recommendation lists. For these requirements, existing technologies cannot achieve seamless scrolling animation effects. Summary of the Invention

[0004] Based on this, it is necessary to address the above-mentioned problems. In this invention, a processing method, apparatus, electronic device, and storage medium for achieving seamless scrolling of web page information are proposed, which can realize seamless scrolling animation effects for lists with variable heights.

[0005] This invention proposes a method for achieving seamless scrolling of web page information, comprising:

[0006] If the height of the information container is determined to be less than the height of the display container, the information container is lengthened and supplemented.

[0007] The information container is displayed in a scrolling manner based on the display container;

[0008] In the current loop of the scrolling display, if the information container in the display container reaches the bottom line, the information container is lengthened and supplemented again;

[0009] Once the first sub-container in the information container is determined to scroll out of the display container, the first sub-container is removed from the information container, and the next cycle of scrolling display begins.

[0010] Furthermore, if the height of the determined information container is less than the height of the display container, lengthening and supplementing the information container includes:

[0011] If the height of the information container is determined to be less than the height of the display container, the first sub-container of the information container is copied to the end of the information container to lengthen and complete the information container.

[0012] Further, the scrolling display of the information container based on the display container includes:

[0013] The relative height between the display container and the information container is changed based on a preset time interval, and the area of ​​the information container that extends beyond the display container is hidden, so as to scroll the display of the information container.

[0014] Further, determining that the information container in the display container has reached the bottom line includes:

[0015] Obtain the absolute value of the relative height between the display container and the information container. If the sum of the height of the display container and the absolute value of the relative height equals the height of the information container, determine that the information container in the display container has reached the bottom line.

[0016] Furthermore, the further lengthening and completion of the information container includes:

[0017] The target sub-container is copied to the end of the information container to lengthen and complete the information container again; wherein the target sub-container is the next sub-container in the information container that is adjacent to the first sub-container.

[0018] Further, determining that the first sub-container in the information container scrolls out of the display container includes:

[0019] Obtain the absolute value of the relative height between the display container and the information container. If the height of the first sub-container is equal to the absolute value of the relative height, determine that the first sub-container in the information container scrolls out of the display container.

[0020] Furthermore, the scrolling display that begins the next cycle includes:

[0021] The relative height between the information container and the display container is reset to zero to begin the next cycle of scrolling display.

[0022] The present invention also proposes a processing device for achieving seamless scrolling of web page information, comprising:

[0023] The first completion module is used to determine that the height of the information container is less than the height of the display container, and to lengthen and complete the information container accordingly.

[0024] A scrolling display module is used to scroll the information container based on the display container;

[0025] The second completion module is used to determine, in the current loop of scrolling display, that the information container in the display container has reached the bottom line, and then lengthen and complete the information container again;

[0026] The loop switching module is used to determine the first sub-container in the information container that scrolls out of the display container, remove the first sub-container from the information container, and start the next loop of scrolling display.

[0027] The present invention also proposes an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement any of the processing methods for achieving seamless scrolling of web page information.

[0028] The present invention also proposes a non-transitory computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements any of the processing methods described above for seamless scrolling of web page information.

[0029] The embodiments of the present invention have the following beneficial effects:

[0030] By lengthening and padding the information container when its height is less than the display container's height, and by lengthening and padding the information container in real time when it reaches the bottom line during scrolling, potential gaps in scrolling are avoided, thus enabling seamless scrolling animation for lists with variable heights. Attached Figure Description

[0031] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0032] Figure 1 This is a flowchart illustrating the method for achieving seamless scrolling of web page information provided in an embodiment of the present invention;

[0033] Figure 2 This is one of the schematic diagrams illustrating the implementation of a carousel animation using existing technology;

[0034] Figure 3 This is the second illustration of existing technology for implementing a carousel animation;

[0035] Figure 4 This is the third illustration of existing technology for implementing a carousel animation;

[0036] Figure 5 This is the fourth illustration of existing technology for implementing a carousel animation;

[0037] Figure 6 This is a schematic diagram illustrating a break in the scrolling display process of a list, as provided in an embodiment of the present invention.

[0038] Figure 7 This is one of the schematic diagrams of fault completion provided in the embodiments of the present invention;

[0039] Figure 8 This is one of the schematic diagrams of a scrolling list provided in an embodiment of the present invention;

[0040] Figure 9 This is the second schematic diagram of fault completion provided in the embodiment of the present invention;

[0041] Figure 10 This is the second schematic diagram of a scrolling list display provided in an embodiment of the present invention;

[0042] Figure 11 This is a schematic diagram of the structure of the processing device for achieving seamless scrolling of web page information provided in an embodiment of the present invention;

[0043] Figure 12 This is a schematic diagram of the structure of the electronic device provided in an embodiment of the present invention. Detailed Implementation

[0044] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0045] Please see Figure 1 This invention provides a method for achieving seamless scrolling of web page information, which may include the following steps:

[0046] S1. Determine that the height of the information container is less than the height of the display container, and lengthen and complete the information container accordingly;

[0047] S2. Scroll the information container based on the display container;

[0048] S3. In the current loop of scrolling display, determine that the information container in the display container has reached the bottom line, and then lengthen and complete the information container again;

[0049] S4. Determine the first child container in the information container to scroll out of the display container, remove the first child container from the information container, and start the next cycle of scrolling display.

[0050] In this embodiment of the invention, the information container refers to a container used to hold information to be displayed, which contains multiple sub-containers, and the height of each sub-container may be unequal. The specific height value of the sub-container can be determined according to the content of each item in the information to be displayed. The display container is used as a window for the information to be displayed. It is understood that, due to the limited screen size of the display device, a marquee scrolling effect is usually used to present more content information on a limited page.

[0051] It is understandable that in vertical scrolling scenarios, the width of the container remains constant, while the height of the information container varies depending on the information displayed; correspondingly, in horizontal scrolling scenarios, the height of the container remains constant, while the width of the information container varies depending on the information displayed. It should be noted that, for ease of description, in this embodiment of the invention, "height" refers to the height in vertical scrolling scenarios; for horizontal scrolling scenarios, "height" actually refers to the width of the container. In other words, in this embodiment of the invention, "height" refers to the length in a direction that may change.

[0052] It should be noted that if the height of the information container is determined to be less than the height of the display container before the scrolling display begins, a blank area will appear in the display window, and the seamless scrolling effect cannot be achieved. Therefore, the information container needs to be lengthened and supplemented so that the height of the information container exceeds the height of the display container by a certain distance.

[0053] During scrolling, if the information container reaches the bottom line during the first extension and completion process, continuing to scroll will also result in a gap in the scrolling area, failing to achieve a seamless scrolling effect. Therefore, when the bottom line of the information container is detected within the display container, it indicates that a gap is likely to occur, and the information container needs to be extended and completed again to achieve a seamless scrolling effect.

[0054] When the first child container of the information container scrolls completely out of the display container, the first child container can be removed. The original second child container then becomes the first child container of the next scrolling cycle. This process is repeated, step S2-S4, to achieve a seamless scrolling display effect for lists with variable heights.

[0055] The processing method for seamless scrolling of web page information provided in this embodiment of the invention extends and fills the information container when it is determined that the height of the information container is less than the height of the display container, and extends and fills the information container in real time when it is detected that the scrolling of the information container reaches the bottom line during the scrolling display process. This avoids the possible gaps in the scrolling display process, thereby enabling a seamless scrolling animation effect for lists with variable heights.

[0056] In this embodiment of the invention, step S1 may further include:

[0057] If the height of the information container is less than the height of the display container, copy the first child container of the information container to the end of the information container to lengthen and complete the information container.

[0058] In this embodiment of the invention, when it is determined that the height of the information container is less than the height of the display container, the first sub-container of the information container can be copied and connected to the end of the information container to achieve the lengthening and completion operation of the information container. It is understood that in a scrolling display scenario, the information to be displayed is displayed in a fixed order; that is, after the final item is displayed for the first time, the first item will be displayed in a loop, and so on. Therefore, when it is determined that the height of the information container is less than the height of the display container, the first sub-container of the information container can be copied to the end of the information container to lengthen and complete the information container. If, after lengthening and completing the information container by copying the first sub-container, the height of the information container is still less than the height of the display container, then the second sub-container is copied and lengthened, and so on, until the height of the information container is greater than the height of the display container.

[0059] The processing method for seamless scrolling of web page information provided in this embodiment of the invention reduces the technical difficulty of lengthening and completing the information container by using the starting sub-container of the information container as the basis for lengthening and completing the information container, and ensures the integrity of the lengthened and completed information.

[0060] In this embodiment of the invention, further, scrolling the information container based on the display container includes:

[0061] The relative height between the display container and the information container is changed based on a preset time interval, and the area of ​​the information container that extends beyond the display container is hidden in order to scroll the information container.

[0062] In this embodiment of the invention, the scrolling display can be achieved by changing the relative height of the display container and the information container based on a preset time interval. The position of the display container is fixed; the scrolling display of information is achieved by changing the height of the information container relative to the display container (the display container is set to the top layer, and the portion of the information container extending beyond the display container is set to hidden). It should be noted that the scrolling process can be either continuous and uniform, or it can pause for a certain time interval after scrolling to a certain position before continuing to scroll, and so on.

[0063] In this embodiment of the invention, further determining that the information container in the display container has reached the baseline includes:

[0064] Obtain the absolute value of the relative height between the display container and the information container. If the sum of the height of the display container and the absolute value of the relative height equals the height of the information container, determine that the information container in the display container has reached the bottom line.

[0065] It should be noted that the absolute value of the relative height between the display container and the information container reflects the displacement of the information list during the current loop. When the displacement of the information list plus the height of the display container equals the height of the information container, it means that the information container has completed its full display, which means that the information container has reached its bottom line at this point.

[0066] In this embodiment of the invention, the information container is further lengthened and supplemented, including:

[0067] Copy the target sub-container to the end of the information container to lengthen and complete the information container again; where the target sub-container is the next sub-container in the information container that is adjacent to the first sub-container.

[0068] It should be noted that if scrolling continues when the information container reaches the bottom line, gaps and blank spaces will appear. Therefore, the information container needs to be lengthened and completed again. Since the previous lengthening and completion operation was based on the first child container, the next child container immediately following the first child container needs to be used when lengthening and completing it this time, and so on, so as to finally achieve seamless scrolling display of list information.

[0069] In this embodiment of the invention, further determining that the first sub-container in the information container scrolls out of the display container includes:

[0070] Get the absolute value of the relative height between the display container and the information container. If the height of the first child container is equal to the absolute value of the relative height, determine that the first child container in the information container will scroll out of the display container.

[0071] In this embodiment of the invention, a single sub-container is used as the basis for determining a scrolling cycle. Specifically, to determine whether the first sub-container in the current cycle has scrolled out of the display container, the absolute value of the relative height between the display container and the information container can be obtained, that is, the distance the information container has moved upward relative to the display container. At the same time, the height value of the first sub-container can be obtained. When the two are equal, it means that the first sub-container in the information container has completely scrolled out of the display container. At this time, the first sub-container can be removed, thereby saving resource overhead in the display process.

[0072] In this embodiment of the invention, starting the next cycle of scrolling display further includes:

[0073] Reset the relative height between the information container and the display container to zero to begin the next cycle of scrolling display.

[0074] In this embodiment of the invention, when it is determined that the current cycle of scrolling display has ended, the first sub-container of the information container can be removed, and the relative height between the information container and the display container can be reset to zero, thereby starting the next cycle of scrolling display.

[0075] Based on the above solution, to better understand the processing method for achieving seamless scrolling of web page information provided in the embodiments of the present invention, specific examples are listed below for detailed explanation:

[0076] This invention relates to the field of web front-end technology and is applied in the internet software industry. The terminology used in this invention will be explained below:

[0077] (1)js: short for JavaScript, a web front-end scripting language.

[0078] (2) CSS: Web front-end style language.

[0079] (3) "overflow:hidden;": a CSS property used to hide the overflowing part when the container exceeds the width and height.

[0080] (4) "top:0px": CSS property used to set how many pixels the top position is relative to the parent container (display container).

[0081] (5) "Transform:translateY(0px)": CSS property used to move the DOM node by a distance. Negative values ​​move it upwards, and positive values ​​move it downwards.

[0082] (6) DOM node: The container node under js.

[0083] (7)Clone: ​​A method in JavaScript to copy nodes in the DOM.

[0084] (8) clientWidth: A method in JavaScript to get the width of the DOM container.

[0085] (9) clientHeight: The method to get the height of the DOM container in js.

[0086] (10) Swiper: A carousel animation framework encapsulated in JS, which includes technologies such as seamless scrolling animation of lists.

[0087] (11) Seamless scrolling animation of list: A web page list scrolling animation scheme, also known as a carousel animation, which uses JS to achieve seamless left-right or top-bottom connection of the list animation.

[0088] It should be noted that existing technical solutions mainly rely on swiper technology to achieve carousel animation effects, such as... Figures 2 to 5 As shown.

[0089] Please see Figure 2Taking the up-and-down scrolling animation as an example, the left-and-right scrolling animation works similarly. The Swiper technology carousel animation consists of three containers A, B, and C. The outermost layer is container A (i.e., the display container, the same below). By setting the CSS overflow:hidden, container A hides the portion of container C (i.e., the child container, the same below) that overflows from container B (i.e., the information container, the same below). In this way, only the content of container A is visible to the eye.

[0090] As you can see, the height of container C is always fixed; this is because the height is set. Figure 3 As shown.

[0091] The existing process for implementing a carousel animation effect is as follows:

[0092] (1) First, position container B relative to container A, that is, set the top position of container B relative to the top of container A to 0px. Then, at regular intervals, move container B upwards by a certain distance, such as... Figures 3 to 4 As shown.

[0093] (2) When container B moves to a position of -60px relative to container A (i.e., top: -60px), container C1 is completely hidden outside container A. At this point, by manipulating the DOM nodes using JavaScript, container C1 is inserted after container C6, and then top is set to 0, meaning the position of container B relative to container A is 0. Figure 5 As shown.

[0094] (3) We see the carousel animation by repeating step (1).

[0095] It should be noted that existing seamless scrolling technologies for lists all set the width or height of each container in the list to be fixed, and then implement the seamless scrolling animation of the list on this basis. However, in the process of project development, there are always some requirements where the width or height of the list is not fixed, such as a news brief recommendation list. In this case, the existing seamless scrolling technology cannot meet the requirements.

[0096] This invention innovates upon existing seamless scrolling technology for lists. Instead of fixing the width or height of each container in the list, it obtains the width or height of each container in the list using JavaScript's clientWidth or clientHeight, and then compares it with the list's translation distance. This enables seamless scrolling animations for news and brief recommendation lists without setting fixed widths or heights.

[0097] It should be noted that the solution in this embodiment of the invention differs from the swiper technology in that positioning is not set in the first step, and the height of the C container is not set either. For example... Figures 6 to 10 As shown, the steps for achieving the carousel animation effect in this embodiment of the invention are as follows:

[0098] (1) When the content of container C (the message) is not fixed, the height of container C is also not fixed, such as... Figure 6 As shown, a gap will appear, meaning that the height of container B is less than the height of container A. This creates the gap, preventing seamless scrolling.

[0099] Therefore, to solve this problem, this invention first uses the JavaScript clone method to copy the topmost C container 1 within the display range of container A, to prevent a gap from appearing due to insufficient height of the last C container 4 within the display range of container A. Then, the copied C container 1 is inserted at the end of container B, as follows. Figure 7 As shown, the fault situation is completed.

[0100] If the fault is not yet fully repaired, continue copying container C2, and so on, until the height of container B is greater than the height of container A. After the fault is fully repaired, proceed to step (2).

[0101] (2) The displacement technology used in this invention is transform, which has the same function as the swiper positioning technology, such as... Figure 8 As shown, container B is moved up a certain distance at regular intervals. At this time, the height of container B is obtained by operating the clientHeight technology of js. Then, it is determined whether the height of container C1 and the distance moved are equal (it is determined whether it is within the current loop cycle. When the height of container C1 and the distance moved are equal, it means that container C1 can be removed). If they are not equal, step (3) is executed. If they are equal, step (4) is executed.

[0102] (3) Determine if the sum of the height of container A (obtained via `clientHeight` in JavaScript) and the distance moved by container B (obtained through `transform`) equals the height of container B (if they are equal, container B has reached the bottom line). If they are not equal, continue with step 2. If they are equal, clone container C2 using JavaScript and add it to the end of container B to prevent gaps from appearing when moving upwards. Figure 9 As shown.

[0103] (4) Here, we assume that the height of container C1 is 80px, and the `transform` property has also moved to 80px. Since these two are equal, we can use JavaScript to delete the C1 node and set `transform`'s `translateY` ​​to 0. Figure 10 As shown. At this point, returning to step 2 and looping again achieves a seamless scrolling animation for a list with variable height.

[0104] Compared with the prior art, the advantage of the embodiments of the present invention is that it can support the seamless scrolling animation effect of the list when the width and height of the list container are not fixed.

[0105] Please see Figure 11 The present invention also proposes a processing device for achieving seamless scrolling of web page information, comprising:

[0106] The first completion module 1 is used to determine that the height of the information container is less than the height of the display container, and to lengthen and complete the information container accordingly.

[0107] The scrolling display module 2 is used to scroll the information container based on the display container;

[0108] The second completion module 3 is used to determine, in the current loop of scrolling display, that the information container in the display container has reached the bottom line, and then lengthen and complete the information container again;

[0109] The loop switching module 4 is used to determine the first sub-container in the information container to scroll out of the display container, remove the first sub-container from the information container, and start the next loop of scrolling display.

[0110] Furthermore, the first completion module 1 is specifically used for:

[0111] If the height of the information container is less than the height of the display container, copy the first child container of the information container to the end of the information container to lengthen and complete the information container.

[0112] Furthermore, the scrolling display module 2 is specifically used for:

[0113] The relative height between the display container and the information container is changed based on a preset time interval, and the area of ​​the information container that extends beyond the display container is hidden in order to scroll the information container.

[0114] Furthermore, the second completion module 3 is specifically used for:

[0115] Obtain the absolute value of the relative height between the display container and the information container. If the sum of the height of the display container and the absolute value of the relative height equals the height of the information container, determine that the information container in the display container has reached the bottom line.

[0116] Furthermore, the second completion module 3 is specifically used for:

[0117] Copy the target sub-container to the end of the information container to lengthen and complete the information container again; where the target sub-container is the next sub-container in the information container that is adjacent to the first sub-container.

[0118] Furthermore, the cycle switching module 4 is specifically used for:

[0119] Get the absolute value of the relative height between the display container and the information container. If the height of the first child container is equal to the absolute value of the relative height, determine that the first child container in the information container will scroll out of the display container.

[0120] Furthermore, the cyclic switching module 4 is specifically used for:

[0121] Reset the relative height between the information container and the display container to zero to begin the next cycle of scrolling display.

[0122] Figure 12 An internal structural diagram of an electronic device in one embodiment is shown. This electronic device can specifically be a terminal or a server. Figure 12 As shown, the electronic device includes a processor, a memory, and a network interface connected via a system bus. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores an operating system and may also store a computer program. When executed by the processor, this computer program enables the processor to implement an age recognition method. The internal memory may also store a computer program, which, when executed by the processor, enables the processor to implement the age recognition method. Those skilled in the art will understand that... Figure 12 The structures shown are merely block diagrams of a portion of the structure related to the present application and do not constitute a limitation on the electronic devices to which the present application is applied. Specific electronic devices may include more or fewer components than shown in the figures, or combine certain components, or have different component arrangements.

[0123] In one embodiment, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, it implements any of the processing methods for achieving seamless scrolling of web page information, for example including:

[0124] S1. Determine that the height of the information container is less than the height of the display container, and lengthen and complete the information container;

[0125] S2. Scroll the information container based on the display container;

[0126] S3. In the current loop of scrolling display, if it is determined that the information container in the display container has reached the bottom line, the information container is lengthened and supplemented again;

[0127] S4. Determine that the first sub-container in the information container scrolls out of the display container, remove the first sub-container from the information container, and start the next cycle of scrolling display.

[0128] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments described above. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and RAMbus dynamic RAM (RDRAM), etc.

[0129] In another aspect, embodiments of the present invention also provide a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, is implemented to perform the methods provided in the above embodiments, including, for example:

[0130] S1. Determine that the height of the information container is less than the height of the display container, and lengthen and complete the information container;

[0131] S2. Scroll the information container based on the display container;

[0132] S3. In the current loop of scrolling display, if it is determined that the information container in the display container has reached the bottom line, the information container is lengthened and supplemented again;

[0133] S4. Determine that the first sub-container in the information container scrolls out of the display container, remove the first sub-container from the information container, and start the next cycle of scrolling display.

[0134] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0135] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this patent application should be determined by the appended claims.

Claims

1. A method for achieving seamless scrolling of webpage information, characterized in that, include: If the height of the information container is determined to be less than the height of the display container, the information container is lengthened and supplemented. The information container is displayed in a scrolling manner based on the display container; The scrolling display of the information container based on the display container includes: The relative height between the display container and the information container is changed based on a preset time interval, and the area of ​​the information container that extends beyond the display container is hidden, so as to scroll the display of the information container. In the current loop of the scrolling display, if the information container in the display container reaches the bottom line, the information container is lengthened and supplemented again; Determining that the information container in the display container has reached the bottom line includes: Obtain the absolute value of the relative height between the display container and the information container. If the sum of the height of the display container and the absolute value of the relative height is equal to the height of the information container, determine that the information container in the display container has reached the bottom line. The further lengthening and completion of the information container includes: The target sub-container is copied to the end of the information container to lengthen and complete the information container again; wherein, the target sub-container is the next sub-container in the information container that is adjacent to the first sub-container; Once the first sub-container in the information container is determined to scroll out of the display container, the first sub-container is removed from the information container, and the next cycle of scrolling display begins; Determining that the first sub-container in the information container scrolls out of the display container includes: Obtain the absolute value of the relative height between the display container and the information container. If the height of the first sub-container is equal to the absolute value of the relative height, determine that the first sub-container in the information container scrolls out of the display container. The scrolling display that begins the next cycle includes: The relative height between the information container and the display container is reset to zero to begin the next cycle of scrolling display.

2. The processing method for achieving seamless scrolling of webpage information according to claim 1, characterized in that, The determination that the height of the information container is less than the height of the display container, and the lengthening and supplementation of the information container, includes: If the height of the information container is determined to be less than the height of the display container, the first sub-container of the information container is copied to the end of the information container to lengthen and complete the information container.

3. A processing device for achieving seamless scrolling of web page information, characterized in that, include: The first completion module is used to determine that the height of the information container is less than the height of the display container, and to lengthen and complete the information container accordingly. A scrolling display module is used to scroll the information container based on the display container; The scrolling display module is specifically used to: change the relative height between the display container and the information container based on a preset time interval, and hide the area of ​​the information container that extends beyond the display container, so as to scroll the information container. The second completion module is used to determine, in the current loop of scrolling display, that the information container in the display container has reached the bottom line, and then lengthen and complete the information container again; Determining that the information container in the display container has reached the bottom line includes: Obtain the absolute value of the relative height between the display container and the information container. If the sum of the height of the display container and the absolute value of the relative height is equal to the height of the information container, determine that the information container in the display container has reached the bottom line. The second completion module is specifically used to: copy the target sub-container to the end of the information container to lengthen and complete the information container again; wherein, the target sub-container is the next sub-container adjacent to the first sub-container in the information container; The loop switching module is used to determine the first sub-container in the information container that scrolls out of the display container, remove the first sub-container from the information container, and start the next loop of scrolling display; Determining that the first sub-container in the information container scrolls out of the display container includes: Obtain the absolute value of the relative height between the display container and the information container. If the height of the first sub-container is equal to the absolute value of the relative height, determine that the first sub-container in the information container scrolls out of the display container. The scrolling display that begins the next cycle includes: The relative height between the information container and the display container is reset to zero to begin the next cycle of scrolling display.

4. An electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the processing method for achieving seamless scrolling of web page information as described in any one of claims 1 to 2.

5. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by a processor, the computer program implements the processing method for seamless scrolling of web page information as described in any one of claims 1 to 2.

Images