Web page scrolling positioning method, device and storage medium

Abstract

The present application provides a web page scrolling positioning method, device and storage medium, including: when a web page is scrolled and displayed on a browser, obtaining the display information of the monitored element returned by the listener when the display state of the monitored element in the display area changes, wherein the thread used by the listener is different from the thread used by the browser to display the web page; performing style processing on the title element associated with the monitored element according to the display information, obtaining the style data of the title element in the navigation area; and displaying the title element in the navigation area according to the style data of the title element in the navigation area. In this solution, the listener returns the display information when the display state of the monitored element changes, which reduces the amount of data processing and CPU overhead, and the listener and the web page display are asynchronous, and there will be no frame drop phenomenon.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a web page scrolling positioning method, device and storage medium. Background Art

[0002] When a web page is displayed on a browser, a navigation area and a window area are often set. When the navigation area is clicked, the corresponding window area can be located. When the content in the window area is scrolled, it will also be displayed in the navigation area.

[0003] Normally, anchor points or scroll events are used for web page scrolling positioning. The positioning accuracy of anchor point scrolling positioning is not high. Using scroll events for web page scrolling positioning can improve positioning accuracy. However, when scroll events are triggered frequently, since scroll events involve a lot of calculations and processing processes such as Document ObjectionModel (DOM) element operations, which requires a relatively long processing time, when these processing processes are not completed before the next scroll event is triggered, frame drops are likely to occur. In addition, scroll events are often continuous, which means that scroll events will be triggered frequently, which will further aggravate the frame drop phenomenon. Summary of the invention

[0004] The present application provides a web page scrolling positioning method, device and storage medium, which are used to solve the problem of frame drop that the existing web page scrolling positioning method is prone to.

[0005] In a first aspect, the present application provides a web page scrolling positioning method, comprising:

[0006] When the webpage is scrolled on the browser, the display information of the monitored element returned by the listener is obtained, wherein the thread used by the listener is different from the thread used by the browser to display the webpage, and the display information is returned when the display state of the monitored element in the display area is monitored to change;

[0007] Performing style processing on the title element associated with the monitored element according to the display information, and obtaining style data of the title element in the navigation area;

[0008] The title element is displayed in the navigation area according to the style data of the title element in the navigation area.

[0009] In one embodiment, style processing is performed on the title element associated with the monitored element according to the display information to obtain style data of the title element in the navigation area, specifically including:

[0010] When a change in the display status of multiple monitored elements is detected, a target element is selected from the multiple monitored elements according to the display information, wherein the target element is the monitored element closest to the navigation area;

[0011] Perform style processing on the title element associated with the target element to obtain style data of the title element in the navigation area.

[0012] In one embodiment, selecting a target element from a plurality of monitored elements according to display information specifically includes:

[0013] Determine the distance between the top of the area where the monitored element is located and the top of the navigation area according to the position information of the area where the monitored element is located, and record it as the first distance;

[0014] If the first distance is less than or equal to the distance threshold, the target element is the monitored element corresponding to the first distance;

[0015] The display information includes the location information of the area where the target element is located, and the distance threshold is the distance between the bottom of the navigation area and the top of the navigation area.

[0016] In the above technical solution, when multiple monitored elements are monitored, the monitored element closest to the navigation area is selected as the target element, and the style of the title element associated with the target element is adjusted to prevent multiple title elements from being marked in the navigation area, thereby improving the accuracy of web page scrolling positioning.

[0017] In one embodiment, style processing is performed on the title element associated with the target element to obtain style data of the title element in the navigation area, specifically including:

[0018] Perform selected style processing on the title element associated with the target element to obtain style data of the title element in the navigation area.

[0019] In one embodiment, the title element associated with the target element is subjected to selected style processing to obtain style data of the title element in the navigation area, specifically including:

[0020] The attribute parameters of the selected style of the navigation area are set to the identification information of the title element associated with the target element.

[0021] In the above technical solution, by setting the attribute parameters of the selected style of the navigation area to the identification information of the title element associated with the target element, there is no need to add the step of modifying the styles of other title elements, which can reduce the amount of code and improve processing performance.

[0022] In one embodiment, before obtaining the display information of the monitored element returned by the listener, the method further includes:

[0023] A listener for each title element in a web page and a listener for each paragraph element in a web page are established; wherein the monitored elements include title elements and paragraph elements.

[0024] In one embodiment, before obtaining the display information of the monitored element returned by the listener, the method further includes:

[0025] Get the node relationship between each title element and each paragraph element;

[0026] Associate title elements and paragraph elements based on node relationships.

[0027] In one embodiment, before obtaining the node relationship between each title element and each paragraph element, the method further includes:

[0028] Identification information is configured for each title element, and identification information of each title element is generated.

[0029] In a second aspect, the present application provides a web page scrolling positioning device, comprising:

[0030] An acquisition module, used to acquire display information of the monitored element returned by the listener when the webpage is scrolled and displayed on the browser, wherein the thread used by the listener is different from the thread used by the browser to display the webpage, and the display information is returned when the display state of the monitored element in the display area is monitored to change;

[0031] A processing module, used to process the style of the title element associated with the monitored element according to the display information, and obtain the style data of the title element in the navigation area;

[0032] The processing module is also used to display the title element in the navigation area according to the style data of the title element in the navigation area.

[0033] In a third aspect, the present application provides a web page scrolling positioning device, including: a memory, a processor;

[0034] Memory; Memory for storing processor executable instructions;

[0035] The processor is configured to execute the web page scrolling positioning method involved in the first aspect and the optional solution.

[0036] In a fourth aspect, the present application provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the web page scrolling positioning method involved in the first aspect and the optional scheme.

[0037] In a fifth aspect, the present application provides a computer program product, including a computer program, which, when executed by a processor, implements the web page scrolling positioning method involved in the first aspect and the optional scheme.

[0038] The web page scrolling positioning method, device and storage medium provided by the present application use a different thread used by the listener than the thread used by the browser to display the web page, that is, the listening process of the listener and the display process of the browser are asynchronous, and the listening process does not affect the display of the web page, so that the web page frame drop phenomenon will not occur due to the need to process the listening process. In addition, the listener monitors the display state changes of the monitored element, and returns the display information of the monitored element when changes occur, which can reduce the amount of data processing, thereby reducing the CPU overhead and improving the web page display performance. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0040] Figure 1 A schematic diagram of a service system provided in accordance with an embodiment of the present application;

[0041] Figure 2 A schematic diagram of a flow chart of a web page scrolling positioning method provided by another embodiment of the present application;

[0042] Figure 3 A schematic diagram of a browser interface provided by another embodiment of the present application;

[0043] Figure 4 A schematic diagram of a flow chart of a web page scrolling positioning method provided by another embodiment of the present application;

[0044] Figure 5a and Figure 5b A schematic diagram of a browser interface provided by another embodiment of the present application;

[0045] Figure 6 A schematic diagram of the structure of a web page scrolling positioning device provided by another embodiment of the present application;

[0046] Figure 7 A schematic diagram of the structure of a client provided in another embodiment of the present application.

[0047] The above drawings have shown clear embodiments of the present application, which will be described in more detail later. These drawings and text descriptions are not intended to limit the scope of the present application in any way, but to illustrate the concept of the present application to those skilled in the art by referring to specific embodiments. DETAILED DESCRIPTION

[0048] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application. Instead, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims.

[0049] In order to solve the technical problem that frame drops are prone to occur when using scroll events, the present application provides a web page scroll positioning method, device and storage medium. The technical concept of the present application is: a listener is configured for each title element and paragraph element, and the listening process of the listener and the web page display process are asynchronous, so that the listening process will not affect the web page display process, so that the web page display process will not be processed in time due to the processing of the listening process, and the web page frame drop phenomenon will not occur. And the listener will only return display information when the display state of the monitored element changes, which can reduce the amount of data processing and reduce the GPU overhead, thereby improving the web page display performance.

[0050] like Figure 1 As shown, an embodiment of the present application provides a service system, which includes a client 101 and a server 102.

[0051] Among them, the client 101 and the server 102 are communicated and connected, the client 101 is used to initiate a web page request to the server, and after receiving the web page request, the server 102 sends the web page data to the client, and after receiving the web page data, the client 101 renders the web page data in the browser and displays it to the user in a graphical interface.

[0052] The client 101 displays the web page to the user in a graphical user interface and is also used to execute the web page scrolling positioning method described in the following embodiment. The method is described in detail in the following embodiment and will not be repeated here.

[0053] like Figure 2 As shown, an embodiment of the present application provides a web page scrolling positioning method, the execution subject of the web page scrolling positioning method is a client, and the method includes the following steps:

[0054] S201. When a web page is scrolled and displayed on a browser, the client obtains display information of the monitored element returned by the listener.

[0055] Among them, Figure 3 As shown, a web page includes multiple title elements and multiple paragraph elements. Usually, each title element is provided with at least one paragraph element. The element content in the title element is an introduction to the element content in the paragraph element.

[0056] The browser is provided with a navigation area 111 and a display area 112. The navigation area is used to display the title elements in the web page. The display area is used to display the title elements and paragraph elements. Usually, the display area can only display part of the title elements and part of the paragraph elements, and the remaining title elements and paragraph elements are invisible.

[0057] The monitored elements include title elements and paragraph elements. A listener is deployed for each title element and each paragraph element in the web page to monitor the visibility of each title element and each paragraph element in the display area. When the display status of the monitored title element and paragraph element in the display area changes, the display information of the monitored element is returned.

[0058] The display information of the monitored element includes identification information, position information and display ratio. The position information of the monitored element includes the top position, bottom position, left position and right position of the area where the monitored element is located. The display ratio refers to the display ratio of the monitored element in the display area.

[0059] Continue to refer Figure 3 As shown, the web page includes title element a, paragraph element b, paragraph element c, title element d and paragraph element e. The display ratio of title element a is 0%, that is, it is not visible in the display area. The display ratio of paragraph element b is 70%, the display ratio of paragraph element c and title element d is 100%, and the display ratio of paragraph element d is 30%.

[0060] Among them, when the web page is scrolled and displayed on the browser, the listener monitors the display status of each monitored element. The thread used by the listener is different from the thread used by the browser to display the web page, that is, the listener monitoring process and the browser display process are asynchronous, and the monitoring process and the display process will not affect each other, so that the browser will not experience frame drops due to the need to handle the monitoring process.

[0061] S202: The client performs style processing on the title element associated with the monitored element according to the display information, and obtains style data of the title element in the navigation area.

[0062] The element content in the title element is a brief introduction to the element content in the paragraph element below the title element. The paragraph element is associated with the title element above the paragraph element.

[0063] If the monitored element whose display state changes is a paragraph element, the identification information of the title element associated with the original paragraph element is obtained, and the style of the title element in the navigation area is processed according to the identification information of the title element to obtain the style data of the title element in the navigation area.

[0064] If the monitored element whose display state changes is a title element, the identification information of the title element is directly obtained, and the style of the title element in the navigation area is processed to obtain the style data of the title element in the navigation area.

[0065] S203: The client displays the title element in the navigation area according to the style data of the title element in the navigation area.

[0066] After the style data of the title element in the navigation area is obtained, the title element is displayed in the navigation area according to the style data of the title element in the navigation area.

[0067] In one embodiment, the style data of the title element in the navigation area is selected style data, and the style of the title element in the navigation area is made to be in a selected state.

[0068] In the above technical solution, since the listener and the web page display are performed asynchronously, the monitoring process does not affect the web page display, and there will be no web page frame drop problem. In addition, the listener monitors the display state changes of the monitored element and returns the display information of the monitored element when changes occur, which can reduce the amount of data processing, thereby reducing CPU overhead and improving web page display performance.

[0069] like Figure 4 As shown, an embodiment of the present application provides a web page scrolling positioning method, the web page scrolling positioning method comprising the following steps:

[0070] S301: The client configures identification information for each title element and generates identification information for each title element.

[0071] Wherein, identification information is configured for each title element in the web page to obtain identification information of each title element, and the identification information is used for style processing.

[0072] In one embodiment, identification information of the title element is defined inside each title tag to configure identification information for each title element.

[0073] In one embodiment, a class name is added to each title tag in the web page as identification information of the title element.

[0074] S302: The client obtains the node relationship between each title element and each paragraph element.

[0075] Herein, a DOM table of the web page is obtained, and the node relationship between each title element and each paragraph element is obtained according to the DOM table.

[0076] S303: The client associates the title element with the paragraph element according to the node relationship.

[0077] After obtaining the node relationship between each title element and each paragraph element, the title element and the paragraph element are associated according to the node relationship.

[0078] In one embodiment, a paragraph element between two title elements is managed with the title element located above the two title elements, and a paragraph element located at the bottom is associated with the title element closest to the paragraph element.

[0079] Continue to refer Figure 3 As shown, the web page contains title element a, paragraph element b, paragraph element c, title element d and paragraph element e. Paragraph element b and paragraph element c are associated with title element a, and paragraph element e is associated with title element.

[0080] S304: The client establishes a listener for each title element in the web page and a listener for each paragraph element in the web page.

[0081] The monitored elements include title elements and paragraph elements. A listener for each title element and a listener for each paragraph element in the web page are established to achieve real-time monitoring of the display status of each title element and each paragraph element.

[0082] In one embodiment, when a web page is initialized, a list of all DOM elements to be monitored is obtained through a style selector, the list is traversed in a loop, and a listener is established for each DOM element in the list. When establishing the listener, the attribute parameters of the listener are configured to change the size of the monitoring window, thereby affecting the display ratio in the display information returned by the listener. In this embodiment, the window size is set to the size of the window area on the browser.

[0083] S305: When the webpage is scrolled and displayed on the browser, the client obtains the display information of the monitored element returned by the listener.

[0084] Among them, the thread used by the listener is different from the thread used by the browser to display the web page, so that the listening process and the web page display process will not affect each other, and there will be no frame drop phenomenon.

[0085] The listener monitors the display status changes of each monitored element in real time, and returns the display information of the monitored element when the display status of each monitored element changes, so as to adjust the style of the title element in the navigation area in real time according to the display information, prevent multiple title elements from being marked in the navigation area, thereby improving the accuracy of web page scrolling positioning.

[0086] The listener usually returns an array, each member of which is a change object. If the display status of two monitored elements changes at the same time, the array includes two members. Each member contains the following information:

[0087] Monitoring time, showing the time when the status changes;

[0088] The monitored element is a DOM node;

[0089] The position information of the window area, including the top position, bottom position, left position and right position of the window area;

[0090] The position information of the area where the monitored element is located, including the top position, bottom position, left position and right position of the area where the monitored element is located;

[0091] The location information of the intersection area between the monitored element area and the window area;

[0092] The ratio information of the intersection area. When the ratio information is 100%, it means full display, and when the ratio information is 0%, it means no display.

[0093] S306: Perform style processing on the title element associated with the monitored element according to the display information to obtain style data of the title element in the navigation area.

[0094] When the listener monitors the display status of the monitored element, it may monitor changes in the display status of two monitored elements at the same time.

[0095] The following distance description monitors the display status of two monitored elements at the same time. Figure 5a As shown in FIG. 1 , at the previous moment, the display ratios of title element a, paragraph element b, and paragraph element c are all 100%, and the display ratios of title element d and paragraph element e are 0%. At the current moment, Figure 5b As shown, the display ratios of paragraph element b and paragraph element c are still 100%, the display ratio of paragraph element e is still 0%, the display ratio of title element a is reduced to 90%, and the display ratio of title element d is increased to 10%.

[0096] When the display status of multiple monitored elements changes, the following style processing is specifically performed: the monitored element closest to the navigation area is selected from the multiple monitored elements according to the display information as the target element. The title element associated with the target element is style processed to obtain the style data of the title element.

[0097] When selecting a target element, the following steps are specifically used for selection: extracting the location information of the area where the target element is located from the display information of the monitored element, and determining the distance between the top of the area where the monitored element is located and the top of the navigation area according to the location information of the area where the monitored element is located, and recording it as the first distance. Determine whether the first distance is less than a distance threshold, if the first distance is less than or equal to the distance threshold, the target element is the monitored element corresponding to the first distance.

[0098] The distance threshold is the distance between the bottom of the navigation area and the top of the navigation area. When the distance between the top of the area where the monitored element is located and the top of the navigation area is less than or equal to the distance between the bottom of the navigation area and the top of the navigation area, it indicates that the monitored element will gradually disappear, and the title element associated with the monitored element needs to be styled.

[0099] After obtaining the target element, style processing is performed on the title element associated with the target element to obtain style data of the title element.

[0100] In one embodiment, the title element associated with the target element is processed by selecting a style to obtain the style data of the title element. More specifically, the attribute parameters of the selected style of the navigation area are set to the identification information of the title element associated with the target element, thereby modifying the style data of the title element associated with the target element.

[0101] When the content displayed in the browser's display area scrolls, the listener will monitor the display status of the title element or paragraph element, and return the display information of the monitored element when the display status changes. When the display area is large, two or more monitored elements may be monitored at the same time, so it is impossible to determine which element is disappearing. By adding JavaScript code to the web page, the bottom of the navigation area is used as the dividing line to select the monitored element that meets the conditions from the multiple monitored elements.

[0102] In one embodiment, the top value of the area where the monitored element is located is selected to be smaller than the top value of the navigation area, that is, as long as a monitored element scrolls to the top navigation position, it is an element that meets the conditions.

[0103] Determine the identifier of the title element associated with the element that meets the conditions, and assign the identifier to the attribute parameter active of the selected style of the navigation area to dynamically modify the selected style of the title element in the navigation area, thereby dynamically selecting the navigation area when the title area scrolls to the top of the window area.

[0104] S307: The client displays the title element in the navigation area according to the style data of the title element in the navigation area.

[0105] After the style data of the title element in the navigation area is obtained, the title element is displayed on the navigation area according to the style data of the title element in the navigation area.

[0106] In the above technical solution, when changes in the display status of multiple monitored elements are monitored, the monitored element closest to the navigation area is selected, and the style of the title element associated with the monitored element is adjusted to achieve marking the title element in the navigation area after the title element or the paragraph element associated with the title element begins to disappear.

[0107] like Figure 6 As shown, another embodiment of the present application provides a web page scrolling positioning device, and the web page scrolling positioning state specifically includes:

[0108] The acquisition module 501 is used to acquire display information of the monitored element returned by the listener when the webpage is scrolled and displayed on the browser, wherein the thread used by the listener is different from the thread used by the browser to display the webpage, and the display information is returned when the display state of the monitored element in the display area is monitored to change;

[0109] The processing module 502 is used to perform style processing on the title element associated with the monitored element according to the display information, and obtain style data of the title element in the navigation area;

[0110] The processing module 502 is further configured to display the title element in the navigation area according to the style data of the title element in the navigation area.

[0111] In one embodiment, the processing module 502 is specifically configured to:

[0112] When a change in the display status of multiple monitored elements is detected, a target element is selected from the multiple monitored elements according to the display information, wherein the target element is the monitored element closest to the navigation area;

[0113] Perform style processing on the title element associated with the target element to obtain style data of the title element in the navigation area.

[0114] In one embodiment, the processing module 502 is specifically configured to:

[0115] Determine the distance between the top of the area where the monitored element is located and the top of the navigation area according to the position information of the area where the monitored element is located, and record it as the first distance;

[0116] If the first distance is less than or equal to the distance threshold, the target element is the monitored element corresponding to the first distance;

[0117] The display information includes the location information of the area where the target element is located, and the distance threshold is the distance between the bottom of the navigation area and the top of the navigation area.

[0118] In one embodiment, the processing module 502 is specifically configured to:

[0119] Perform selected style processing on the title element associated with the target element to obtain style data of the title element in the navigation area.

[0120] In one embodiment, the processing module 502 is further configured to:

[0121] The attribute parameters of the selected style of the navigation area are set to the identification information of the title element associated with the target element.

[0122] In one embodiment, the processing module 502 is further configured to:

[0123] A listener for each title element in a web page and a listener for each paragraph element in a web page are established; wherein the monitored elements include title elements and paragraph elements.

[0124] In one embodiment, the processing module 502 is further configured to:

[0125] Get the node relationship between each title element and each paragraph element;

[0126] Associate title elements and paragraph elements based on node relationships.

[0127] In one embodiment, the processing module 502 is further configured to:

[0128] Identification information is configured for each title element, and identification information of each title element is generated.

[0129] like Figure 7 As shown, another embodiment of the present application provides a server 600, which is an intermediate server or a user server. The server 600 includes: a transmitter 601, a receiver 602, a memory 603, and a processor 604.

[0130] The transmitter 601 is used to send instructions and data, the receiver 602 is used to receive instructions and data, the memory 603 is used to store computer-executable instructions, and the processor 604 is used to execute the computer-executable instructions stored in the memory to implement the various steps performed by the webpage scrolling positioning method in the above embodiment. For details, please refer to the relevant description in the above webpage scrolling positioning method embodiment.

[0131] Optionally, the memory 603 can be independent or integrated with the processor 604. When the memory 603 is independently provided, the processing device further includes a bus for connecting the memory 603 and the processor 604.

[0132] The embodiment of the present application further provides a computer-readable storage medium, in which computer-executable instructions are stored. When a processor executes the computer-executable instructions, the web page scrolling positioning method executed by the above processing device is implemented.

[0133] The embodiment of the present application also provides a computer program product, including instructions, which, when executed by a processor, implement the web page scrolling positioning method executed by the above processing device.

[0134] Those skilled in the art will readily appreciate other embodiments of the present application after considering the specification and practicing the invention disclosed herein. The present application is intended to cover any modification, use or adaptation of the present application, which follows the general principles of the present application and includes common knowledge or customary techniques in the art that are not disclosed in the present application. The specification and examples are intended to be exemplary only, and the true scope and spirit of the present application are indicated by the following claims.

[0135] It should be understood that the present application is not limited to the precise structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present application is limited only by the appended claims.

Claims

1. A web page scrolling positioning method, characterized in that: include: When a webpage is scrolled and displayed on the browser, display information of the monitored element returned by the listener is obtained, wherein the thread used by the listener is different from the thread used by the browser to display the webpage, and the display information is returned when a display state change of the monitored element in the display area is monitored; Performing style processing on the title element associated with the monitored element according to the display information to obtain style data of the title element in the navigation area; Displaying the title element in the navigation area according to the style data of the title element in the navigation area; Performing style processing on the title element associated with the monitored element according to the display information to obtain style data of the title element in the navigation area specifically includes: When a change in the display status of multiple monitored elements is detected, a target element is selected from the multiple monitored elements according to the display information, wherein the target element is the monitored element closest to the navigation area; Perform style processing on the title element associated with the target element to obtain style data of the title element in the navigation area.

2. The method according to claim 1, characterized in that: Selecting a target element from the multiple monitored elements according to the display information specifically includes: Determine the distance between the top of the area where the monitored element is located and the top of the navigation area according to the position information of the area where the monitored element is located, and record it as a first distance; If the first distance is less than or equal to the distance threshold, the target element is the monitored element corresponding to the first distance; The display information includes location information of the area where the target element is located, and the distance threshold is the distance between the bottom of the navigation area and the top of the navigation area.

3. The method according to claim 1, characterized in that Performing style processing on the title element associated with the target element to obtain style data of the title element in the navigation area specifically includes: The title element associated with the target element is subjected to selected style processing to obtain style data of the title element in the navigation area.

4. The method according to claim 3, characterized in that Performing selected style processing on the title element associated with the target element to obtain style data of the title element in the navigation area specifically includes: The attribute parameters of the selected style of the navigation area are set to the identification information of the title element associated with the target element.

5. The method according to any one of claims 1 to 4, characterized in that: Before obtaining the display information of the monitored element returned by the listener, the method further includes: A listener for each title element in the web page and a listener for each paragraph element in the web page are established; wherein the monitored elements include title elements and paragraph elements.

6. The method according to any one of claims 1 to 4, characterized in that Before obtaining the display information of the monitored element returned by the listener, the method further includes: Get the node relationship between each title element and each paragraph element; The title element and the paragraph element are associated according to the node relationship.

7. The method according to claim 6, characterized in that Before obtaining the node relationship between each title element and each paragraph element, the method further includes: Identification information is configured for each of the title elements to generate identification information for each of the title elements.

8. A web page scrolling positioning device, characterized in that: include: An acquisition module, used for acquiring display information of a monitored element returned by a listener when a webpage is scrolled and displayed on a browser, wherein a thread used by the listener is different from a thread used by the browser to display the webpage, and the display information is returned when a display state change of the monitored element in a display area is monitored; A processing module, used for processing the style of the title element associated with the monitored element according to the display information, and obtaining the style data of the title element in the navigation area; The processing module is also used to display the title element in the navigation area according to the style data of the title element in the navigation area; The processing module is specifically used for: When a change in the display status of multiple monitored elements is detected, a target element is selected from the multiple monitored elements according to the display information, wherein the target element is the monitored element closest to the navigation area; Perform style processing on the title element associated with the target element to obtain style data of the title element in the navigation area.

9. A web page scrolling positioning device, characterized in that: include: Memory, processor; Memory; a memory for storing instructions executable by the processor; Wherein, the processor is configured to execute the web page scrolling positioning method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are executed by a processor, they are used to implement the webpage scrolling positioning method according to any one of claims 1 to 7.

11. A computer program product, characterized in that It comprises a computer program, which, when executed by a processor, implements the web page scrolling positioning method as claimed in any one of claims 1 to 7.

Images