CN110851058A

CN110851058A - Page virtual scrolling method, device and equipment

Info

Publication number: CN110851058A
Application number: CN201911093024.5A
Authority: CN
Inventors: 蒋吉麟
Original assignee: Alipay Hangzhou Information Technology Co Ltd
Current assignee: Alipay Hangzhou Information Technology Co Ltd
Priority date: 2019-11-11
Filing date: 2019-11-11
Publication date: 2020-02-28
Anticipated expiration: 2039-11-11
Also published as: CN110851058B

Abstract

The embodiment of the specification discloses a page virtual scrolling method, a page virtual scrolling device and page virtual scrolling equipment. The scheme comprises the following steps: acquiring the dragging operation of a user on a scroll bar on a display interface; determining a movement distance of the drag operation; controlling the scroll bar to move the movement distance; determining a reference item displayed corresponding to the scroll bar according to the position of the scroll bar; determining a set of display items according to the reference item and the height of the display interface, wherein the set of display items comprises the reference item; displaying each item in the displayed item set on the display interface.

Description

Page virtual scrolling method, device and equipment

Technical Field

The present application relates to the field of computer technologies, and in particular, to a method, an apparatus, and a device for virtual page scrolling.

Background

In the prior art, in order to solve the problems of rendering and scroll jamming in a front-end big data list, virtual scrolling is often adopted to obtain better performance. The existing virtual scrolling method is as follows: the coordinate attribute is set for each item, only the height of the item which can be seen on the current interface is obtained, when the scroll bar is dragged, the statistical item height is required to be continuously updated, so that the overall height is continuously updated, and after the overall height is changed, the position of the corresponding scroll bar is also changed, so that the condition that the scroll bar is not synchronous with the mouse is caused.

There is a need to provide faster or more reliable solutions.

Disclosure of Invention

In view of this, embodiments of the present application provide a method, an apparatus, and a device for virtual page scrolling, which are used to improve user experience.

In order to solve the above technical problem, the embodiments of the present specification are implemented as follows:

an embodiment of the present specification provides a method for virtual surface scrolling, including:

acquiring the dragging operation of a user on a scroll bar on a display interface;

determining a movement distance of the drag operation;

controlling the scroll bar to move the movement distance;

determining a reference item displayed corresponding to the scroll bar according to the position of the scroll bar;

determining a set of display items according to the reference item and the height of the display interface, wherein the set of display items comprises the reference item;

displaying each item in the displayed item set on the display interface.

An embodiment of this specification provides a virtual rolling device of face, includes:

the system comprises a dragging operation acquisition module, a display interface and a control module, wherein the dragging operation acquisition module is used for acquiring the dragging operation of a user on a scroll bar on the display interface;

a moving distance determining module, configured to determine a moving distance of the dragging operation;

the movement control module is used for controlling the scroll bar to move the movement distance;

the reference item determining module is used for determining the reference item displayed corresponding to the scroll bar according to the position of the scroll bar;

a display item set determination module, configured to determine a display item set according to the reference item and the height of the display interface, where the display item set includes the reference item;

an item display module for displaying each item in the displayed item set on the display interface

An embodiment of the present specification provides a planar virtual scrolling device, including:

at least one processor; and the number of the first and second groups,

a memory communicatively coupled to the at least one processor; wherein,

the memory stores instructions executable by the at least one processor to enable the at least one processor to:

determining a movement distance of the drag operation;

controlling the scroll bar to move the movement distance;

displaying each item in the displayed item set on the display interface.

The embodiment of the specification adopts at least one technical scheme which can achieve the following beneficial effects:

according to the scheme, the reference item displayed corresponding to the position of the scroll bar is determined according to the position of the scroll bar, and then other items on the display interface are determined. Compared with virtual scrolling in the prior art, the position of an item is calculated by a browser native algorithm, and then the position of a scroll bar is corrected according to the position of the item.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:

fig. 1 is a schematic flowchart of a virtual page scrolling method provided in an embodiment of the present disclosure;

fig. 2 is a schematic structural diagram of a page display interface provided in an embodiment of the present specification;

FIG. 3a is a diagram illustrating an offset of a reference bar according to an embodiment of the present disclosure;

FIG. 3b is a diagram illustrating an offset of another reference bar provided by an embodiment of the present disclosure;

FIG. 4 is a rendering diagram of an item obtained by a method provided by an embodiment of the present specification;

FIG. 5 is a schematic diagram of data storage of items in a prior art virtual scrolling method;

FIG. 6 is a diagram illustrating an item collapsing operation of a conventional virtual scrolling method;

FIG. 7 is a diagram of an animation display effect when an animation operation is a collapse operation according to an embodiment of the present specification;

FIG. 8 is a schematic structural diagram of a page virtual scrolling device corresponding to FIG. 1 according to an embodiment of the present disclosure;

fig. 9 is a schematic structural diagram of a page virtual scrolling device corresponding to fig. 1 provided in an embodiment of the present specification.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be described in detail and completely with reference to the following specific embodiments of the present application and the accompanying drawings. It should be apparent that the described embodiments are only some of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

Because of the huge data amount, the large data list is often displayed in a virtual rolling mode, that is, a virtual list mode, in order to save server resources. The virtual list only renders the data in the visual area, so that the data in the visual area is only displayed under the condition of huge list data, the rendering amount can be greatly reduced, and the list can be smoothly and infinitely scrolled.

The existing virtual scrolling method is to set a coordinate attribute for each item, and only the height of the item appearing in the visible area of the interface is obtained, and the height of the remaining items is calculated by taking an estimated value, so that the total height of the list items is continuously updated along with the change of the items in the visible area. And the position of the scroll bar is determined based on the ratio of the coordinates of the items currently displayed for the scroll bar to the total height of the entire list items. Thus, the position of the scroll bar is closely related to the total height of the list entries, and if the total height of the list entries changes, the position of the scroll bar changes. Therefore, the position of the scroll bar is shaken out of synchronization with the mouse position.

From the above analysis, it can be seen that the reason why the position of the scroll bar is not synchronous with the position of the mouse is that the position of the scroll bar is related to the variable of the total height of the list items, and if the problem that the position of the scroll bar is not synchronous with the position of the mouse is to be solved, a method that the position of the scroll bar is not affected by the variable of the total height of the list items needs to be found. In order to solve the problem, the embodiments of the present disclosure provide a new virtual scrolling method, in which the position of the scroll bar is associated with the sequence of the entries in the list entry set, and in the case that the list entry set is fixed, the sequence numbers of the entries in the list entry set are fixed, so that the position of the scroll bar does not change with the update of the total height of the list entries, and thus it can be ensured that the positions of the scroll bar and the mouse are consistent.

The technical solutions provided by the embodiments of the present application are described in detail below with reference to the accompanying drawings.

Fig. 1 is a schematic flowchart of a page virtual scrolling method provided in an embodiment of the present specification. From the viewpoint of a program, the execution subject of the flow may be a program installed in an application server or an application client.

As shown in fig. 1, the process may include the following steps:

step 102: and acquiring the dragging operation of the user on the scroll bar on the display interface.

In one or more embodiments of the present disclosure, the display interface may be a display interface of a browser webpage or a display interface of a book directory. The display interface needs to satisfy two conditions, one is that data in the display interface is displayed in the form of an entry, and the other is that a scroll bar is arranged on the display interface, and the position of the scroll bar is related to the data displayed in the display interface.

The height of the display interface can be set arbitrarily according to needs, but all item data cannot be displayed in any way. In order to see the data required by the user, the user needs to drag the scroll bar, so that the data in the visible area of the display interface is the data that the user needs to see.

The drag operation of the scroll bar may be understood as an operation in which the scroll bar moves following the mouse.

Step 104: and determining the moving distance of the dragging operation.

In one or more embodiments of the present specification, the movement distance of the drag operation may be understood as the movement distance of the mouse. The calculation mode of the moving distance can be an intuitive distance of the mouse moving on the display screen of the client, and can also be a relative distance of the mouse moving in a relative coordinate system.

Step 106: and controlling the scroll bar to move the moving distance.

In one or more embodiments of the present disclosure, how long the mouse moves controls the movement of the scroll bar by the same distance, so as to ensure that the mouse and the scroll bar are in a synchronous state.

Step 108: and determining the reference item displayed corresponding to the scroll bar according to the position of the scroll bar.

In one or more embodiments of the present description, after the position of the scroll bar is determined, the items within the display interface may be determined based on the position of the scroll bar. The reference entry is an entry displayed corresponding to the position of the scroll bar, and the position of the scroll bar determines the position of the reference entry and the specific content of the reference entry.

The scheme can determine which reference item is in the total item set according to the position of the scroll bar, and then determine the specific display position of the reference item. The reference item is determined, and the items to be displayed above and below the reference item can be determined.

In this embodiment, the position of the scroll bar is determined and is not changed, and the situation that the position of the scroll bar is shaken is not caused.

Step 110: determining a set of display items according to the reference item and the height of the display interface, the set of display items including the reference item.

The height of the display interface is fixed, each item also has a height, and the height of the items before and after the reference item and the height of each item can be obtained by determining the position of the reference item, so that the items displayed on the display interface are determined, namely, the item set is displayed. The order of each item in the displayed item set is consistent with the storage order of the items in the memory. I.e., the order of the entries in the total list entry set is unchanged.

Step 112: displaying each item in the displayed item set on the display interface.

After the display item set is determined, the display items can be displayed on the display interface according to the original arrangement sequence in the display item set.

In the method of fig. 1, the reference item displayed corresponding to the position of the scroll bar is determined according to the position of the scroll bar, and then other items on the display interface are determined. Compared with virtual scrolling in the prior art, the position of an item is calculated by a browser native algorithm, and then the position of a scroll bar is corrected according to the position of the item.

Based on the method of fig. 1, the embodiments of the present specification also provide some specific implementations of the method, which are described below.

In one or more embodiments of the present specification, the determining, according to the position of the scroll bar, a reference item displayed corresponding to the scroll bar specifically includes:

determining a position percentage of a position of the scrollbar to a maximum scrollable distance of the scrollbar;

determining a reference item displayed corresponding to the scroll bar according to the position percentage, wherein a sequence number of the reference item in a total item set including all displayable items within the display interface is related to the position percentage.

This embodiment provides an implementation of determining a reference bar according to the position of the scroll bar. The position percentage of the scroll bar is related to the serial number of each item in the total item set, and the serial number of the reference item can be determined by determining the position percentage of the scroll bar, so that other information of the reference item can be determined.

For example, the position percentage of the scroll bar is 55.3%, then the entry with the sequence number accounting for 55.3% of the total number of entries in the total entry set is the reference entry. If the number of entries in the total entry set is 1000, the entry with the sequence number 553 is the reference entry.

In some specific application scenarios, it may not be possible to achieve that the position percentage of the scroll bar completely coincides with the sequence percentage of the items, and the item corresponding to the sequence percentage closest to the position percentage of the scroll bar may be selected. For example, if the number of entries in the total set of entries is 100, then the sequence ratio is 56.0% for the entry with sequence number 56 that is closest to 55.3%.

In one or more embodiments of the present specification, the determining a position percentage of the position of the scroll bar in the maximum scrollable distance of the scroll bar specifically includes:

determining a maximum scrollable distance of the scrollbar;

determining position coordinates of the scroll bar;

according to the formula: and calculating the position percentage of the position of the scroll bar in the maximum scrollable distance of the scroll bar.

The method of determining the position percentage of the scroll bar may be according to the formula: the position percentage is calculated as position coordinates/maximum scrollable distance. Two methods are provided below:

in the first method, the maximum scrollable distance of the scroll bar may be set according to the maximum length of the scroll bar that can slide in the display interface, that is, the height of the slide rail, and the position height of the scroll bar may also be directly obtained, so that the position percentage may be directly calculated according to the two methods.

Second, the maximum scrollable distance of the scrollbar may be set to the difference between the preset height of the total set of items and the height of the display interface. As shown in fig. 2, since the display interface may also display a part of the entries when the scroll bar is not scrolled, the height of the display interface is subtracted when the maximum scrollable distance of the scroll bar is set. The preset height of the total set of entries is determined according to the product of the number of entries and the preset height of each entry. Since the height of each item is not the same and cannot be obtained in advance, a height needs to be preset. The preset height may be a minimum value of each entry height, a maximum value of each entry height, or an intermediate value of each entry height. The method is that the height of the scroll bar sliding rail is set as the difference value between the preset height of the total item set and the height of the display interface, and then the coordinates of the scroll bar are obtained in the coordinate system, so that the position percentage can be calculated.

In one or more embodiments of the present specification, the determining the position coordinates of the scroll bar specifically includes:

acquiring coordinates of the scroll bar;

when the coordinate is less than 0, determining that the position coordinate of the scroll bar is 0;

when the coordinate is larger than the maximum scrollable distance, determining the position coordinate of the scroll bar as the maximum scrollable distance, wherein the maximum scrollable distance is a difference value between a preset height of the total item set and the height of the display interface, and the preset height of the total item set is a product of the number of items of the total item set and a preset display height of a single item;

and when the coordinate is greater than or equal to 0 and less than or equal to the maximum rollable distance, setting the position coordinate as the coordinate.

In order to cancel the effect of the elastic force on the calculated value in the ISO system, when the position coordinates of the scroll bar are acquired, if the obtained coordinate values are less than 0, the calculated position percentage is a negative number, which is obviously not correct, and thus the position coordinates of the scroll bar need to be reset to 0. Similarly, if the coordinates of the scroll bar are greater than the maximum scrollable distance, then the position percentage will be greater than 1, which is not true, and therefore, the coordinates of the scroll bar need to be adjusted to the maximum scrollable distance.

In one or more embodiments of the present specification, the determining, according to the position percentage, a reference item displayed corresponding to the scroll bar specifically includes:

acquiring the number of items of the total item set;

determining a serial number of a reference item according to the product of the item number and the position percentage;

a reference entry corresponding to the sequence number is determined from the total set of entries.

In this embodiment, after determining the position percentage of the scroll bar, the serial number of the reference entry may be determined according to the number of entries in the total entry set and the position percentage, and if the position percentage is 37.25%, 1000 × 37.25% — 372.5. Then the serial number of the reference entry is 373. That is, when the serial number has a decimal, the sequence number is rounded down, i.e., the smallest integer larger than the decimal is taken.

In one or more embodiments of the present specification, the determining a set of display items according to the reference item and the height of the display interface specifically includes:

determining the reference number of the displayed item set according to the height of the display interface;

determining a first quantity and a second quantity according to the position percentage and the reference quantity, wherein the first quantity is the quantity of the estimated items above the reference items on the display interface, and the second quantity is the quantity of the estimated items below the reference items on the display interface, and the display item set comprises the items corresponding to the first quantity, the reference items and the items corresponding to the second quantity.

The height of the display interface is a certain value, and the preset height of each item is also known, so that the height of the display interface can be determined according to the formula: the reference number is calculated by the height of the display interface/the preset height of each item, and if the reference number is a decimal, the number of the integer part can be directly taken. The reference number is only an estimate of the minimum number of items that can be displayed on a display interface, and can be considered as defining a large range, and the specific number of items needs to be corrected.

Assuming that the height of the display interface is 100 and the preset height of each item is 20, the reference number is 5.

The formula can be used: the first quantity is calculated as a percentage of the reference quantity position, and if the product has a decimal fraction, the integer part is taken. If the reference number is 5 and the position percentage is 37.25%, then the first number is 1.

The formula is adopted: the second attribute is calculated as the second number (1-position percentage), and similarly, if the product appears decimal, the integer part is also taken. If the reference number is 5 and the position percentage is 37.25%, then the second number is 3.

In one or more embodiments of the present specification, the displaying, on the display interface, each entry in the display entry set specifically includes:

and determining the coordinates of the reference entry according to the serial number of the reference entry, the number of entries of the total entry set and the position percentage.

The reference item is an item with a certain height, and therefore when the display interface displays the corresponding scroll bar position, the specific display position of the reference item needs to be determined, for example, the top coordinate or the bottom coordinate of the reference item, and knowing one of the items determines the specific display position of the reference item.

In one or more embodiments of the present description, the offset of the reference bar may be used to represent the display position of the reference bar. Fig. 3a and 3b show schematic views of the display of two cases in which the reference entry is the same but the offset amount is different.

In order to more clearly illustrate the influence of different offset amounts on display, the scheme improves the calculation scheme of the offset amount of the reference bar, and the specific formula is as follows:

wherein itemfset represents the offset of the reference entry, scrollTopPtg represents the position percentage, iteheight represents the height of the reference entry, itemlndex represents the sequence number of the reference entry in the total entry set, total represents the number of entries in the total entry set, and itemttopptg and itemBottomPtg are intermediate quantities.

Assuming that scrollTopPtg is 37.25% and total is 1000, the sequence number itemlndex of the reference strip is 373, itemttopptg is 37.3%, itembttomtptg is 37.4%, and itemfoffset is-10 if itemhight is 20.

After the offset of the reference bar is determined, the coordinates of the reference bar can be determined, for example, by knowing the coordinates of the scroll bar, e.g., the top coordinate itemTop.

In one or more embodiments of the present specification, the determining coordinates of the reference entry according to the sequence number of the reference entry, the number of entries of the total entry set, and the position percentage specifically includes:

determining the offset of the reference entry according to the serial number of the reference entry, the number of entries of the total entry set and the position percentage;

and determining the coordinates of the top of the reference bar on the display interface according to the position percentage of the scroll bar, the height of the display interface, the height of the reference bar and the offset.

According to the above description, firstly, the coordinates of the reference item with respect to the display interface can be calculated, assuming that the height of the display interface is 100, the top coordinate is 0, and the bottom coordinate is 100, then the coordinates of the reference item with respect to the display interface can be calculated by using the following formula:

relativeTop＝scrollTopPtg*clientHeight-itemoffset (2)

when scrollTopPtg is 37.25%, clientHeight is 100, itemfset is-10, and the above formula is substituted, relatedtop is 47.

In one or more embodiments of the present description, the coordinates of the top of the reference bar at the display interface are calculated using the following formula:

respectively acquiring the heights of the items corresponding to the first quantity and the heights of the items corresponding to the second quantity;

if the first number is 1, then the entry with sequence number 372 is taken from the database and its height is 25. The second number is 3, then entries with sequence numbers 374, 375, 376 are obtained from the database, with heights of 25, 27 and 23, respectively.

And determining the coordinates of the initial items according to the coordinates of the reference items and the heights of the items corresponding to the first number.

Continuing with the above example, the entry with sequence number 372 is the starting entry and its relative coordinate value (top coordinate) is 47-25-22. It can be seen that the entry with the sequence number 372 is not the initial entry, and the entry with the sequence number 371 is continuously obtained from the database, the height of the entry is 25, and the relative coordinate value (top coordinate) of the entry with the sequence number 371 is calculated to be-3. It may be determined that the entry with the sequence number 371 is the starting entry, and that a portion of the content at the top of the starting entry is not displayable.

And determining the coordinates of the ending items according to the coordinates of the reference items and the heights of the items corresponding to the second quantity.

Then the top relative coordinate value of the entry having sequence number 375 is 47+20+ 25-92 and the top relative coordinate value of the entry having sequence number 376 is 47+20+25+ 27-119, it may be determined that the entry having sequence number 375 is the end entry. At this time, the item with the sequence number 375 may be used as an alternative item, and when an animation operation for the purpose of packing occurs, such as shrinking the item with the sequence number 375, the item with the sequence number 376 may be displayed on the display interface.

Rendering the entries in the display entries according to the coordinates of the starting entry and the coordinates of the ending entry.

When the specific rendering is performed, the corresponding entry may be rendered only by restoring the relative coordinate value to the original coordinate value. In this case, the coordinates of the scroll bar are added to the relative coordinate values. Assume that the coordinate value of the scroll bar is 7412 and the relative coordinate corresponding to the reference bar is 47. The relative coordinate range to be rendered is 0-100, then the original coordinate range to be rendered is 7365 and 7465. The specific rendered entry is shown in fig. 4.

In the conventional virtual scrolling method, coordinate information is provided for each entry (as shown in fig. 5), and even if an entry is deleted or added (animation operation), other entries are not affected, so that the original display layout of the display interface is not changed. Fig. 6 is a diagram illustrating an effect of an item collapsing operation of a conventional virtual scroll method. As shown in fig. 6, for example, after the second item is collapsed by the click operation, the position where the second item is originally displayed will be blank, and the purpose of the collapse operation will not be achieved. Thus, existing page virtualization methods do not support animation operations on items.

In view of the above problem, the solution provided by the embodiments of the present specification is based on the relative coordinates of the container and the virtual coordinates through a dual coordinate system. And converting the scroll bar coordinate into a pure mathematical item position ratio to realize the separation of the item height from the scroll bar coordinate. Therefore, when the animation effect can be realized, only the coordinates of the initial visible node need to be set, and the subsequent nodes are realized by using the native layout mode of the browser, so that the animation self-adaption is realized.

After displaying each item in the set of display items on the display interface, the method further comprises:

acquiring the clicking operation of the user on the items in the display interface;

adjusting the items in the display interface according to the clicking operation;

and adjusting the position of the scroll bar according to the adjusted items in the display interface.

In the scheme, the clicking operation comprises two types, namely an unfolding operation and a folding operation. In the catalog of the book, clicking the entry of the first chapter to check the next-level catalog can belong to the expansion operation, and the next-level catalog is packed up to belong to the packing operation. The above two operations may be called animation operations because they can present animation effects. When the expansion operation is carried out, the synchronous operation of the scroll bar and the items is suspended until the expansion operation is completed. The stow operation does not require the synchronization of the scroll bar with the entry to be paused.

Different button operations may be set, or attributes of the click operation may be set to distinguish between the expansion operation and the collapse operation, such as distinguishing between the expansion operation and the collapse operation according to different positions of the click operation. Other methods may also be employed, and are not specifically limited herein.

In the animation operation, the number of items in the total item set will change as there are increases and decreases of items. Thus, the position of the scroll bar is also affected. Therefore, the position of the scroll bar needs to be newly determined according to the category of the click operation.

The position of the scroll bar is adjusted according to the adjusted entry in the display interface, and the following method may be specifically adopted:

1. record the relative height of the current reference bar as 'originLocatedItemRelativeTop' (see virtual scrolling implementation above).

2. The height of the currently visible item on the collection display interface is 'itemsent heights'.

3. The last item directory of the animation node is selected as the comparison item 'composeIndex', and if 'composeIndex' is-1, the comparison item is changed to 0. The reason why the item above the animation item is selected as the comparison item is that the animation operation does not affect the sequence number of the item above the animation item, and therefore, when the reference item is subsequently calculated, the calculated sequence number is not affected by the animation operation.

4. From ` itemIndex `to ` CompareIndex `, the original position ` originComplereItmTop ` of the original comparison entry is calculated from ` itemElementHeight ` (currently visible entry height).

5. Starting from the original scroll bar coordinate 'scroll bar Top', sequentially reducing/adding 1 to obtain a new scroll bar coordinate 'newscroll bar Top', and calculating a new 'compositemTop' (realizing the same virtual scrolling)

6. The difference between 'operand ItmTop' and 'origin ComparteItmTop' is subtracted to obtain the difference 'precision'.

7. The 'newScrollTop' with the minimum 'precision' is selected to set the value of 'ScrollTop'.

When the clicking operation is a retracting operation, adjusting the items in the display interface according to the clicking operation specifically includes:

determining an item corresponding to the retraction operation;

deleting the items corresponding to the retraction operation in the display interface;

keeping the position of the item above the item corresponding to the retraction operation unchanged, moving the item below the item corresponding to the retraction operation upwards by the height of the item corresponding to the retraction operation, and connecting two items adjacent to the item corresponding to the retraction operation.

As shown in fig. 7, when the click operation is a collapse operation, it is first determined which item or items need to be collapsed is/are according to the click operation, and then deleted. Since the Flex layout is used, the entry below it (the end entry) will automatically move up without leaving a gap. If the items below move integrally, the items below the display interface are blank, and the reserved items need to be displayed in the blank space. Thus, the item packing operation is completed.

When the click operation is a retraction operation, the adjusting the position of the scroll bar according to the adjusted entry in the display interface specifically includes:

updating the number of items of the total item set, and determining the updated maximum scrollable distance according to the updated number of items.

Assuming that the original total set of entries has a number of 1000 entries, and one entry is deleted to 999, the maximum scrollable distance is 999 x 20-100-19880.

And determining a first position coordinate of a first item, wherein the first item is positioned above the item corresponding to the retraction operation and is connected with the item corresponding to the retraction operation.

As shown in fig. 4, assuming that the item with the sequence number 374 needs to be deleted by the stow operation, the item with the sequence number 373 is the first item, i.e., the comparison item. As can be seen from the above, the relative coordinate of the serial number 373 is 47.

And acquiring the position coordinates of the scroll bar.

As can be seen from the above, the coordinates before the scroll bar animation are 7412.

And determining an estimated position coordinate according to the difference between the position coordinate and a variation height, wherein the variation height is a multiple of a unit variation height, the variation height is the variation height +/-unit variation height of the last time, the initial value of the variation height is 0, and the unit variation height is the minimum height which can be adjusted for the position coordinate of the scroll bar each time.

That is, the coordinates 7412 before the scroll bar animation are taken as the center, 1 is sequentially increased and 1 is decreased, so that the new coordinates obtained sequentially are: 7413, 7411, 7414, 7410, 7415, 7409, … ….

Determining a second location coordinate of the first entry according to the estimated location coordinate and the updated maximum scrollable distance, comprising:

determining an estimated position percentage of the scrollbar based on the estimated position coordinates and the updated maximum scrollable distance.

Taking the estimated position coordinate of 7413 as an example, the position percentage of the scroll bar is calculated to be 7413/19880-37.29%.

Determining an estimated reference entry based on the estimated location percentage.

999 × 37.29% ═ 372.5, the serial number of the reference bar is 373.

And determining the second position coordinate of the second item according to the coordinate of the estimation reference item.

It is possible to calculate the offset itemfset of the reference bar as-8 if itemHeight is 20, assuming that scrollTopPtg is 37.29% and total is 999, the serial number itemIndex of the reference bar is 373, itemTopPtg is 37.33%, itemBottomPtg is 37.43%, according to equation (1).

Then, the relative coordinates of the reference bar are calculated according to the formula (2) relativeTop ═ systematic topptg ═ systematic height-itemfset. Where scrollTopPtg is 37.29%, clientHeight is 100, itemfset is-8, and the above formula is substituted, the relative coordinate relativettop of the reference bar is 45.

Similarly, relative coordinates of reference bars whose estimated position coordinates are 7414, 7415, etc. may be calculated.

A first estimated position coordinate is determined that minimizes a difference between the first position coordinate and the second position coordinate.

Since the reference entry is the first entry (comparison entry) in this example, the first estimated position coordinate corresponding to the minimum difference is found only by making a difference between the calculated relative coordinate of the reference entry and the original coordinate 47.

And adjusting the scroll bar to a position corresponding to the first estimated position coordinate.

The position of the scroll bar is then adjusted to the first estimated position coordinates, i.e. synchronization of the scroll bar with the entries is achieved.

In one or more embodiments of the present specification, when the clicking operation is an expansion operation, the adjusting, according to the clicking operation, an entry in the display interface includes:

determining an entry corresponding to the expansion operation;

acquiring an insertion item corresponding to the expansion operation;

moving an item located below an item corresponding to the expand operation downward by the height of the insert item;

and displaying the inserted item below the item corresponding to the expansion operation.

The expansion operation increases the number of entries, and therefore, specific information, such as the number and the specific height, of the inserted entries needs to be determined. In addition, the insertion position needs to be determined. The items below the insertion location are then moved down the total height of the inserted item and then displayed at the insertion location.

In addition, it should be noted that when the clicking operation is the expansion operation, the synchronous operation of the scroll bar and the entry is suspended until the expansion operation is completed.

When the clicking operation is an expanding operation, the adjusting the position of the scroll bar according to the adjusted entry in the display interface specifically includes:

Unlike the collapse operation, the number of total item sets corresponding to the expand operation is increased, and therefore, the maximum scrollable distance of the scroll bar becomes larger.

And determining a first position coordinate of the second item, wherein the second item is an item corresponding to the expansion operation.

The second item, i.e., the comparison item, may select the item inserted above the item as the comparison item. The reason why the item above the animation item is selected as the comparison item is that the animation operation does not affect the sequence number of the item above the animation item, and therefore, when the reference item is subsequently calculated, the calculated sequence number is not affected by the animation operation.

Acquiring the position coordinates of the scroll bar;

adding the position coordinates and a variation height to obtain estimated position coordinates, wherein the variation height is a multiple of a unit variation height, the variation height is the variation height +/-unit variation height of the last time, the initial value of the variation height is 0, and the unit variation height is the minimum height which can be adjusted for the position coordinates of the scroll bar each time;

determining a second position coordinate of the second entry according to the estimated position coordinate and the updated maximum scrollable distance;

determining a first estimated position coordinate that minimizes a difference between the first position coordinate and the second position coordinate;

When the clicking operation is an unfolding operation, the position adjustment method of the scroll bar is basically consistent with the position adjustment method of the folding operation, and the difference is only in the determination of the comparison item. The second item of this embodiment is a comparison item, and the last item of the animation item can be used as the comparison item.

Based on the same idea, the embodiment of the present specification further provides a device corresponding to the above method. Fig. 8 is a schematic structural diagram of a page virtual scrolling device corresponding to fig. 1 provided in an embodiment of the present disclosure. As shown in fig. 8, the apparatus may include:

a dragging operation obtaining module 801, configured to obtain a dragging operation of a scroll bar on a display interface by a user;

a moving distance determining module 802, configured to determine a moving distance of the dragging operation;

a movement control module 803, configured to control the movement distance of the scroll bar;

a reference item determining module 804, configured to determine, according to the position of the scroll bar, a reference item displayed corresponding to the scroll bar;

a display item set determination module 805 configured to determine a display item set according to the reference item and the height of the display interface, where the display item set includes the reference item;

an item display module 806 configured to display each item in the displayed set of items on the display interface.

The apparatus of fig. 8 determines the reference item displayed corresponding to the position of the scroll bar according to the position of the scroll bar, and then determines other items on the display interface. Compared with virtual scrolling in the prior art, the position of an item is calculated by a browser native algorithm, and then the position of a scroll bar is corrected according to the position of the item.

In one or more embodiments of the present specification, the reference item determining module 804 may specifically include:

a position percentage determination submodule for determining a position percentage of a position of the scroll bar in a maximum scrollable distance of the scroll bar;

and a reference item determination submodule, configured to determine, according to the position percentage, a reference item displayed corresponding to the scroll bar, where a sequence number of the reference item in a total item set is related to the position percentage, and the total item set includes all displayable items in the display interface.

In one or more embodiments of the present specification, the position percentage determination sub-module may specifically include:

a maximum scrollable distance determining unit for determining a maximum scrollable distance of the scroll bar;

a position coordinate determination unit for determining position coordinates of the scroll bar;

a location percentage determination unit to: and calculating the position percentage of the position of the scroll bar in the maximum scrollable distance of the scroll bar.

In one or more embodiments of the present specification, the position coordinate determination unit may specifically include:

a coordinate obtaining subunit, configured to obtain coordinates of the scroll bar;

a first determining subunit, configured to determine that the position coordinate of the scroll bar is 0 when the coordinate is less than 0;

a second determining subunit, configured to determine, when the coordinate is greater than the maximum scrollable distance, that the position coordinate of the scroll bar is the maximum scrollable distance, where the maximum scrollable distance is a difference between a preset height of the total item set and a height of the display interface, and the preset height of the total item set is a product of a number of items of the total item set and a preset display height of a single item;

a third determining subunit, configured to set the position coordinate as the coordinate when the coordinate is greater than or equal to 0 and less than or equal to the maximum scrollable distance.

In one or more embodiments of the present specification, the reference entry determining sub-module may specifically include:

an entry number acquiring unit, configured to acquire the number of entries of the total entry set;

a serial number determination unit of the reference item, configured to determine a serial number of the reference item according to a product of the number of items and the position percentage;

a reference entry determining unit, configured to determine a reference entry corresponding to the sequence number from the total entry set.

In one or more embodiments of the present specification, the display item set determining module 805 may specifically include:

the reference quantity determining submodule is used for determining the reference quantity of the displayed item set according to the height of the display interface;

a first quantity and second quantity determining submodule, configured to determine a first quantity and a second quantity according to the position percentage and the reference quantity, where the first quantity is an estimated number of entries located above the reference entry on the display interface, and the second quantity is an estimated number of entries located below the reference entry on the display interface, and the display entry set includes entries corresponding to the first quantity, entries corresponding to the reference entry, and entries corresponding to the second quantity.

In one or more embodiments of the present disclosure, the item display module 806 may specifically include:

a coordinate determination submodule of the reference item, configured to determine a coordinate of the reference item according to the serial number of the reference item, the number of items in the total item set, and the position percentage;

the height acquisition submodule of each item is used for respectively acquiring the height of each item corresponding to the first quantity and the height of each item corresponding to the second quantity;

the coordinate determination submodule of the initial entry is used for determining the coordinate of the initial entry according to the coordinate of the reference entry and the height of each entry corresponding to the first number;

a coordinate determination submodule of the end item, configured to determine a coordinate of the end item according to the coordinate of the reference item and the height of each item corresponding to the second quantity;

and the rendering submodule is used for rendering the items in the display items according to the coordinates of the starting items and the coordinates of the ending items.

In one or more embodiments of the present specification, the coordinate determination sub-module of the reference item may specifically include:

an offset determining unit, configured to determine an offset of the reference entry according to a sequence number of the reference entry, the number of entries of the total entry set, and the position percentage;

and the coordinate determination unit is used for determining the coordinate of the top of the reference bar on the display interface according to the position percentage of the scroll bar, the height of the display interface, the height of the reference bar and the offset.

In one or more embodiments of the present description, the offset of the reference bar is calculated by using the following formula:

wherein itemfset represents the offset of the reference entry, scrollTopPtg represents the position percentage, iteheight represents the height of the reference entry, itemlndex represents the sequence number of the reference entry in the total entry set, and total represents the number of entries in the total entry set.

relativeTop＝scrollTopPtg*clientHeight-itemoffset；

wherein clientHeight represents the height of the display interface; the relativeTop represents the coordinates of the top of the baseline bar on the display interface.

In one or more embodiments of the present description, the method may further include:

the click operation acquisition module is used for acquiring the click operation of the user on the items in the display interface after displaying each item in the display item set on the display interface;

the item adjusting module is used for adjusting the items in the display interface according to the clicking operation;

and the scroll bar position adjusting module is used for adjusting the position of the scroll bar according to the adjusted items in the display interface.

In one or more embodiments of the present specification, when the clicking operation is a stowing operation, the adjusting an entry in the display interface according to the clicking operation, where the entry adjusting module specifically includes:

the first determining submodule is used for determining an item corresponding to the retraction operation;

the deleting submodule is used for deleting the items corresponding to the retracting operation in the display interface;

and the moving sub-module is used for keeping the position of the item above the item corresponding to the packing operation unchanged, moving the item below the item corresponding to the packing operation upwards by the height of the item corresponding to the packing operation, and connecting two items adjacent to the item corresponding to the packing operation.

In one or more embodiments of the present specification, the scroll bar position adjustment module may specifically include:

the maximum scrollable distance updating submodule is used for updating the number of the items of the total item set and determining the updated maximum scrollable distance according to the updated number of the items;

the first position coordinate determination submodule is used for determining a first position coordinate of a first item, and the first item is positioned above the item corresponding to the retracting operation and is connected with the item corresponding to the retracting operation;

the position coordinate acquisition submodule is used for acquiring the position coordinate of the scroll bar;

an estimated position coordinate determination submodule, configured to determine an estimated position coordinate according to a difference between the position coordinate and a variation height, where the variation height is a multiple of a unit variation height, the variation height is a variation height +/-unit variation height of a last time, an initial value of the variation height is 0, and the unit variation height is a minimum height that is adjustable for the position coordinate of the scroll bar each time;

a second position coordinate determination submodule for determining a second position coordinate of the first entry according to the estimated position coordinate and the updated maximum scrollable distance;

a first estimated position coordinate determination submodule for determining a first estimated position coordinate having a smallest difference between the first position coordinate and the second position coordinate;

and the scroll bar position adjusting submodule is used for adjusting the scroll bar to a position corresponding to the first estimated position coordinate.

In one or more embodiments of the present specification, when the clicking operation is an expansion operation, the adjusting an entry in the display interface according to the clicking operation may specifically include:

the second determining submodule is used for determining an item corresponding to the expansion operation;

the insertion item acquisition submodule is used for acquiring an insertion item corresponding to the expansion operation;

a moving submodule for moving down the item located under the item corresponding to the expansion operation by the height of the inserted item;

and the display sub-module is used for displaying the insertion item below the item corresponding to the expansion operation.

In one or more embodiments of the present specification, the adjusting the position of the scroll bar according to the adjusted entry in the display interface specifically includes:

a first position coordinate determination submodule, configured to determine a first position coordinate of the second entry, where the second entry is an entry corresponding to the expansion operation;

an estimated position coordinate determination submodule, configured to add the position coordinate and a variation height to obtain an estimated position coordinate, where the variation height is a multiple of a unit variation height, the variation height is a variation height +/-unit variation height of a last time, an initial value of the variation height is 0, and the unit variation height is a minimum height that is adjustable for the position coordinate of the scroll bar each time;

a second position coordinate determination submodule for determining a second position coordinate of the second entry according to the estimated position coordinate and the updated maximum rollable distance;

Based on the same idea, the embodiment of the present specification further provides a device corresponding to the above method.

Fig. 9 is a schematic structural diagram of a page virtual scrolling device corresponding to fig. 1 provided in an embodiment of the present specification. As shown in fig. 9, the apparatus 900 may include:

at least one processor 910; and the number of the first and second groups,

a memory 930 communicatively coupled to the at least one processor; wherein,

the memory 930 stores instructions 920 executable by the at least one processor 910 to enable the at least one processor 910 to:

determining a movement distance of the drag operation;

controlling the scroll bar to move the movement distance;

displaying each item in the displayed item set on the display interface.

The device of fig. 9 determines the reference item displayed corresponding to the position of the scroll bar by the position of the scroll bar, and then determines the other items on the display interface. Compared with virtual scrolling in the prior art, the position of an item is calculated by a browser native algorithm, and then the position of a scroll bar is corrected according to the position of the item.

In the 90 s of the 20 th century, improvements in a technology could clearly distinguish between improvements in hardware (e.g., improvements in circuit structures such as diodes, transistors, switches, etc.) and improvements in software (improvements in process flow). However, as technology advances, many of today's process flow improvements have been seen as direct improvements in hardware circuit architecture. Designers almost always obtain the corresponding hardware circuit structure by programming an improved method flow into the hardware circuit. Thus, it cannot be said that an improvement in the process flow cannot be realized by hardware physical modules. For example, a Programmable Logic Device (PLD), such as a Field Programmable Gate Array (FPGA), is an integrated circuit whose Logic functions are determined by programming the Device by a user. A digital system is "integrated" on a PLD by the designer's own programming without requiring the chip manufacturer to design and fabricate application-specific integrated circuit chips. Furthermore, nowadays, instead of manually making an integrated Circuit chip, such programming is often implemented by "logic compiler" software, which is similar to a software compiler used in program development and writing, but the original code before compiling is also written by a specific programming Language, which is called Hardware Description Language (HDL), and HDL is not only one but many, such as abel (advanced Boolean expression Language), ahdl (alternate Language Description Language), traffic, pl (core universal programming Language), HDCal (jhdware Description Language), lang, Lola, HDL, laspam, hardward Description Language (vhr Description Language), and vhjraygurg-Language (Hardware Description Language), which is currently used by Hardware-Language. It will also be apparent to those skilled in the art that hardware circuitry that implements the logical method flows can be readily obtained by merely slightly programming the method flows into an integrated circuit using the hardware description languages described above.

The controller may be implemented in any suitable manner, for example, the controller may take the form of, for example, a microprocessor or processor and a computer-readable medium storing computer-readable program code (e.g., software or firmware) executable by the (micro) processor, logic gates, switches, an Application Specific Integrated Circuit (ASIC), a programmable logic controller, and an embedded microcontroller, examples of which include, but are not limited to, the following microcontrollers: ARC 625D, AtmelAT91SAM, Microchip PIC18F26K20, and Silicone Labs C8051F320, the memory controller may also be implemented as part of the control logic for the memory. Those skilled in the art will also appreciate that, in addition to implementing the controller as pure computer readable program code, the same functionality can be implemented by logically programming method steps such that the controller is in the form of logic gates, switches, application specific integrated circuits, programmable logic controllers, embedded microcontrollers and the like. Such a controller may thus be considered a hardware component, and the means included therein for performing the various functions may also be considered as a structure within the hardware component. Or even means for performing the functions may be regarded as being both a software module for performing the method and a structure within a hardware component.

The systems, devices, modules or units illustrated in the above embodiments may be implemented by a computer chip or an entity, or by a product with certain functions. One typical implementation device is a computer. In particular, the computer may be, for example, a personal computer, a laptop computer, a cellular telephone, a camera phone, a smartphone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

For convenience of description, the above devices are described as being divided into various units by function, and are described separately. Of course, the functionality of the units may be implemented in one or more software and/or hardware when implementing the present application.

As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.

Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

The application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.

The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the system embodiment, since it is substantially similar to the method embodiment, the description is simple, and for the relevant points, reference may be made to the partial description of the method embodiment.

The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A method of virtual scrolling of a page, comprising:

determining a movement distance of the drag operation;

controlling the scroll bar to move the movement distance;

displaying each item in the displayed item set on the display interface.

2. The method according to claim 1, wherein the determining the reference item displayed corresponding to the scroll bar according to the position of the scroll bar specifically includes:

3. The method according to claim 2, wherein the determining the position percentage of the position of the scroll bar in the maximum scrollable distance of the scroll bar specifically comprises:

determining a maximum scrollable distance of the scrollbar;

determining position coordinates of the scroll bar;

4. The method according to claim 3, wherein the determining the position coordinates of the scroll bar specifically comprises:

acquiring coordinates of the scroll bar;

5. The method according to claim 2, wherein the determining the reference item displayed corresponding to the scroll bar according to the position percentage specifically includes:

acquiring the number of items of the total item set;

6. The method according to claim 2, wherein the determining a set of display items according to the reference item and the height of the display interface includes:

7. The method according to claim 6, wherein the displaying each item in the displayed item set on the display interface specifically includes:

determining the coordinates of the reference items according to the serial numbers of the reference items, the number of the items of the total item set and the position percentage;

determining the coordinates of the initial items according to the coordinates of the reference items and the heights of the items corresponding to the first number;

determining the coordinates of the ending items according to the coordinates of the reference items and the heights of the items corresponding to the second quantity;

8. The method according to claim 7, wherein the determining coordinates of the reference entry according to the sequence number of the reference entry, the number of entries of the total entry set, and the position percentage specifically includes:

9. The method of claim 8, wherein the offset of the reference bar is calculated using the following equation:

10. The method of claim 8, wherein the coordinates of the top of the reference bar at the display interface are calculated using the following formula:

relativeTop＝scrollTopPtg*clientHeight-itemoffset；

11. The method of claim 1, after displaying each item in the set of display items on the display interface, the method further comprising:

12. The method according to claim 11, wherein when the clicking operation is a retracting operation, the adjusting the items in the display interface according to the clicking operation specifically includes:

determining an item corresponding to the retraction operation;

13. The method according to claim 12, wherein the adjusting the position of the scroll bar according to the adjusted entry in the display interface specifically includes:

updating the number of items of the total item set, and determining the updated maximum scrollable distance according to the updated number of items;

determining a first position coordinate of a first item, wherein the first item is positioned above the item corresponding to the retraction operation and is connected with the item corresponding to the retraction operation;

acquiring the position coordinates of the scroll bar;

determining an estimated position coordinate according to a difference value between the position coordinate and a variation height, wherein the variation height is a multiple of a unit variation height, the variation height is a variation height +/-unit variation height of the last time, an initial value of the variation height is 0, and the unit variation height is a minimum height which can be adjusted for the position coordinate of the scroll bar each time;

determining a second position coordinate of the first entry according to the estimated position coordinate and the updated maximum scrollable distance;

14. The method according to claim 11, wherein when the clicking operation is an expanding operation, the adjusting the items in the display interface according to the clicking operation specifically includes:

determining an entry corresponding to the expansion operation;

acquiring an insertion item corresponding to the expansion operation;

15. The method according to claim 14, wherein the adjusting the position of the scroll bar according to the adjusted entry in the display interface specifically includes:

determining a first position coordinate of the second item, wherein the second item is an item corresponding to the expansion operation;

acquiring the position coordinates of the scroll bar;

16. A page virtual scrolling device, comprising:

and the item display module is used for displaying each item in the display item set on the display interface.

17. A page virtual scrolling device, comprising:

at least one processor; and the number of the first and second groups,

a memory communicatively coupled to the at least one processor; wherein,

determining a movement distance of the drag operation;

controlling the scroll bar to move the movement distance;

displaying each item in the displayed item set on the display interface.