CN115329226A - Processing method, device, equipment and medium for realizing seamless rolling of webpage information - Google Patents
Processing method, device, equipment and medium for realizing seamless rolling of webpage information Download PDFInfo
- Publication number
- CN115329226A CN115329226A CN202210788606.0A CN202210788606A CN115329226A CN 115329226 A CN115329226 A CN 115329226A CN 202210788606 A CN202210788606 A CN 202210788606A CN 115329226 A CN115329226 A CN 115329226A
- Authority
- CN
- China
- Prior art keywords
- container
- information
- display
- height
- sub
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention relates to the technical field of computers, and provides a processing method, a device, electronic equipment and a storage medium for realizing seamless rolling of webpage information, wherein the method comprises the following steps: determining that the height of the information container is smaller than that of the display container, and lengthening and completing the information container; performing scrolling display on the information container based on the display container; in the current cycle of the rolling display, determining that the information container in the display container reaches the bottom line, and performing lengthening completion on the information container again; determining that a first sub-container in the information containers scrolls out of the display container, removing the first sub-container from the information containers, and starting a scrolling display of a next cycle. The method and the device can support the seamless rolling animation effect of the list when the width and the height of the list container are not fixed.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a processing method and apparatus for implementing seamless scrolling of web page information, an electronic device, and a storage medium.
Background
With the continuous development of computer technology, more content information is often presented on a limited number of pages through a trotting horse lamp scrolling effect.
The existing list seamless scrolling technology is to set the width or height of each container under the list to be fixed, and realize the seamless scrolling animation of the list on the basis of the width or height of each container. However, in practical applications, the situation that the width or height of the list container is not fixed inevitably occurs, such as a news brief recommendation list, and for such a demand, the seamless scrolling animation effect of the list cannot be realized by adopting the existing technology.
Disclosure of Invention
In view of the foregoing, it is necessary to provide a processing method, an apparatus, an electronic device, and a storage medium for implementing seamless scrolling of web page information, which can implement a seamless scrolling animation effect on a list with a high uncertainty.
The invention provides a processing method for realizing seamless rolling of webpage information, which comprises the following steps:
determining that the height of the information container is smaller than that of the display container, and lengthening and completing the information container;
scrolling the information container based on the display container;
in the current cycle of the rolling display, determining that the information container in the display container reaches the bottom line, and performing lengthening completion on the information container again;
determining that a first sub-container in the information containers scrolls out of the display container, removing the first sub-container from the information containers, and starting a scrolling display of a next cycle.
Further, the determining that the height of the information container is smaller than the height of the display container, and performing lengthening completion on the information container includes:
and determining that the height of the information container is smaller than that of the display container, and copying a first sub-container of the information container to the tail end of the information container so as to lengthen and complement the information container.
Further, the scrolling the information container based on the display container includes:
changing the relative height of the display container and the information container based on a preset time interval, and hiding the area exceeding the display container in the information container so as to scroll and display the information container.
Further, the determining that the information container in the display container reaches the bottom line includes:
and obtaining the absolute value of the relative height between the display container and the information container, and 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, determining that the information container in the display container reaches the bottom line.
Further, the performing lengthening completion on the information container again includes:
copying the target sub-container to the tail end of the information container so as to perform lengthening completion on the information container again; wherein the target sub-container is a next sub-container adjacent to the first sub-container in the information container.
Further, the determining that a first child container in the information containers scrolls out of the display container includes:
and obtaining the absolute value of the relative height between the display container and the information container, and determining that the first sub-container in the information container rolls out of the display container if the height of the first sub-container is equal to the absolute value of the relative height.
Further, the starting the scrolling display of the next cycle includes:
resetting the relative height of the information container and the display container to zero to begin the scrolling of the next cycle.
The invention also provides a processing device for realizing seamless rolling of webpage information, which comprises:
the first completion module is used for determining that the height of the information container is smaller than that of the display container and lengthening and completing the information container;
the rolling display module is used for performing rolling display on the information container based on the display container;
the second completion module is used for determining that the information container in the display container reaches the bottom line in the current cycle of the rolling display, and performing lengthening completion on the information container again;
and the cycle switching module is used for determining that the first sub-container in the information container is scrolled out of the display container, removing the first sub-container from the information container and starting the scrolling display of the next cycle.
The invention also provides an electronic device, which comprises a memory, a processor and a computer program which is stored on the memory and can run on the processor, wherein when the processor executes the program, any one of the processing methods for realizing the seamless rolling of the webpage information is realized.
The present invention also proposes a non-transitory computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, implements any one of the processing methods for implementing seamless scrolling of web page information.
The embodiment of the invention has the following beneficial effects:
by means of lengthening and completing the information container when the height of the information container is judged to be smaller than that of the display container and lengthening and completing the information container when the rolling of the information container is detected to reach the bottom line in real time in the rolling display process, the fault condition possibly occurring in the rolling display process is avoided, and therefore the seamless rolling animation effect can be achieved on the list with unfixed height.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
FIG. 1 is a schematic flowchart of a processing method for implementing seamless scrolling of web page information according to an embodiment of the present invention;
FIG. 2 is one of the schematic diagrams of a prior art implementation of a trotting horse lantern animation;
FIG. 3 is a second schematic diagram of a prior art implementation of a trotting horse lantern animation;
FIG. 4 is a third schematic diagram of a prior art implementation of a trotting horse lantern animation;
FIG. 5 is a fourth schematic diagram of a prior art implementation of a trotting horse lantern animation;
FIG. 6 is a schematic diagram of a list scroll display process for displaying fault conditions according to an embodiment of the present invention;
FIG. 7 is a schematic diagram of fault completion provided by an embodiment of the present invention;
FIG. 8 is one of the schematic diagrams of a list scroll display provided by an embodiment of the present invention;
FIG. 9 is a second schematic diagram of fault completion provided by the embodiment of the present invention;
FIG. 10 is a second schematic diagram illustrating a list scrolling display according to an embodiment of the present invention;
fig. 11 is a schematic structural diagram of a processing apparatus for implementing seamless scrolling of web page information according to an embodiment of the present invention;
fig. 12 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be obtained by a person skilled in the art without inventive step based on the embodiments of the present invention, are within the scope of protection of the present invention.
Referring to fig. 1, the present invention provides a processing method for implementing seamless scrolling of web page information, which may include the following steps:
s1, determining that the height of an information container is smaller than that of a display container, and lengthening and completing the information container;
s2, performing rolling display on the information container based on the display container;
s3, in the current cycle of the rolling display, determining that the information container in the display container reaches the bottom line, and lengthening and completing the information container again;
and S4, determining that the first sub-container in the information container rolls out of the display container, removing the first sub-container from the information container, and starting the rolling display of the next cycle.
In the embodiment of the present invention, the information container refers to a container for loading information to be displayed, where the information container includes a plurality of sub containers, and the height of each sub container may not be equal, and a specific height value of a sub container may be determined according to the content amount of each item in the information to be displayed. The display container is used as a window for information to be displayed, and it can be understood that, due to the limited screen size of the display device, more content information is usually presented on a limited number of pages through the trotting horse lamp scrolling effect.
It can be understood that in the up-and-down scrolling scenario, the width of the container is always constant, while the height of the information container varies with the displayed information; accordingly, in a left-right scrolling scenario, the height of the container is constant, while the width of the information container varies from presentation to presentation. It should be noted that, for convenience of description, in the embodiment of the present invention, "height" refers to a height in a scroll up and down scene; for a left-right scrolling scenario, "height" actually refers to the width of the container. That is, "height" in the embodiment of the present invention refers to a length in a direction in which a change may occur.
Before the scrolling is started, if it is determined that the height of the information container is smaller than the height of the display container, a blank area of a fault appears in the display window, and the effect of seamless scrolling cannot be achieved.
In the process of rolling display, when the information container which is lengthened and completed for the first time reaches the bottom line, the blank area of the fault layer can appear by rolling again, and the effect of seamless rolling display can not be achieved. Therefore, when the bottom line of the information container is detected to appear in the display container, the situation that the fault is about to appear is described, and the information container needs to be lengthened and completed again, so that the effect of seamless scrolling display is achieved.
When the first sub-container of the information container completely rolls out of the display container, the first sub-container can be removed, the original second sub-container becomes the first sub-container of the next rolling cycle, and by analogy, the steps S2 to S4 are repeatedly executed, and finally the effect of performing seamless rolling display on the list with the height being unfixed is achieved.
According to the processing method for realizing seamless rolling of webpage information, provided by the embodiment of the invention, the information container is lengthened and supplemented when the height of the information container is judged to be smaller than that of the display container, and the information container is lengthened and supplemented when the information container is detected to roll to reach the bottom line in real time in the rolling display process, so that the fault condition possibly occurring in the rolling display process is avoided, and the seamless rolling animation effect can be realized on a list with unfixed height.
In the embodiment of the present invention, further, step S1 may specifically include:
and determining that the height of the information container is smaller than that of the display container, and copying the first sub-container of the information container to the tail end of the information container to lengthen and complement the information container.
In the embodiment of the invention, when the height of the information container is judged to be smaller than that of the display container, the first sub-container of the information container can be copied and connected to the tail end of the information container, so that the lengthening and completion operation of the information container is realized. It can be understood that in the scenario of the trotting horse lamp scrolling display, the information to be presented is cyclically scrolled in a fixed order, that is, when the last item is displayed for the first time, the first item is cyclically displayed, and so on. Therefore, when the height of the information container is judged to be smaller than that of the display container, the first sub-container of the information container can be copied to the tail end of the information container so as to complete the lengthening of the information container. And if the height of the information container is still smaller than that of the display container after the first sub-container is copied for lengthening and completion, copying the second sub-container for lengthening and completion, and so on until the height of the information container is larger than that of the display container.
According to the processing method for realizing seamless rolling of the webpage information, provided by the embodiment of the invention, the initial sub-container based on the information container is used as a basis for lengthening and completing the information container, so that the technical difficulty of lengthening and completing operation is reduced, and the integrity of lengthening and completing information is ensured.
In the embodiment of the present invention, further, performing a scroll display on the information container based on the display container includes:
and changing the relative height of the display container and the information container based on a preset time interval, and hiding the area beyond the display container in the information container so as to scroll and display the information container.
In the embodiment of the invention, for the implementation process of the scrolling display, the implementation process can be realized by changing the relative heights of the display container and the information container based on the preset time interval. Wherein the position of the display container is fixed, and the scrolling display of the information is realized by changing the height of the information container relative to the display container (the display container is arranged as the topmost layer, and the part of the information container beyond the display container is arranged as the hidden attribute). It should be noted that the process of scrolling may be that the scroll is performed at a constant speed all the time, or the scroll is continued after staying at a certain position for a certain time interval, and so on.
In the embodiment of the present invention, further, determining that the information container in the display container reaches the bottom line includes:
and acquiring the absolute value of the relative height between the display container and the information container, and determining that the information container in the display container reaches the bottom line 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.
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 scroll in the current cycle, and when the displacement of the information list scroll plus the height of the display container is equal to the height of the information container, it indicates that the information container has completed the entire display, that is, it indicates that the information container has reached the bottom line at this time.
In the embodiment of the present invention, further, performing lengthening completion on the information container again includes:
copying the target sub-container to the tail end of the information container so as to perform lengthening and completion on the information container again; wherein the target sub-container is a next sub-container adjacent to the first sub-container in the information container.
It should be noted that when the information container reaches the bottom line, if the information container continues to roll, a fault blank situation may occur, so that the information container needs to be lengthened and completed again, and since the previous lengthening and completing operation is based on the first sub-container, at this time, the next sub-container next to the first sub-container needs to be used for lengthening and completing, and so on, and finally, seamless rolling display of list information is achieved.
In this embodiment of the present invention, further, determining that a first sub-container in the information container scrolls out of the display container includes:
and acquiring the absolute value of the relative height between the display container and the information container, and determining that the first sub-container in the information container rolls out of the display container if the height of the first sub-container is equal to the absolute value of the relative height.
In the embodiment of the invention, a single sub-container is taken as a basis for judging one rolling cycle period. Specifically, for judging whether the first sub-container in the current cycle rolls out of the display container, the absolute value of the relative height between the display container and the information container, that is, the distance that the information container moves upward relative to the display container, may be obtained, and at the same time, the height value of the first sub-container may be obtained.
In an embodiment of the present invention, further, starting the scrolling display of the next cycle includes:
the relative height of the information container and the display container is reset to zero to start the scrolling of the next cycle.
In an embodiment of the present invention, when it is determined that the current cycle of the scrolling display is finished, the first sub-container of the information container may be removed, and the relative height of the information container and the display container may be reset to zero, thereby starting the scrolling display of the next cycle.
Based on the above scheme, in order to better understand the processing method for implementing seamless scrolling of web page information provided by the embodiment of the present invention, the following specific examples are listed for detailed description:
the embodiment of the invention belongs to the technical field of web front ends, is applied to the Internet software industry, and firstly explains the terms of the embodiment of the invention:
(1) js: javaScript is short, and is an internet web front-end script language.
(2) css is a web front end style language.
(3) "overflow: hidden; ": the css attribute is used for hiding the excess part when the container exceeds the width and the height.
(4) "top:0px": the css attribute, which sets how many pixels are relative to the top position of the parent container (display container).
(5) "transform: translateY (0 px)": and the css attribute is used for the moving distance of the dom node, wherein a negative value is upward movement, and a positive value is downward movement.
(6) And (4) Dom node: js lower container node.
(7) Clone: js following the method of operating dom replication nodes.
(8) clientWidth: below js the dom container width method is obtained.
(9) Dom Container height method was obtained below js.
(10) A swiper: the turn-play picture animation frame packaged by js comprises technologies such as list seamless rolling animation and the like.
(11) List seamless scroll animation: a webpage list rolling animation scheme is named as a trotting horse lantern animation, and left-right or up-down seamless connection animation of a list is achieved through js.
It should be noted that, in the prior art, the moving picture effect of the trotting horse lamp is mainly realized based on the swiper technology, as shown in fig. 2 to 5.
Referring to fig. 2, in the same manner as the left-right rolling animation, the swiper-technology trotting horse lantern animation is composed of 3 containers a, B, and C, the outermost layer is a container a (i.e., a display container, the same below), and the container hides the excess part C of the container B (i.e., an information container, the same below) and the container C6 (i.e., a sub-container, the same below) by setting overflow: high of css, so that only the part of the content of the container a is visually seen.
It can be seen that the height of the C-containers is constant, which is the reason for the set height, as shown in fig. 3.
The existing trotting horse lantern animation effect realization process is as follows:
(1) The B container is first set in position relative to the a container, i.e. the B container is at a top position top of the a container of 0px, and then moved upwards at intervals, as shown in fig. 3 to 4.
(2) When the position of the B container moving relative to the A container is-60 px, namely top: at-60 px, C container 1 is completely hidden outside A container, and C container 1 is inserted behind C container 6 by operating dom node js, and then top is set to 0, i.e. the position of B container relative to A container is 0, as shown in FIG. 5.
(3) And (2) repeating the step (1) to see the trotting horse lamp animation.
It should be noted that, in the existing seamless list scrolling technology, the width or height of each container in the list is set to be fixed, and the seamless scrolling animation of the list is realized on the basis, but in the project development process, some requirements are always that the width or height of the list is not fixed, such as a news newsletter recommendation list, so that the existing seamless scrolling technology cannot meet the requirements.
The method is innovated on the basis of the existing list seamless rolling technology, the width or height of each container in the list is not fixed any more, but the width or height of each container in the list is acquired through js clientWidth or clientHeight, and then the comparison is carried out with the list translation distance, so that seamless rolling animation supporting news bulletin recommendation lists is realized without setting fixed width or height.
It should be noted that the solution of the embodiment of the present invention is different from the swiper technology in that no positioning is set in the first step, and the height of the C container is also not set. As shown in fig. 6 to 10, the steps of implementing the moving picture effect of the trotting horse lamp according to the embodiment of the present invention are as follows:
(1) When the content of the container C, namely the short message content, is not fixed, the height of the container C is not fixed at this time, as shown in FIG. 6, a fault occurs, namely the content of the container B is lower than that of the container A, and the blank area of the fault is seen, so that the seamless rolling effect cannot be achieved.
Therefore, in order to solve this problem, the present invention first copies the uppermost C container 1 in the a container range by the clone method of js to prevent the fault from being seen due to insufficient height of the last C container 4 in the a container display range, and then inserts the copied C container 1 into the B container last, as shown in fig. 7, to complement the fault condition.
If the fault is not completed, the C container 2 is continuously copied, and so on, and finally the aim is to ensure that the height of the B container is larger than that of the A container. And (3) executing the step (2) after the fault is completed.
(2) The displacement technology used in the invention is transform, has the same function as the swiper positioning technology, and as shown in fig. 8, the container B is moved upwards for a certain distance at regular intervals, at this time, the height of the container B is obtained by operating the container B node through the jentheight technology of js, and then, whether the height of the container C1 is equal to the moving distance is judged (whether the height of the container C1 is equal to the moving distance in the current cycle is judged, when the height of the container C1 is equal to the moving distance, the container C1 can be removed is judged), if the height of the container C is not equal to the moving distance, the step (3) is executed, and if the height of the container C is equal to the moving distance, the step (4) is executed.
(3) Judging whether the height of the clientheight A container passing js plus the moving distance of the B container (obtained by transform) is equal to the height of the B container (equal indicates that the B container reaches the bottom line), if not, continuing to execute the step 2, if equal, copying the C container 2 by the clone of js and adding the C container to the B container, and finally preventing the C container from moving upwards continuously and generating faults, as shown in figure 9.
(4) Assuming that the height of the acquired C container 1 is 80px and the just-moved distance transfrom has also been moved to 80px, and the two are equal, the C container 1 node is operated by js to delete it, and at the same time, the translateY of transfrom is set to 0, as shown in FIG. 10. And returning to the step 2 for circulation at the moment, thereby realizing the seamless rolling animation of the list with the unfixed height.
Compared with the prior art, the method and the device have the advantage that when the width and the height of the list container are not fixed, the seamless rolling animation effect of the list can be realized.
Referring to fig. 11, the present invention further provides a processing apparatus for implementing seamless scrolling of web page information, including:
the first completion module 1 is used for determining that the height of the information container is smaller than that of the display container and performing lengthened completion on the information container;
the rolling display module 2 is used for performing rolling display on the information container based on the display container;
the second completion module 3 is used for determining that the information container in the display container reaches the bottom line in the current cycle of the rolling display, and lengthening and completing the information container again;
and the cycle switching module 4 is used for determining that the first sub-container in the information container is scrolled out of the display container, removing the first sub-container from the information container, and starting scrolling display of the next cycle.
Further, the first completion module 1 is specifically configured to:
and determining that the height of the information container is smaller than that of the display container, and copying the first sub-container of the information container to the tail end of the information container to lengthen and complement the information container.
Further, the scrolling module 2 is specifically configured to:
and changing the relative height of the display container and the information container based on a preset time interval, and hiding the area beyond the display container in the information container so as to scroll and display the information container.
Further, the second completion module 3 is specifically configured to:
and acquiring the absolute value of the relative height of the display container and the information container, and determining that the information container in the display container reaches the bottom line 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.
Further, the second completion module 3 is specifically configured to:
copying the target sub-container to the tail end of the information container so as to perform lengthening and completion on the information container again; wherein the target sub-container is a next sub-container adjacent to the first sub-container in the information container.
Further, the cyclic switching module 4 is specifically configured to:
and acquiring the absolute value of the relative height between the display container and the information container, and determining that the first sub-container in the information container rolls out of the display container if the height of the first sub-container is equal to the absolute value of the relative height.
Further, the cyclic switching module 4 is specifically configured to:
the relative height of the information container and the display container is reset to zero to start the scrolling of the next cycle.
FIG. 12 is a diagram that illustrates an internal structure of an electronic device in one embodiment. The electronic device may specifically be a terminal or a server. As shown in fig. 12, the electronic device includes a processor, a memory, and a network interface connected by a system bus. The memory comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium of the electronic device stores an operating system and may further store a computer program that, when executed by the processor, causes the processor to implement the age identification method. The internal memory may also have a computer program stored therein, which when executed by the processor, causes the processor to perform the age identification method. It will be understood by those skilled in the art that the structure shown in fig. 12 is a block diagram of only a portion of the structure related to the present application, and does not constitute a limitation on the electronic device to which the present application applies, and that a particular electronic device may include more or fewer components than those shown in the drawings, or may combine certain components, or have a different arrangement of components:
in one embodiment, an electronic device is provided, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the program, the processor implements any one of the processing methods for implementing seamless scrolling of web page information, for example, the processing methods include:
s1, determining that the height of an information container is smaller than that of a display container, and lengthening and completing the information container;
s2, performing rolling display on the information container based on the display container;
s3, in the current cycle of the rolling display, determining that the information container in the display container reaches the bottom line, and lengthening and completing the information container again;
and S4, determining that the first sub-container in the information container rolls out of the display container, removing the first sub-container from the information container, and starting the next cycle of rolling display.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a non-volatile computer-readable storage medium, and can include the processes of the embodiments of the methods described above when the program is executed. Any reference to memory, storage, database, or other medium used in the embodiments provided herein may include non-volatile and/or volatile memory, among others. 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 a variety of forms such as Static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double Data Rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous Link DRAM (SLDRAM), rambus (Rambus) direct RAM (RDRAM), direct Rambus Dynamic RAM (DRDRAM), and Rambus Dynamic RAM (RDRAM), among others.
In another aspect, an embodiment of the present invention further provides a non-transitory computer readable storage medium, on which a computer program is stored, where the computer program is implemented by a processor to execute the method provided by the foregoing embodiments, for example, including:
s1, determining that the height of an information container is smaller than that of a display container, and lengthening and completing the information container;
s2, performing rolling display on the information container based on the display container;
s3, in the current cycle of the rolling display, determining that the information container in the display container reaches the bottom line, and lengthening and completing the information container again;
and S4, determining that the first sub-container in the information container rolls out of the display container, removing the first sub-container from the information container, and starting the rolling display of the next cycle.
All possible combinations of the technical features in the above embodiments may not be described for the sake of brevity, but should be considered as being within the scope of the present disclosure as long as there is no contradiction between the combinations of the technical features.
The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the present application. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent application shall be subject to the appended claims.
Claims (10)
1. A processing method for realizing seamless scrolling of webpage information is characterized by comprising the following steps:
determining that the height of the information container is smaller than that of the display container, and lengthening and completing the information container;
performing scrolling display on the information container based on the display container;
in the current cycle of the rolling display, determining that the information container in the display container reaches the bottom line, and performing lengthening completion on the information container again;
determining that a first sub-container in the information container scrolls out of the display container, removing the first sub-container from the information container, and starting a scrolling display of a next cycle.
2. The processing method of claim 1, wherein the determining that the height of the information container is smaller than the height of the display container, and the lengthening and completing the information container comprises:
and determining that the height of the information container is smaller than that of the display container, and copying a first sub-container of the information container to the tail end of the information container so as to lengthen and complement the information container.
3. The processing method for seamless scrolling of information on web pages according to claim 1, wherein said scrolling the information container based on the display container comprises:
changing the relative height of the display container and the information container based on a preset time interval, and hiding the area exceeding the display container in the information container so as to scroll and display the information container.
4. The method of claim 1, wherein the determining that the information container in the display container reaches the bottom line comprises:
and obtaining the absolute value of the relative height between the display container and the information container, and 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, determining that the information container in the display container reaches the bottom line.
5. The method for seamless scrolling of information on web pages according to claim 1, wherein said step of completing the information container again by lengthening comprises:
copying the target sub-container to the tail end of the information container so as to perform lengthening completion on the information container again; wherein the target sub-container is a next sub-container adjacent to the first sub-container in the information container.
6. The method for seamless scrolling of information on a web page according to claim 1, wherein said determining that a first sub-container of the information containers scrolls out of the display container comprises:
and obtaining the absolute value of the relative height between the display container and the information container, and if the height of the first sub-container is equal to the absolute value of the relative height, determining that the first sub-container in the information container rolls out of the display container.
7. The method for seamless scrolling of information on web pages according to claim 1, wherein said starting of scrolling display of the next cycle comprises:
resetting the relative height of the information container and the display container to zero to begin the scrolling of the next cycle.
8. A processing apparatus for seamless scrolling of information on a web page, comprising:
the first completion module is used for determining that the height of the information container is smaller than that of the display container and lengthening and completing the information container;
the rolling display module is used for performing rolling display on the information container based on the display container;
the second completion module is used for determining that the information container in the display container reaches the bottom line in the current cycle of the rolling display, and lengthening and completing the information container again;
and the cycle switching module is used for determining that the first sub-container in the information container is scrolled out of the display container, removing the first sub-container from the information container, and starting the scrolling display of the next cycle.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements a processing method for implementing seamless scrolling of web page information according to any one of claims 1 to 7 when executing the program.
10. A non-transitory computer readable storage medium, on which a computer program is stored, wherein the computer program, when executed by a processor, implements the processing method of implementing seamless scrolling of web page information according to any of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210788606.0A CN115329226A (en) | 2022-07-06 | 2022-07-06 | Processing method, device, equipment and medium for realizing seamless rolling of webpage information |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210788606.0A CN115329226A (en) | 2022-07-06 | 2022-07-06 | Processing method, device, equipment and medium for realizing seamless rolling of webpage information |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115329226A true CN115329226A (en) | 2022-11-11 |
Family
ID=83918152
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210788606.0A Pending CN115329226A (en) | 2022-07-06 | 2022-07-06 | Processing method, device, equipment and medium for realizing seamless rolling of webpage information |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115329226A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116185323A (en) * | 2023-02-17 | 2023-05-30 | 广州市保伦电子有限公司 | Infinite circulation scrolling display method, device, storage medium and system |
-
2022
- 2022-07-06 CN CN202210788606.0A patent/CN115329226A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116185323A (en) * | 2023-02-17 | 2023-05-30 | 广州市保伦电子有限公司 | Infinite circulation scrolling display method, device, storage medium and system |
| CN116185323B (en) * | 2023-02-17 | 2024-03-08 | 广东保伦电子股份有限公司 | Infinite circulation scrolling display method, device, storage medium and system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109254773B (en) | Skeleton page generation method, device, equipment and storage medium | |
| CN107092643B (en) | Barrage rendering method and device | |
| CN106294658B (en) | Webpage quick display method and device | |
| CN103853417A (en) | Rolling and pagination display method and device for network dynamic picture | |
| CN108874393B (en) | Rendering method, rendering device, storage medium and computer equipment | |
| CN111580819B (en) | Page generation method and device, computer equipment and storage medium | |
| CN115329226A (en) | Processing method, device, equipment and medium for realizing seamless rolling of webpage information | |
| CN113408241A (en) | Text data processing method and device, electronic equipment and readable medium | |
| CN108062336B (en) | Media information processing method and device | |
| CN105988793A (en) | Image display method and apparatus used for screen display device | |
| CN110765208A (en) | Data synchronization method and device, electronic equipment and storage medium | |
| CN114579912A (en) | Page layout method, device, equipment and medium | |
| CN110209447B (en) | List page data display method and list page data display device | |
| CN106874387B (en) | Method for displaying real-time information in self-adaptive HTML (Hypertext markup language) scrolling mode | |
| CN115563418A (en) | Page self-adaptive layout method, page information generation method and related device | |
| CN105389308B (en) | Webpage display processing method and device | |
| CN111914198A (en) | Method, system and electronic equipment for realizing browser compatibility | |
| CN114491344B (en) | Webpage resource downloading type determining method, device, equipment and medium | |
| CN105824790A (en) | Equipment table adapting method, computer equipment and mobile terminal | |
| CN113987388A (en) | Text display method and device and electronic equipment | |
| CN110110260B (en) | Page rendering method and device and electronic equipment | |
| CN113032696A (en) | Display method and display device of page picture | |
| CN109710869B (en) | Page display method and device of webpage content, server and storage medium | |
| CN115098104B (en) | Carousel component generation method and device | |
| CN111079050B (en) | Page information acquisition method, page information acquisition device and computer storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20221216 Address after: 518000 Room 201, building A, No. 1, Qian Wan Road, Qianhai Shenzhen Hong Kong cooperation zone, Shenzhen, Guangdong (Shenzhen Qianhai business secretary Co., Ltd.) Applicant after: Shenzhen Zhongdian Port Technology Co.,Ltd. Address before: Office 513-515, No. 3000 Huandao East Road, Hengqin New District, Zhuhai City, Guangdong Province, 519000 Applicant before: Guangdong Aixiyi Information Technology Co.,Ltd. |