Scroll bar display method and device and readable storage medium

Abstract

The invention provides a scroll bar display method and device and a readable storage medium, the method is applied to an Android operating system, and the method comprises the steps that under the condition that a native scroll bar in a native container is located on the upper boundary or the lower boundary of a display interface in the native container, in response to a target sliding operation, the target scroll bar is displayed; hiding the native scroll bar, displaying a target scroll bar in a parent container nested with the native container, and fixing the target scroll bar at a position corresponding to the native scroll bar; the position of the native scroll bar is bound with the position of the sliding content on the display interface, the position of the target scroll bar is not bound with the position of the sliding content, and the target sliding operation is sliding operation with the sliding direction opposite to the direction of the upper boundary or the lower boundary of the display interface; obtaining a sliding distance of the target sliding operation; the size of the target scroll bar is adjusted according to the sliding distance, and the sliding distance is inversely proportional to the size of the target scroll bar. According to the method, the feeling of drag with resistance can be fed back to a user through the scroll bar.

Description

Technical Field

[0001] The present application relates to the field of page display technology, and more specifically, to a method, device and readable storage medium for displaying a scroll bar in the field of page display technology. Background Art

[0002] The scroll bar is a common control in the user interface. It is widely used in various applications, web pages and operating systems. It is mainly used to allow users to view the sliding content beyond the viewport (visible area) by dragging the scroll bar or clicking the scroll button. In addition, the scroll bar can also provide visual feedback of the current position to help users understand the position of the current content in the entire document or page.

[0003] Currently, in the Android operating system, when a user slides a sliding content to the very bottom or the very top and the user continues to slide, although the Android operating system can respond to the user's sliding operation and continue to drag the sliding content, the scroll bar cannot be fixed at the interface boundary and scale with the sliding operation, that is, the feeling of dragging resistance cannot be fed back to the user.

[0004] Therefore, how to provide users with feedback on the feeling of dragging resistance in the Android operating system is a problem that needs to be solved urgently. Summary of the invention

[0005] The present application provides a method, device and readable storage medium for displaying a scroll bar. The method can be implemented in an Android operating system. When a user slides a sliding content to the very bottom or the very top and the user continues to slide, the scroll bar can be fixed at the interface boundary and scaled along with the sliding operation, so as to provide the user with a feeling of dragging resistance, thereby improving the user's visual experience.

[0006] In a first aspect, a method for displaying a scroll bar is provided, the method being applied to an Android operating system, the method comprising: in a case where a native scroll bar in a native container is located at an upper boundary or a lower boundary of a display interface in the native container, in response to a target sliding operation, hiding the native scroll bar and displaying a target scroll bar in a parent container nested with the native container, and fixing the target scroll bar at a position corresponding to the native scroll bar; the position of the native scroll bar is bound to the position of sliding content on the display interface, the position of the target scroll bar is not bound to the position of sliding content on the display interface, the target sliding operation is a sliding operation in which the sliding direction is opposite to the upper boundary or the lower boundary of the display interface; obtaining a sliding distance of the target sliding operation; adjusting the size of the target scroll bar according to the sliding distance, and fixing the adjusted target scroll bar at a position corresponding to the native scroll bar, the size of the sliding distance being inversely proportional to the size of the target scroll bar.

[0007] In the above technical scheme, the native scroll bar in the native container is located at the upper boundary or the lower boundary of the display interface in the native container, and when a sliding operation (i.e., a target sliding operation) in which the sliding direction is opposite to the upper boundary or the lower boundary of the display interface is detected, the native scroll bar can be hidden and the target scroll bar can be displayed in the parent container nested with the native container, and the target scroll bar can be fixed at a position corresponding to the native scroll bar, that is, the target scroll bar is fixed at the upper boundary or the lower boundary of the display interface in the native container. Since the position of the target scroll bar is not bound to the position of the sliding content on the display interface, when the sliding content on the display interface slides, the target scroll bar will not slide with the sliding content, that is, the target scroll bar is fixed at the top of the interface. In addition, after the target scroll bar is fixed at the upper or lower boundary of the display interface, the sliding distance of the target sliding operation can also be obtained, so that the size of the target scroll bar can be adjusted according to the sliding distance of the target sliding operation. Since the sliding distance is inversely proportional to the size of the target scroll bar, that is, the longer the sliding distance of the target sliding operation, the smaller the size of the corresponding target scroll bar will be, it is possible to fix the target scroll bar at the upper or lower boundary of the interface while also allowing the size of the target scroll bar to scale with the sliding distance of the target sliding operation. In this way, in the Android operating system, the target scroll bar can be used to provide users with a sense of dragging resistance, thereby improving the user's visual experience.

[0008] In combination with the first aspect and the above-mentioned implementation methods, in some possible implementation methods, displaying a target scroll bar in a parent container nested with a native container includes: the native container sends the size information, style information, and position information of the native scroll bar to the parent container, so that the parent container draws and displays the target scroll bar according to the size information, style information, and position information of the native scroll bar.

[0009] In the above technical solution, when the native scroll bar in the native container is located at the upper boundary or the lower boundary of the display interface in the native container and a target sliding operation is detected, the native container can send the size information, style information and position information of the native scroll bar to the parent container, so that the parent container draws and displays the target scroll bar according to the size information, style information and position information of the native scroll bar. That is, in this case, the native container does not need to be discarded, but the scroll bar drawing process is handed over to the parent container, so that the parent container draws and displays the target scroll bar according to the size information, style information and position information calculated by the native container, thereby ensuring the accuracy of the target scroll bar drawn by the parent container, that is, ensuring that the target scroll bar drawn by the parent container is the same size and style as the native scroll bar.

[0010] In combination with the first aspect and the above-mentioned implementation methods, in some possible implementation methods, after the parent container draws and displays the target scroll bar according to the size information, style information and position information of the native scroll bar, the method also includes: the parent container sends a first signal to the native container, so that the native container determines that the parent container has completed drawing the target scroll bar according to the first signal.

[0011] In the above technical solution, after the parent container draws and displays the target scroll bar according to the size information, style information and position information of the native scroll bar, the parent container can send a first signal to the native container, so that the native container determines that the parent container has completed drawing the target scroll bar according to the first signal, thereby avoiding the native container from performing other operations when the parent container has not completed drawing, thereby avoiding potential conflicts or errors. For example, the native container frequently checks the state of the scroll bar when the target scroll bar is not completely drawn, which will cause unnecessary performance overhead, or the native container attempts to update the interface layout when the target scroll bar is not completely drawn, which may cause layout confusion or incorrect display of the target scroll bar.

[0012] In combination with the first aspect and the above-mentioned implementation methods, in some possible implementation methods, after adjusting the size of the target scroll bar according to the sliding distance and fixing the adjusted target scroll bar at a position corresponding to the native scroll bar, the method also includes: when the native scroll bar in the native container is located at the upper boundary or the lower boundary of the display interface in the native container, and it is detected that the target sliding operation disappears, the parent container sends a second signal to the native container, so that the native container displays the native scroll bar and hides the target scroll bar according to the second signal.

[0013] In the above technical solution, after adjusting the size of the target scroll bar according to the sliding distance and fixing the adjusted target scroll bar at the position corresponding to the native scroll bar, when the native scroll bar in the native container is located at the upper boundary or lower boundary of the display interface in the native container and it is detected that the target sliding operation disappears, the parent container can send a second signal to the native container to make the native container display the native scroll bar and hide the target scroll bar according to the second signal. In this case, it can be ensured that the scroll bar on the display interface can slide with the sliding content to provide the user with visual feedback of the current position, which can help the user understand the position of the current content in the entire document or page.

[0014] In combination with the first aspect and the above-mentioned implementation methods, in some possible implementation methods, the size of the target scroll bar is adjusted according to the sliding distance, including: determining the reduction ratio of the target scroll bar according to the sliding distance; and reducing the target scroll bar according to the reduction ratio to obtain the reduced target scroll bar.

[0015] In combination with the first aspect and the above-mentioned implementation methods, in some possible implementation methods, the method also includes: when adjusting the size of the target scroll bar according to the sliding distance, sending a vibration reminder, the vibration reminder is used to remind that the bottom or top of the sliding content has been reached.

[0016] In the above technical solution, when adjusting the size of the target scroll bar, a vibration reminder can be sent to provide the user with visual resistance feedback while adding intuitive tactile feedback to remind the user that the sliding content boundary (i.e., the bottom or top of the sliding content) has been reached, thereby reducing unnecessary sliding operations and avoiding wasting the user's time and energy.

[0017] In combination with the first aspect and the above-mentioned implementation methods, in some possible implementation methods, after obtaining the sliding distance of the target sliding operation, the method also includes: determining the moving distance of the sliding content on the display interface based on the sliding distance; and moving the sliding content based on the moving distance, and the moving distance is less than the sliding distance.

[0018] In the above technical solution, after obtaining the sliding distance of the target sliding operation, the moving distance of the sliding content on the display interface can be determined according to the sliding distance, and then the sliding content can be moved according to the moving distance. Since the determined moving distance is smaller than the sliding distance, the visual effect of moving the sliding content with resistance can be achieved to provide feedback to the user.

[0019] In combination with the first aspect and the above-mentioned implementation methods, in some possible implementation methods, the moving distance of the sliding content on the display interface is determined according to the sliding distance, including: determining the moving ratio according to the sliding distance; determining the moving distance of the sliding content on the display interface according to the sliding distance and the moving ratio.

[0020] In a second aspect, a scroll bar display device is provided, the device is applied to an Android operating system, and the device includes:

[0021] A response module, for, in a case where a native scroll bar in a native container is located at an upper boundary or a lower boundary of a display interface in the native container, in response to a target sliding operation, hiding the native scroll bar and displaying a target scroll bar in a parent container nested with the native container, and fixing the target scroll bar at a position corresponding to the native scroll bar; the position of the native scroll bar is bound to the position of the sliding content on the display interface, the position of the target scroll bar is not bound to the position of the sliding content on the display interface, and the target sliding operation is a sliding operation in a direction opposite to the upper boundary or the lower boundary of the display interface;

[0022] An acquisition module, used to acquire the sliding distance of a target sliding operation;

[0023] The adjustment module is used to adjust the size of the target scroll bar according to the sliding distance, and fix the adjusted target scroll bar at a position corresponding to the native scroll bar. The sliding distance is inversely proportional to the size of the target scroll bar.

[0024] In combination with the second aspect and the above-mentioned implementation methods, in some possible implementation methods, the device also includes a sending module, which is used for the native container to send the size information, style information and position information of the native scroll bar to the parent container, so that the parent container draws and displays the target scroll bar according to the size information, style information and position information of the native scroll bar.

[0025] In combination with the second aspect and the above-mentioned implementation methods, in some possible implementation methods, after the parent container draws and displays the target scroll bar according to the size information, style information and position information of the native scroll bar, the sending module is also used for the parent container to send a first signal to the native container, so that the native container determines that the parent container has completed drawing the target scroll bar according to the first signal.

[0026] In combination with the second aspect and the above-mentioned implementation methods, in some possible implementation methods, after adjusting the size of the target scroll bar according to the sliding distance and fixing the adjusted target scroll bar at a position corresponding to the native scroll bar, the sending module is also used to, when the native scroll bar in the native container is located at the upper boundary or the lower boundary of the display interface in the native container and it is detected that the target sliding operation disappears, the parent container sends a second signal to the native container, so that the native container displays the native scroll bar and hides the target scroll bar according to the second signal.

[0027] In combination with the second aspect and the above implementations, in some possible implementations, the adjustment module is specifically configured to determine a reduction ratio of the target scroll bar according to the sliding distance; and reduce the target scroll bar according to the reduction ratio to obtain a reduced target scroll bar.

[0028] In combination with the second aspect and the above-mentioned implementation methods, in some possible implementation methods, the sending module is also used to send a vibration reminder when adjusting the size of the target scroll bar according to the sliding distance, and the vibration reminder is used to remind that the bottom or top of the sliding content has been reached.

[0029] In combination with the second aspect and the above-mentioned implementation methods, in some possible implementation methods, the adjustment module is specifically used to determine the moving distance of the sliding content on the display interface according to the sliding distance; and move the sliding content according to the moving distance, and the moving distance is less than the sliding distance.

[0030] In combination with the second aspect and the above-mentioned implementation manner, in some possible implementation manners, the adjustment module is specifically used to determine the movement ratio according to the sliding distance; and determine the movement distance of the sliding content on the display interface according to the sliding distance and the movement ratio.

[0031] In a third aspect, an electronic device is provided, comprising a memory and a processor. The memory is used to store executable program code, and the processor is used to call and run the executable program code from the memory, so that the electronic device executes the scroll bar display method in the first aspect or any possible implementation of the first aspect.

[0032] In a fourth aspect, a computer program product is provided, comprising: a computer program code, which, when executed on a computer, enables the computer to execute the scroll bar display method in the first aspect or any possible implementation of the first aspect.

[0033] In a fifth aspect, a computer-readable storage medium is provided, which stores a computer program code. When the computer program code runs on a computer, the computer executes the scroll bar display method in the above-mentioned first aspect or any possible implementation of the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] Figure 1 This is a schematic diagram of the display effect of a scroll bar in the prior art provided by an embodiment of the present application;

[0035] Figure 2 is a schematic flow chart of a method for displaying a scroll bar provided in an embodiment of the present application;

[0036] Figure 3 This is a schematic diagram of the relationship between a native container, a parent container, a display interface, and a scroll bar (target scroll bar / native scroll bar) provided in an embodiment of the present application;

[0037] FIG4( a ) is a schematic diagram of a display effect of a target scroll bar before it is reduced, provided in an embodiment of the present application;

[0038] FIG4( b ) is a schematic diagram of a display effect after a target scroll bar is reduced, provided in an embodiment of the present application;

[0039] Figure 5 is a structural schematic diagram of a scroll bar display device provided in an embodiment of the present application;

[0040] Figure 6 It is a structural schematic diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0041] The technical solution in the present application will be described clearly and in detail below in conjunction with the accompanying drawings. In the description of the embodiments of the present application, unless otherwise specified, " / " means or, for example, A / B can mean A or B: "and / or" in the text is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, "multiple" means two or more than two.

[0042] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as suggesting or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features.

[0043] Before introducing the solutions of the embodiments of the present application, the professional terms that may be involved in the embodiments of the present application are first explained.

[0044] A container is a layout element that organizes and manages other elements in an interface. It can be an area that contains multiple controls, icons, or other containers.

[0045] The display interface is the visual part where users interact with the application or operating system. It includes all elements on the screen, such as menus, buttons, text boxes, etc.

[0046] The scroll bar is a common control in the user interface. It is widely used in various applications, web pages and operating systems. It is mainly used to allow users to view the sliding content beyond the viewport (visible area) by dragging the scroll bar or clicking the scroll button. In addition, the scroll bar can also provide visual feedback of the current position to help users understand the position of the current content in the entire document or page.

[0047] Currently, in the Android operating system, for example, Figure 1 As shown, when the sliding content 101 on the display interface 100 is slid to the top by the user and the user continues to slide downward, the sliding content 101 will continue to move downward with the user's sliding operation. At this time, the scroll bar 101 will also move downward with the sliding content 101. That is, although the Android operating system can respond to the user's sliding operation and continue to drag the sliding content, the scroll bar 101 cannot be fixed at the boundary of the display interface 100 (that is, the upper boundary or the lower boundary of the display interface 100) and scale with the sliding operation, that is, the user cannot be fed back with the feeling of dragging with resistance.

[0048] Therefore, how to provide users with feedback on the feeling of dragging resistance in the Android operating system is a problem that needs to be solved urgently.

[0049] Based on the above problems, the present application provides a method, device and readable storage medium for displaying a scroll bar. The method can provide the user with feedback of the feeling of dragging with resistance through the scroll bar, thereby improving the user's visual experience.

[0050] Below through Figure 2 The method of the embodiment of the present application is described in detail.

[0051] For example, Figure 2 As shown, Figure 2 200 is a schematic flow chart of a method for displaying a scroll bar provided in an embodiment of the present application. The method is applied to an Android operating system, and can be specifically applied to an electronic device (e.g., a smart phone, a tablet, a laptop computer, or a smart watch) using an Android operating system. The method 200 includes the following steps 201 to 203:

[0052] Step 201, when the native scroll bar in the native container is located at the upper boundary or the lower boundary of the display interface in the native container, in response to a target sliding operation, the native scroll bar is hidden and the target scroll bar is displayed in a parent container nested with the native container, and the target scroll bar is fixed at a position corresponding to the native scroll bar; the position of the native scroll bar is bound to the position of the sliding content on the display interface, the position of the target scroll bar is not bound to the position of the sliding content on the display interface, and the target sliding operation is a sliding operation in which the sliding direction is opposite to the upper boundary or the lower boundary of the display interface.

[0053] In order to clearly understand the scroll bar display method provided in the embodiment of the present application, the embodiment of the present application provides a schematic diagram of the relationship between a native container, a parent container, a display interface, and a scroll bar (i.e., a target scroll bar or a native scroll bar). Figure 3 ,Depend on Figure 3 It can be seen that the parent container 300 is nested outside the native container 301 , the display interface 3011 and the scroll bar 3012 are located in the native container 301 , and the scroll bar 3012 is located at the boundary of the display interface 3011 .

[0054] The fact that the parent container 300 is nested outside the native container 301 can be understood as a "containment" relationship between the parent container and the native container. Specifically, the parent container contains the native container, and the native container is a subview of the parent container. In other words, the parent container is a larger layout container that contains one or more subviews, one of which is the native container.

[0055] It should be noted that, since the native scroll bar in the native container is bound to the sliding content, the position of the native scroll bar is bound to the position of the sliding content on the display interface, that is, the position of the native scroll bar will change with the change of the position of the sliding content, while the parent container nested outside the native container is not bound to the sliding content, therefore, the position of the target scroll bar is not bound to the position of the sliding content on the display interface, that is, the position of the target scroll bar will not change with the change of the sliding content position.

[0056] In a possible implementation, the getScrollY() function can be called to obtain the position of the native scroll bar, the getMeasuredHeight() function can be called to obtain the height of the sliding content, and the getHeight() function can be called to obtain the height of the native container. Based on the position of the native scroll bar, the height of the sliding content, and the height of the native container, it can be determined whether the native scroll bar is located at the upper or lower boundary of the display interface.

[0057] The position of the native scroll bar indicates the distance from the top of the sliding content to the top of the currently visible area, not the height relative to the native container. In other words, the position of the native scroll bar refers to how many pixels the sliding content has been slid up, not the height of the native container itself. For example, if the position of the native scroll bar is 800px, it means that the sliding content has been slid up 800 pixels.

[0058] The height of the sliding content indicates the total height of the sliding content. For example, if the height of the sliding content is 1000px, it means that the user needs to slide to view 1000px of content.

[0059] The height of the native container indicates the height of the slidable area of ​​the native container. For example, if the height of the native container is 200px, then at any time, the user can only see 200px of content.

[0060] Specifically, after obtaining the position of the native scroll bar, the height of the sliding content, and the height of the native container, when the position of the native scroll bar is 0 (indicating that the native scroll bar is at the top), it can be determined that the native scroll bar is located at the upper boundary of the display interface; when the position of the native scroll bar plus the height of the native container is greater than or equal to the height of the sliding content (indicating that the native scroll bar has scrolled to the bottom of the sliding content), it can be determined that the native scroll bar is located at the lower boundary of the display interface.

[0061] For example, when the acquired position of the native scroll bar is 800px, the height of the sliding content is 1000px, and the height of the native container is 200px, the current position of the native scroll bar (800px) and the height of the native container (200px) are added, and the sum obtained is 1000px. Since the sum of the position of the native scroll bar (800px) and the height of the native container (200px) (1000px) is equal to the height of the sliding content of 1000px, it can be determined that the native scroll bar is located at the lower boundary of the display interface.

[0062] In another possible implementation, the developer may add a scroll event listener to the native container to determine whether the native scroll bar is at the upper boundary or the lower boundary of the display interface through the scroll event listener.

[0063] In a possible implementation, the GestureDetector1 function may be called or the touch events of the display interface may be directly monitored to detect the user's sliding operation, and the sliding direction may be determined by calculating the movement of the touch point. Specifically, the OnScroll function of GestureDetectorr may be called to obtain the displacement between two touch events, and the sliding direction may be determined based on the positive or negative value of the displacement. For example, a positive displacement indicates a downward slide, that is, a slide toward the lower boundary of the display interface; a negative displacement indicates an upward slide, that is, a slide toward the upper boundary of the display interface.

[0064] It should be noted that, when the native scroll bar in the native container is located at the lower boundary of the display interface in the native container and the direction of the sliding operation is detected to be upward, or the native scroll bar in the native container is located at the upper boundary of the display interface in the native container and the direction of the sliding operation is detected to be downward, the native scroll bar can be hidden and the target scroll bar can be displayed in the parent container nested with the native container, and the target scroll bar can be fixed at the position corresponding to the native scroll bar, that is, the target scroll bar is fixed at the lower boundary of the display interface corresponding to the native scroll bar or the upper boundary of the display interface.

[0065] In a possible implementation, the native scroll bar may be hidden by setting the Cascading Style Sheets (CSS) of the native scroll bar to display:none.

[0066] In a possible implementation, the parent container can draw the target scroll bar and display the target scroll bar at a position corresponding to the native scroll bar based on the size information (e.g., the length and width of the native scroll bar), style information (e.g., the color of the native scroll bar), and position information (i.e., the pixel coordinates of the native scroll bar on the display interface) of the native scroll bar calculated by the native container. It can be seen from the above embodiments that the parent container nested outside the native container is not bound to the sliding content, so the position of the target scroll bar is not bound to the position of the sliding content on the display interface, that is, the position of the target scroll bar will not change with the change of the sliding content position, that is, the target scroll bar can be fixedly displayed at the position corresponding to the native scroll bar.

[0067] Specifically, the parent container can set the length and width of the native scroll bar to the length and width of the target scroll bar through Cascading Style Sheets (CSS), and set the color of the native scroll bar to the color of the target scroll bar, thereby obtaining the target scroll bar, and display the generated target scroll bar at the position corresponding to the native scroll bar according to the pixel coordinates of the native scroll bar on the display interface.

[0068] It should be noted that, when the native scroll bar in the native container is located at the upper boundary or the lower boundary of the display interface in the native container and a target sliding operation is detected, the native container can send the size information, style information and position information of the native scroll bar to the parent container, so that the parent container draws and displays the target scroll bar according to the size information, style information and position information of the native scroll bar. That is, in this case, the native container does not need to be discarded, but the scroll bar drawing process is handed over to the parent container, so that the parent container draws and displays the target scroll bar according to the size information, style information and position information calculated by the native container, thereby ensuring the accuracy of the target scroll bar drawn by the parent container, that is, ensuring that the target scroll bar drawn by the parent container is the same size and style as the native scroll bar.

[0069] In a possible implementation, the native container may send the size information, style information, and position information of the native scroll bar to the parent container by calling the native interface (ndroidx.core.view.ScrollingView) of the Android operating system.

[0070] In a possible implementation, the parent container may draw the target scroll bar according to the size information, style information, and position information of the native scroll bar through JavaScript and CSS, and display the target scroll bar at a position corresponding to the native scroll bar.

[0071] In a possible implementation, after the parent container draws and displays the target scroll bar according to the size information, style information, and position information of the native scroll bar, the parent container may send a first signal to the native container, so that the native container can determine that the parent container has completed drawing the target scroll bar according to the first signal, thereby preventing the native container from performing other operations when the parent container has not completed drawing, thereby avoiding potential conflicts or errors. For example, if the native container frequently checks the state of the scroll bar when the target scroll bar is not completely drawn, it will cause unnecessary performance overhead, or if the native container attempts to update the interface layout when the target scroll bar is not completely drawn, it may cause layout confusion or incorrect display of the target scroll bar.

[0072] The first signal may be understood as an event or a flag (such as setting a specific CSS or attribute), which is used to notify the native container that the parent container has completed drawing the target scroll bar.

[0073] In a possible implementation, the parent container may also send the first signal to the native container by calling a native interface (ndroidx.core.view.ScrollingView) of the Android operating system.

[0074] In another possible implementation, the developer may pre-set an event listener in the parent container so that when the corresponding event is triggered in the parent container, that is, when the parent container completes drawing the target scroll bar, the event listener executes the corresponding logic, that is, sends the first signal to the native container.

[0075] Step 202: Obtain the sliding distance of the target sliding operation.

[0076] Specifically, the starting position and current position of the target sliding operation may be obtained through scrollTop, and then the sliding distance of the target sliding operation may be obtained by subtracting the starting position and current position of the target sliding operation.

[0077] Exemplarily, when the starting position of the target sliding operation is (100px, 150px) and the current position is (100px, 200px), the coordinate (100px) in the horizontal direction (x-axis) of the current position of the target sliding operation can be subtracted from the coordinate (100px) in the horizontal direction of the starting position of the target sliding operation to obtain the sliding distance (0px) of the target sliding operation in the horizontal direction, and the coordinate (200px) in the vertical direction (y-axis) of the current position of the target sliding operation can be subtracted from the coordinate (150px) in the vertical direction of the starting position of the target sliding operation to obtain the sliding distance (50px) of the target sliding operation in the vertical direction, and then the modulus of the sliding distance (50px) of the target sliding operation in the vertical direction and the sliding distance (0px) of the target sliding operation in the horizontal direction is calculated to obtain the sliding distance of the target sliding operation, that is,

[0078] Step 203, adjusting the size of the target scroll bar according to the sliding distance, and fixing the adjusted target scroll bar at a position corresponding to the native scroll bar, the sliding distance being inversely proportional to the size of the target scroll bar.

[0079] Specifically, after fixing the target scroll bar at a position corresponding to the native scroll bar, that is, after fixing the target scroll bar at the upper or lower boundary of the display interface in the native container, and when the sliding distance of the target sliding operation is obtained, the size of the target scroll bar can be adjusted according to the sliding distance, and the adjusted target scroll bar can be fixed at a position corresponding to the native scroll bar. Since the sliding distance is inversely proportional to the size of the target scroll bar, that is, the longer the sliding distance of the target sliding operation, the smaller the size of the corresponding target scroll bar will be, it is possible to fix the target scroll bar at the upper or lower boundary of the interface while also allowing the size of the target scroll bar to scale with the sliding distance of the target sliding operation.

[0080] In summary, the scroll bar display method provided in the embodiment of the present application can hide the native scroll bar and display the target scroll bar in the parent container nested with the native container when the native scroll bar in the native container is located at the upper boundary or the lower boundary of the display interface in the native container and a sliding operation (i.e., a target sliding operation) in the opposite direction of the upper boundary or the lower boundary of the display interface is detected, and fix the target scroll bar at a position corresponding to the native scroll bar, that is, fix the target scroll bar at the upper boundary or the lower boundary of the display interface in the native container. Since the position of the target scroll bar is not bound to the position of the sliding content on the display interface, when the sliding content on the display interface slides, the target scroll bar will not slide with the sliding content, that is, the target scroll bar is fixed. The purpose of fixing the target scroll bar at the upper or lower boundary of the interface; in addition, after fixing the target scroll bar at the upper or lower boundary of the display interface, the sliding distance of the target sliding operation can also be obtained, so that the size of the target scroll bar can be adjusted according to the sliding distance of the target sliding operation. Since the size of the sliding distance is inversely proportional to the size of the target scroll bar, that is, the longer the sliding distance of the target sliding operation, the smaller the corresponding size of the target scroll bar will be, so that when the target scroll bar is fixed at the upper or lower boundary of the interface, the size of the target scroll bar can also be scaled according to the sliding distance of the target sliding operation, so as to achieve in the Android operating system, through the target scroll bar to feedback the feeling of dragging with resistance to the user, thereby improving the user's visual experience.

[0081] In a possible implementation, adjusting the size of the target scroll bar according to the sliding distance in step 203 may include the following steps (1) and (2):

[0082] Step (1), determining the reduction ratio of the target scroll bar according to the sliding distance.

[0083] In a possible implementation, the developer may pre-set a relationship correspondence table between the sliding distance of the target sliding operation and the reduction ratio of the target scroll bar, in which the larger the sliding distance, the larger the corresponding reduction ratio. Specifically, after obtaining the sliding distance of the target sliding operation, the reduction ratio of the target scroll bar corresponding to the sliding distance may be searched in the relationship correspondence table.

[0084] Exemplarily, the relationship between the sliding distance and the reduction ratio may be shown in Table 1 below:

[0085] Table 1

[0086]

[0087]

[0088] As can be seen from Table 1 above, a sliding distance (50px) corresponds to a reduction ratio (0.2), a sliding distance (80px) corresponds to a reduction ratio (0.45), a sliding distance (150px) corresponds to a reduction ratio (0.7), and so on.

[0089] Step (2), reducing the target scroll bar according to the reduction ratio to obtain a reduced target scroll bar.

[0090] Specifically, after the reduction ratio of the target scroll bar is obtained, the size of the target scroll bar (for example, the length and width of the target scroll bar) may be reduced according to the reduction ratio to obtain the reduced target scroll bar.

[0091] Exemplarily, when the sliding distance of the target scroll bar is 20px, the corresponding reduction ratio is 0.2, the length of the target scroll bar is 100px, and the width is 50px, the length of the target scroll bar can be reduced from 100px to 80px according to the reduction ratio (0.2), and the width of the target scroll bar can be reduced from 50px to 40px according to the reduction ratio (0.2), and finally a target scroll bar with a length of 80px and a width of 40px is obtained, as shown in Figures 4(a) and 4(b). Among them, Figure 4(a) is a schematic diagram of the display effect of the target scroll bar 400 before it is reduced, and Figure 4(b) is a schematic diagram of the display effect of the target scroll bar 400 after it is reduced.

[0092] In a possible implementation, when the size of the target scroll bar is adjusted, a vibration reminder can be sent, so that while providing visual resistance feedback to the user, intuitive tactile feedback is added to remind the user that the sliding content boundary (i.e., the bottom or top of the sliding content) has been reached, reducing unnecessary sliding operations of the user and avoiding wasting the user's time and energy. Specifically, when the size of the target scroll bar is adjusted, a vibration reminder can be sent by calling the navigator.vibrate function.

[0093] In one possible implementation, after adjusting the size of the target scroll bar according to the sliding distance and fixing the adjusted target scroll bar at a position corresponding to the native scroll bar, it can be detected whether the target sliding operation disappears, so that when the native scroll bar in the native container is located at the upper or lower boundary of the display interface in the native container and it is detected that the target sliding operation disappears, the parent container can send a second signal to the native container to cause the native container to display the native scroll bar and hide the target scroll bar according to the second signal. Since the position of the native scroll bar is bound to the position of the sliding content on the display interface, the display effect of the scroll bar on the display interface sliding along with the sliding content can be restored at this time to provide the user with visual feedback of the current position, which can help the user understand the position of the current content in the entire document or page.

[0094] In a possible implementation, the touchend and touchcancel events can be used to detect whether the user cancels the target sliding operation. The touchend event is triggered when the user's finger is removed from the display interface. The touchcancel event is triggered when the system cancels the touch operation, for example, when a phone call or other high-priority event interrupts the touch operation.

[0095] In a possible implementation, when it is detected that the target sliding operation disappears, the parent container may send a second signal to the native container through a preset event listener, so that the native container displays a native scroll bar and hides the target scroll bar according to the second signal.

[0096] Among them, the native container displays the native scroll bar and hides the target scroll bar according to the second signal. It can be understood that when the native scroll bar in the native container is located at the upper boundary or the lower boundary of the display interface in the native container and detects that the target sliding operation disappears, when the native container receives the second signal sent by the parent container, the native container no longer sends the size information, style information and position information of the native scroll bar to the parent container, that is, at this time, the target scroll bar is no longer drawn and displayed by the parent container, but the native container draws and displays the native scroll bar, so that the scroll bar on the display interface can slide with the sliding content to provide the user with visual feedback of the current position.

[0097] It should be noted that since the position of the native scroll bar in the native container is bound to the position of the sliding content, when the native scroll bar in the native container is located at the upper or lower boundary of the display interface in the native container, it indicates that the boundary of the sliding content has been reached, that is, the bottom or top of the sliding content has been reached. In an embodiment of the present application, in order to provide feedback to the user that there is resistance to moving the sliding content when the bottom or top of the sliding content has been reached and the target sliding operation is detected, in a possible implementation, after obtaining the sliding distance of the target sliding operation, the moving distance of the sliding content on the display interface can be determined based on the sliding distance, and the moving distance is less than the sliding distance; and then the sliding content is moved based on the moving distance. Since the determined moving distance is less than the sliding distance, the visual effect of moving the sliding content with resistance to moving can be provided to the user.

[0098] It should be noted that after determining the moving distance of the sliding content on the display interface according to the sliding distance, the handleMove function can be called to process the moving logic, and the sliding content on the display interface can be moved in the direction of the target sliding operation to achieve the effect of continuing to move the sliding content on the display interface. Since the moving distance is less than the sliding distance of the target sliding operation, the visual effect of moving the sliding content with resistance can be fed back to the user.

[0099] In a possible implementation, determining the moving distance of the sliding content on the display interface according to the sliding distance may specifically include the following steps (1) and (2):

[0100] Step (1), determine the movement ratio according to the sliding distance.

[0101] In a possible implementation, the developer may pre-set a relationship correspondence table between the sliding distance and the moving ratio, in which the larger the sliding distance, the larger the corresponding moving ratio. It should be noted that in the embodiment of the present application, the range of the moving ratio needs to be between (0, 1), so as to ensure that the subsequently determined moving distance is not greater than or equal to the sliding distance, thereby ensuring that the visual effect of moving the sliding content with resistance can be fed back to the user. Specifically, after obtaining the sliding distance of the target sliding operation, the corresponding sliding content moving ratio can be found in the relationship correspondence table.

[0102] Exemplarily, the relationship between the sliding distance and the moving ratio may be shown in Table 2 below:

[0103] Table 2

[0104] Slide distance / px Move Scale 50 0.4 …… …… 80 0.6 …… …… 150 0.7 …… ……

[0105] From Table 2 above, we can see that the sliding distance (50px) corresponds to the movement ratio (0.2), the sliding distance (80px) corresponds to the movement ratio (0.4), the sliding distance (150px) corresponds to the movement ratio (0.7), and so on.

[0106] Step (2), determining the moving distance of the sliding content on the display interface according to the sliding distance and the moving ratio.

[0107] Specifically, after the movement ratio is determined, the sliding distance and the movement ratio may be multiplied to obtain the movement distance of the sliding content.

[0108] Exemplarily, when the sliding distance of the target sliding operation is 50px and the moving ratio of the sliding content is 0.4, the moving distance of the sliding content=sliding distance (50px)×moving ratio (0.4)=20px.

[0109] Figure 5It is a structural schematic diagram of a scroll bar display device provided in an embodiment of the present application.

[0110] For example, Figure 5 As shown, the device 500 includes:

[0111] A response module 501 is used for, in response to a target sliding operation, hiding the native scroll bar and displaying the target scroll bar in a parent container nested with the native container when the native scroll bar in the native container is located at the upper boundary or the lower boundary of the display interface in the native container, and fixing the target scroll bar at a position corresponding to the native scroll bar; the position of the native scroll bar is bound to the position of the sliding content on the display interface, the position of the target scroll bar is not bound to the position of the sliding content on the display interface, and the target sliding operation is a sliding operation in which the sliding direction is opposite to the upper boundary or the lower boundary of the display interface;

[0112] An acquisition module 502 is used to acquire a sliding distance of a target sliding operation;

[0113] The adjustment module 503 is used to adjust the size of the target scroll bar according to the sliding distance, and fix the adjusted target scroll bar at a position corresponding to the native scroll bar. The sliding distance is inversely proportional to the size of the target scroll bar.

[0114] In a possible implementation, the device further includes a sending module, which is used for the native container to send the size information, style information and position information of the native scroll bar to the parent container, so that the parent container draws and displays the target scroll bar according to the size information, style information and position information of the native scroll bar.

[0115] In one possible implementation, after the parent container draws and displays the target scroll bar according to the size information, style information and position information of the native scroll bar, the sending module is also used for the parent container to send a first signal to the native container, so that the native container determines that the parent container has completed drawing the target scroll bar according to the first signal.

[0116] In one possible implementation, after adjusting the size of the target scroll bar according to the sliding distance and fixing the adjusted target scroll bar at a position corresponding to the native scroll bar, the sending module is also used to, when the native scroll bar in the native container is located at the upper boundary or the lower boundary of the display interface in the native container and it is detected that the target sliding operation disappears, the parent container sends a second signal to the native container, so that the native container displays the native scroll bar and hides the target scroll bar according to the second signal.

[0117] In a possible implementation, the adjustment module 503 is specifically configured to determine a reduction ratio of the target scroll bar according to the sliding distance; and reduce the target scroll bar according to the reduction ratio to obtain a reduced target scroll bar.

[0118] In a possible implementation, the sending module is further used to send a vibration reminder when the size of the target scroll bar is adjusted according to the sliding distance, and the vibration reminder is used to remind that the bottom or top of the sliding content has been reached.

[0119] In a possible implementation, the adjustment module 503 is further configured to determine a moving distance of the sliding content on the display interface according to the sliding distance; and to move the sliding content according to the moving distance, wherein the moving distance is less than the sliding distance.

[0120] In a possible implementation, the adjustment module 503 is further configured to determine a movement ratio according to the sliding distance; and determine a movement distance of the sliding content on the display interface according to the sliding distance and the movement ratio.

[0121] Figure 6 It is a structural schematic diagram of an electronic device provided in an embodiment of the present application.

[0122] For example, Figure 6 As shown, the electronic device 600 includes: a memory 601 and a processor 602, wherein the memory 601 stores an executable program code 603, and the processor 602 is used to call and execute the executable program code 603 to perform a scroll bar display method.

[0123] In addition, an embodiment of the present application also protects a device, which may include a memory and a processor, wherein the memory stores an executable program code, and the processor is used to call and execute the executable program code to perform a scroll bar display method provided by an embodiment of the present application.

[0124] In this embodiment, the functional modules of the device can be divided according to the above method example. For example, each functional module can be corresponded, or two or more functions can be integrated into one processing module. The above integrated module can be implemented in the form of hardware. It should be noted that the division of modules in this embodiment is schematic and is only a logical function division. There may be other division methods in actual implementation.

[0125] In the case of dividing each functional module according to each function, the device may further include a sending module, etc. It should be noted that all relevant contents of each step involved in the above method embodiment can be referred to the functional description of the corresponding functional module, which will not be repeated here.

[0126] It should be understood that the device provided in this embodiment is used to execute the above-mentioned method for displaying a scroll bar, and thus can achieve the same effect as the above-mentioned implementation method.

[0127] In the case of an integrated unit, the device may include a processing module and a storage module. When the device is applied to an electronic device, the processing module may be used to control and manage the actions of the electronic device. The storage module may be used to support the electronic device in executing related program codes, etc.

[0128] The processing module may be a processor or a controller, which may implement or execute various exemplary logic blocks, modules and circuits shown in conjunction with the disclosure of the present application. The processor may also be a combination that implements computing functions, such as a combination of one or more microprocessors, a combination of digital signal processing (DSP) and a microprocessor, etc. The storage module may be a memory.

[0129] In addition, the device provided in the embodiments of the present application may specifically be a chip, component or module, and the chip may include a connected processor and memory; wherein the memory is used to store instructions, and when the processor calls and executes the instructions, the chip can execute a scroll bar display method provided in the above embodiments.

[0130] This embodiment also provides a computer-readable storage medium, in which a computer program code is stored. When the computer program code is executed on a computer, the computer executes the above-mentioned related method steps to implement a scroll bar display method provided in the above embodiment.

[0131] This embodiment further provides a computer program product. When the computer program product is run on a computer, the computer is caused to execute the above-mentioned related steps to implement a scroll bar display method provided in the above embodiment.

[0132] Among them, the device, computer-readable storage medium, computer program product or chip provided in this embodiment is used to execute the corresponding method provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding method provided above, and will not be repeated here.

[0133] Through the description of the above implementation methods, technical personnel in the relevant field can understand that for the convenience and simplicity of description, only the division of the above-mentioned functional modules is used as an example. In actual applications, the above-mentioned functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0134] In the embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic, for example, the division of modules or units is only a logical function division, and there may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another device, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0135] The above contents are only specific implementation methods of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A method for displaying a scroll bar, characterized in that: Applied to the Android operating system, the method comprises: In a case where a native scroll bar in a native container is located at an upper boundary or a lower boundary of a display interface in the native container, in response to a target sliding operation, the native scroll bar is hidden and a target scroll bar is displayed in a parent container nested with the native container, and the target scroll bar is fixed at a position corresponding to the native scroll bar; the position of the native scroll bar is bound to the position of the sliding content on the display interface, the position of the target scroll bar is not bound to the position of the sliding content on the display interface, and the target sliding operation is a sliding operation in a direction opposite to the upper boundary or the lower boundary of the display interface; Get the sliding distance of the target sliding operation; The size of the target scroll bar is adjusted according to the sliding distance, and the adjusted target scroll bar is fixed at a position corresponding to the native scroll bar, and the size of the sliding distance is inversely proportional to the size of the target scroll bar.

2. The method according to claim 1, characterized in that Displaying the target scroll bar in the parent container nested with the native container includes: The native container sends the size information, style information and position information of the native scroll bar to the parent container, so that the parent container draws and displays the target scroll bar according to the size information, style information and position information of the native scroll bar.

3. The method according to claim 2, characterized in that After the parent container draws and displays the target scroll bar according to the size information, style information and position information of the native scroll bar, the method further includes: The parent container sends a first signal to the native container, so that the native container determines, according to the first signal, that the parent container has completed drawing the target scroll bar.

4. The method according to claim 1, characterized in that: After adjusting the size of the target scroll bar according to the sliding distance and fixing the adjusted target scroll bar at a position corresponding to the native scroll bar, the method further includes: When the native scroll bar in the native container is located at the upper boundary or the lower boundary of the display interface in the native container and it is detected that the target sliding operation disappears, the parent container sends a second signal to the native container, so that the native container displays the native scroll bar and hides the target scroll bar according to the second signal.

5. The method according to claim 1, characterized in that The adjusting the size of the target scroll bar according to the sliding distance includes: Determining a reduction ratio of the target scroll bar according to the sliding distance; The target scroll bar is reduced according to the reduction ratio to obtain the reduced target scroll bar.

6. The method according to claim 1, characterized in that The method further comprises: When the size of the target scroll bar is adjusted according to the sliding distance, a vibration reminder is sent, and the vibration reminder is used to remind that the bottom or the top of the sliding content has been reached.

7. The method according to claim 1, characterized in that After obtaining the sliding distance of the target sliding operation, the method further includes: Determining a moving distance of the sliding content on the display interface according to the sliding distance; The sliding content is moved according to the moving distance, wherein the moving distance is less than the sliding distance.

8. The method according to claim 7, characterized in that The determining, according to the sliding distance, the moving distance of the sliding content on the display interface includes: Determining a movement ratio according to the sliding distance; The moving distance of the sliding content on the display interface is determined according to the sliding distance and the moving ratio.

9. A scroll bar display device, characterized in that: Applied to the Android operating system, the device comprises: A response module, configured to, when a native scroll bar in a native container is located at an upper boundary or a lower boundary of a display interface in the native container, hide the native scroll bar and display a target scroll bar in a parent container nested with the native container in response to a target sliding operation, and fix the target scroll bar at a position corresponding to the native scroll bar; the position of the native scroll bar is bound to the position of the sliding content on the display interface, the position of the target scroll bar is not bound to the position of the sliding content on the display interface, and the target sliding operation is a sliding operation in a direction opposite to the upper boundary or the lower boundary of the display interface; An acquisition module, used to acquire the sliding distance of a target sliding operation; The adjustment module is used to adjust the size of the target scroll bar according to the sliding distance, and fix the adjusted target scroll bar at a position corresponding to the native scroll bar, and the size of the sliding distance is inversely proportional to the size of the target scroll bar.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed, the method according to any one of claims 1 to 8 is implemented.

Images