Page scrolling control method and device, electronic equipment and storage medium

By detecting the start and end trigger points of gesture operations on mobile devices, calculating the moving distance and controlling the whole page scrolling, the problem of poor user experience in traditional web scrolling technology is solved, and a convenient whole-screen scrolling effect is achieved.

CN120491812APending Publication Date: 2025-08-15LION AUTOMOTIVE TECH NANJING CO LTD +2
View PDF 3 Cites 0 Cited by

Patent Information

Application Number
CN202510563797.4
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2025-04-30
Publication Date
2025-08-15

AI Technical Summary

Technical Problem

On mobile devices, traditional web page scrolling technology requires users to slide the entire screen to scroll entire pages, resulting in poor user experience and complex operation.

Method used

By detecting the user's gesture operations, obtaining the starting trigger point and end trigger point of the gesture, calculating the moving distance of the gesture operation, and controlling the current page to perform the full page scrolling operation based on the movement distance, including identifying fixed elements and scrollable elements, judging the direction and position of the gesture operation, and generating prompt information to improve the user experience.

Benefits of technology

The entire screen scrolling is achieved through short-distance gesture operation, which improves the user's interactive experience and solves the problems of poor user experience and complex operation.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN120491812A_ABST
    Figure CN120491812A_ABST
Patent Text Reader

Abstract

The invention relates to the technical field of computers, in particular to a page scrolling control method and device, electronic equipment and a storage medium, and the method comprises the steps that gesture operation of a user is detected; determining a trigger element and a start trigger point and an end point trigger point of the trigger element according to the gesture operation of the user, and calculating a movement distance of the gesture operation according to the start trigger point and the end point trigger point; and controlling the current page to execute a whole page scrolling operation according to the moving distance. Therefore, the problems of poor user experience, complex operation and the like when the whole page scrolling control is realized by sliding the whole screen in the related technology are solved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

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

[0002] With the rapid development of mobile internet and the ubiquity of smart devices, users' expectations for web browsing experience are increasing. Traditional web scrolling technologies rely primarily on mouse scrolling or keyboard operations, which provide a stable browsing experience on desktop devices. However, on mobile devices, content switching is limited to the distance of a touch gesture. To read the entire next screen, users must scroll across the entire screen, which is not user-friendly. Summary of the Invention

[0003] The present application provides a page scrolling control method, device, electronic device and storage medium to solve the problems of poor user experience and complex operation in the related art of achieving full-page scrolling control by sliding the entire screen.

[0004] The first aspect of the present application provides a method for controlling page scrolling, including the following steps: detecting a user's gesture operation; determining a trigger element and a starting trigger point and an ending trigger point of the trigger element based on the user's gesture operation, and calculating a moving distance of the gesture operation based on the starting trigger point and the ending trigger point; and controlling the current page to perform a full-page scrolling operation based on the moving distance.

[0005] Optionally, the current page is controlled to perform a full-page scrolling operation according to the moving distance, including: if the moving distance is greater than or equal to a preset distance, determining the page scrolling direction according to the moving distance; obtaining the scrolling offset before the user's gesture operation and the viewport height of the current page; and controlling the current page to perform a full-page scrolling operation according to the page scrolling direction, scrolling offset and viewport height.

[0006] Optionally, calculating the moving distance of the gesture operation based on the starting trigger point and the ending trigger point includes: identifying the starting Y coordinate of the starting trigger point and the ending Y coordinate of the ending trigger point; and calculating the moving distance of the gesture operation based on the starting Y coordinate and the ending Y coordinate.

[0007] Optionally, before controlling the current page to perform a full-page scrolling operation based on the moving distance, it also includes: identifying the moving direction of the gesture operation and the current position of the starting trigger point; if the current position is in the first area of the current page and the moving direction is downward, a first prompt message is generated; if the current position is in the second area of the current page and the moving direction is upward, a second prompt message is generated.

[0008] Optionally, identifying the moving direction of the gesture operation includes: obtaining the scrolling offset before the user's gesture operation; calculating the position difference of the gesture operation based on the scrolling offset, the current movement of the gesture operation, and the starting trigger point; and determining the moving direction of the gesture operation based on the position difference.

[0009] Optionally, before detecting the user's gesture operation, the method further includes: obtaining the viewport height and scroll element height of the current page; if the scroll element height is less than or equal to the viewport height, setting the current page to a non-scrollable state.

[0010] Optionally, before determining the trigger element and the starting trigger point and end trigger point of the trigger element according to the user's gesture operation, it also includes: identifying the fixed elements and scrollable elements in the current page; if the trigger element is a fixed element, the full-page scrolling operation is not performed; if the trigger element is a scrollable element, the starting trigger point and end trigger point of the trigger element are determined according to the user's gesture operation.

[0011] The second aspect of the present application provides a control device for page scrolling, including: a detection module for detecting a user's gesture operation; a determination module for determining a trigger element and a starting trigger point and an ending trigger point of the trigger element according to the user's gesture operation, and calculating a moving distance of the gesture operation according to the starting trigger point and the ending trigger point; and a control module for controlling the current page to perform a full-page scrolling operation according to the moving distance.

[0012] Optionally, the control module is further used to determine the page scrolling direction according to the moving distance if the moving distance is greater than or equal to a preset distance; obtain the scrolling offset before the user's gesture operation and the viewport height of the current page; and control the current page to perform a full-page scrolling operation according to the page scrolling direction, scrolling offset and viewport height.

[0013] Optionally, the determination module is further configured to identify a starting Y coordinate of a starting trigger point and an ending Y coordinate of an ending trigger point; and calculate a moving distance of the gesture operation according to the starting Y coordinate and the ending Y coordinate.

[0014] Optionally, the page scrolling control device also includes: a first recognition module, used to identify the moving direction of the gesture operation and the current position of the starting trigger point before controlling the current page to perform a full-page scrolling operation according to the moving distance; a generation module, used to generate a first prompt message if the current position is in the first area of the current page and the moving direction is downward; if the current position is in the second area of the current page and the moving direction is upward, then generate a second prompt message.

[0015] Optionally, the first recognition module is further used to identify the moving direction of the gesture operation, including: obtaining the scrolling offset before the user's gesture operation; calculating the position difference of the gesture operation based on the scrolling offset, the current movement of the gesture operation, and the starting trigger point; and determining the moving direction of the gesture operation based on the position difference.

[0016] Optionally, the page scrolling control device also includes: a setting module for obtaining the viewport height and scrolling element height of the current page before detecting the user's gesture operation; if the scrolling element height is less than or equal to the viewport height, setting the current page to a non-scrollable state.

[0017] Optionally, the control device for page scrolling also includes: a second identification module, used to identify fixed elements and scrollable elements in the current page before determining the trigger element and the starting trigger point and end trigger point of the trigger element according to the user's gesture operation; an execution module, used to not perform the full-page scrolling operation if the trigger element is a fixed element; if the trigger element is a scrollable element, determine the starting trigger point and end trigger point of the trigger element according to the user's gesture operation.

[0018] The third aspect of the present application provides an electronic device, including: a memory, a processor, and a computer program stored in the memory and runnable on the processor, wherein the processor executes the program to implement a page scrolling control method as described in the above embodiment.

[0019] The fourth aspect of the present application provides a computer-readable storage medium having a computer program or instruction stored thereon. When the computer program or instruction is executed, it is used to implement a page scrolling control method as described in the above embodiment.

[0020] Therefore, this application has at least the following beneficial effects:

[0021] When a user performs a gesture, the embodiment of the present application obtains the starting and ending trigger points of the gesture and calculates the movement distance of the gesture. This allows the user to scroll the entire screen through short-distance gestures, improving the user's interactive experience. This solves the problems of related technologies that achieve full-page scrolling by sliding the entire screen, which suffer from poor user experience and complex operations.

[0022] Additional aspects and advantages of the present application will be given in part in the description below, and in part will become apparent from the description below, or will be learned through practice of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] The above and / or additional aspects and advantages of the present application will become apparent and easily understood from the following description of the embodiments in conjunction with the accompanying drawings, in which:

[0024] Figure 1This is a flowchart of a page scrolling control method provided according to an embodiment of the present application;

[0025] Figure 2 This is an example diagram of sliding downward from the top provided according to one embodiment of the present application;

[0026] Figure 3 This is an example diagram of bottom-up sliding provided according to one embodiment of the present application;

[0027] Figure 4 This is an example diagram of a downward sliding gesture provided according to an embodiment of the present application;

[0028] Figure 5 A block diagram of a page scrolling control device provided according to an embodiment of the present application;

[0029] Figure 6 Schematic diagram of the structure of an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0030] The following describes in detail embodiments of the present application, examples of which are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are intended to be used to explain the present application, and should not be construed as limiting the present application.

[0031] The following describes the page scrolling control method, device, electronic device and storage medium of the embodiment of the present application with reference to the accompanying drawings. In response to the problems mentioned in the above background technology, the present application provides a page scrolling control method. In this method, when the user performs a gesture operation, the starting trigger point and the end trigger point of the gesture are obtained, and the moving distance of the gesture operation is calculated. Through short-distance gesture operation, the purpose of scrolling the entire screen is achieved, thereby improving the user's interactive experience. In this way, the problems of poor user experience and complicated operation in the related art of achieving full-page scrolling control by sliding the entire screen are solved.

[0032] Specifically, Figure 1 A flow chart of a page scrolling control method provided in an embodiment of the present application.

[0033] like Figure 1 As shown, the page scrolling control method includes the following steps:

[0034] In step S101 , a user's gesture operation is detected.

[0035] It is understandable that when the screen is touched, the embodiment of the present application can obtain the touch screen gesture operation through the touchstart event.

[0036] It's important to note that for newly switched scrolling elements, the height is re-acquired (similar to how h2 is acquired), relevant event listeners (touchstart, touchmove, touchend, etc.) are set, and scrolling parameters are recalculated based on the new element's characteristics and user settings (such as the minimum scrolling distance len1). For example, the new element may have a different height and layout, requiring a new definition of its scrollable range and minimum scrolling trigger conditions. Recalculating scrolling parameters ensures that each side-by-side scrolling element scrolls correctly when switching, improving the flexibility and reliability of multi-element side-by-side scrolling and meeting the interactive requirements of complex web page layouts. While the user is moving their finger, the touchmove event is listened for. To prevent excessive computation and page lag, the event handler is throttled. Throttling can limit the number of times a function executes within a certain period of time. For example, using a timer or requestAnimationFrame ensures that when multiple touchmove events are triggered in a short period of time, only the first or last event (depending on the throttling strategy) is processed. This reduces unnecessary computation and page redraws, thereby maintaining page smoothness. When users quickly slide the screen to scroll, throttling can effectively avoid the lag caused by frequent calculation of gesture positions and updating of page scrolling, providing a smooth scrolling experience.

[0037] In another embodiment, in order to prevent the page from returning to the previous scrolling position after refreshing, two methods are used to implement it. First, try setting the value of the history.scrollRestoration attribute to manual. This attribute is an attribute introduced in HTML5 to control the scrolling behavior during browser history navigation. When set to manual, the browser will not automatically restore the scroll position when navigating (including refreshing), but will maintain the current position or scroll according to the developer's custom logic. However, if the browser does not support this attribute (such as some older versions of browsers), it is implemented by using window.scrollTo({top:0}) in the window.onunload event. The window.onunload event is triggered when the page is about to be unloaded (such as when refreshing or closing the page). Setting the scroll to the top in this event ensures that the page always starts from the top after refreshing, unless the user has scrolled to the top before refreshing.

[0038] In one embodiment of the present application, before detecting the user's gesture operation, it also includes: obtaining the viewport height and scroll element height of the current page; if the scroll element height is less than or equal to the viewport height, setting the current page to a non-scrollable state.

[0039] Specifically, the embodiment of the present application can use JavaScript's window.innerHeight property to obtain the height of the viewport. The viewport is the visible area in the browser for displaying web page content, excluding the browser's menu bar, toolbar, address bar, etc. The viewport height (h1) will change dynamically as the browser window size changes. For example, when the user adjusts the browser window size, window.innerHeight will be updated to the new viewport height in real time, providing an accurate reference for subsequent calculations of the scrolling distance and judgment of whether the page is scrollable. Secondly, the embodiment of the present application can obtain the total height (h2) of the scrolling element height by obtaining the offsetHeight property of the full-page scrolling element (for example, a div element scrollEle with a specific ID). The offsetHeight property returns the pixel height maxH of the element, including the element's content, inner margins and borders, but excluding outer margins. When calculating full-page scrolling, it is necessary to accurately know the actual height of the scrolling element in order to determine whether scrolling is required and to calculate the distance and range of scrolling. For example, for a scrolling area containing a large amount of text content and pictures, offsetHeight will accurately reflect the total height of the area, thereby ensuring the accuracy of the scrolling operation.

[0040] Furthermore, it is determined whether the height of the scrolling element (h2) is less than or equal to the viewport height (h1). If h2<=h1, it means that the content of the scrolling element of the entire page does not exceed the viewport range, and the non-scrollable state disableScrollState is set to true. In this case, the user does not need to perform any scrolling operations when touching the screen, because all the content is already visible on the screen, avoiding unnecessary scrolling calculations and interactive responses, and improving performance and user experience. For example, on a page with less content, such as a simple login page or a small notification page, the height of the entire page element may be less than the viewport height. In this case, disabling scrolling can prevent the user from misoperating and causing the page to shake. When certain conditions are met (such as the height of the page element does not exceed the screen height, etc.), the state will be set to true to prevent unnecessary scrolling operations.

[0041] In step S102 , a trigger element and a start trigger point and an end trigger point of the trigger element are determined according to the user's gesture operation, and a moving distance of the gesture operation is calculated according to the start trigger point and the end trigger point.

[0042] It is understandable that when the user starts touching the screen, the starting trigger point point1 is obtained by monitoring the touchstart event of the browser, and the end trigger point point3 is obtained by monitoring the touchend event when the user stops the gesture movement.

[0043] In one embodiment of the present application, the moving distance of the gesture operation is calculated based on the starting trigger point and the ending trigger point, including: identifying the starting Y coordinate of the starting trigger point and the ending Y coordinate of the ending trigger point; and calculating the moving distance of the gesture operation based on the starting Y coordinate and the ending Y coordinate.

[0044] It can be understood that the Y coordinate (touchStartY) of the touch point relative to the viewport is obtained through the Touch.pageY property of point1. The Touch.pageY property returns the Y coordinate of the touch point relative to the upper left corner of the document, taking into account the scroll offset of the page, which enables calculations based on the accurate starting position when calculating the gesture movement distance and determining the scrolling direction. For example, when the user clicks and starts sliding on the page, the touchstart event captures the information of the touch starting point, including the element and the precise Y coordinate, providing basic data for subsequent gesture operation processing. Secondly, the Y coordinate (touchEndY) of the touch point relative to the viewport is obtained through the Touch.pageY property of the moving end point (point3). The value of touchEndY marks the end position of the user gesture operation.

[0045] Furthermore, the embodiment of the present application can use touchStartY and touchStartY together to calculate the final distance of the gesture movement, thereby determining whether the user's gesture intention is a small movement (not triggering full-page scrolling) or a large movement (triggering full-page scrolling), and calculating the gesture movement distance distance = touchEndY-touchStartY.

[0046] In one embodiment of the present application, before determining the trigger element and the starting trigger point and the end trigger point of the trigger element according to the user's gesture operation, it also includes: identifying the fixed elements and scrollable elements in the current page; if the trigger element is a fixed element, the full-page scrolling operation is not performed; if the trigger element is a scrollable element, the starting trigger point and the end trigger point of the trigger element are determined according to the user's gesture operation.

[0047] It is understandable that a list of elements excluded from full-page scrolling arr1 is defined. This list contains elements in the web page that should not participate in full-page scrolling, that is, fixed elements, which can be fixed navigation bars, headers, footers, pop-ups, etc. By explicitly specifying these elements, unnecessary movement or interference can be avoided during the scrolling process. Specifically, the embodiment of the present application can traverse the pre-set list of elements excluded from full-page scrolling arr1, and determine whether the triggering element ele1 is equal to or within the elements in the arr1 list. If so, the non-scrollable state disableScrollState is set to true, and no scrolling operation is required in the touch event. This step ensures that specific elements such as fixed navigation bars and pop-ups will not accidentally trigger full-page scrolling, ensuring the accuracy and stability of page interaction. For example, when a user clicks a button in the navigation bar, since the navigation bar is usually added to the exclusion list, the click operation will not cause the full page to scroll, but the button's click event processing function will be executed normally.

[0048] In step S103, the current page is controlled to perform a full-page scrolling operation according to the moving distance.

[0049] In one embodiment of the present application, the current page is controlled to perform a full-page scrolling operation according to the moving distance, including: if the moving distance is greater than or equal to a preset distance, determining the page scrolling direction according to the moving distance; obtaining the scrolling offset before the user's gesture operation and the viewport height of the current page; and controlling the current page to perform a full-page scrolling operation according to the page scrolling direction, scrolling offset and viewport height.

[0050] The preset distance is the minimum scrolling distance and can be set based on actual needs. For example, if set to len1, it can be 10% of the screen height. This parameter determines the minimum distance threshold for a user gesture to trigger a full-page scroll. It is expressed in pixels or percentage and can be adjusted based on specific needs. For example, if a more sensitive scrolling response is required, the user can reduce this value appropriately; if it is to prevent accidental operation, it can be increased.

[0051] Based on the above embodiment, the embodiment of the present application calculates the final movement distance of the user gesture operation. Specifically, if the absolute value of distance is less than the preset minimum scrolling distance (len1), it means that the user's gesture operation may be an accidental touch or a small adjustment. At this time, the scroll offset preTransY before the user's gesture operation is obtained through the transform value of the scrollEle element's style attribute, and the transform Y-axis value of the scrollEle element's style attribute is set to preTransY to restore the page scrolling to the starting position of the gesture movement, avoiding unnecessary page scrolling. When distance is greater than or equal to 0, it means that the user scrolled up. The transform Y-axis attribute value of the scrollEle element is set to preTransY+h1 to achieve full page scrolling up. In this way, the full page scrolling behavior of the page is accurately controlled according to the distance and direction of the user's gesture operation, providing an intuitive and convenient user interaction experience. For example, when browsing a long document page, if the user quickly swipes up a large distance (greater than len1), the page will scroll up the entire page, making it easier for the user to quickly browse the document content; if the user only swipes slightly (less than len1), the page will remain in its original position, preventing frequent page scrolling caused by accidental operation.

[0052] In another embodiment, when multiple side-by-side elements on a webpage need to scroll independently, the previous scrolling state is first cleared when switching scrolling elements. This includes resetting relevant scrolling variables (such as preTransY), canceling ongoing throttling operations (if any), and restoring the transform property of the current scrolling element to its initial value. By clearing the previous scrolling state, the new scrolling element is ensured to calculate and process scrolling operations from the initial state, preventing the residual effects of the previous scroll from interfering with the scrolling behavior of the new element, and ensuring that each element scrolls independently and accurately. For the newly switched scrolling element, its height is re-acquired (similar to the method of obtaining h2), relevant event listeners (touchstart, touchmove, touchend, etc.) are set, and scrolling parameters are recalculated based on the characteristics of the new element and user settings (such as the minimum scrolling distance len1). For example, the new element may have a different height and layout, requiring the re-determination of its scrollable range and minimum scrolling trigger conditions. Recalculating scrolling parameters ensures that each side-by-side scrolling element can correctly scroll according to its own situation when switching, improving the flexibility and reliability of multi-element side-by-side scrolling and meeting the interactive requirements of complex web page layouts.

[0053] In one embodiment of the present application, before controlling the current page to perform a full-page scrolling operation based on the moving distance, it also includes: identifying the moving direction of the gesture operation and the current position of the starting trigger point; if the current position is in the first area of the current page and the moving direction is downward, a first prompt message is generated; if the current position is in the second area of the current page and the moving direction is upward, a second prompt message is generated.

[0054] Among them, the first area is Figure 2 The first screen shown, the second area is as follows Figure 2 The third screen shown, the third area is as follows Figure 2 The second screen is shown.

[0055] It is understandable that if Figure 2 As shown in , if the gesture starting trigger point point1 is located on the first screen (between 0 and h1 from the top of the element), the scrolling operation is not performed, but a friendly prompt is given, such as a prompt message "reached the top" is displayed to avoid the appearance of blank areas caused by scrolling the screen. Figure 3 As shown, if the gesture starting trigger point point1 is located at the last screen (from maxH–h1 to maxH from the top of the element), the scrolling operation is not performed. Instead, a friendly prompt is given, such as displaying a prompt message "reached the bottom" to avoid the appearance of a blank area caused by scrolling the screen.

[0056] In one embodiment of the present application, identifying the moving direction of a gesture operation includes: obtaining the scrolling offset before the user's gesture operation; calculating the position difference of the gesture operation based on the scrolling offset, the current movement of the gesture operation, and the starting trigger point; and determining the moving direction of the gesture operation based on the position difference.

[0057] It is understandable that the embodiment of the present application can obtain the previous Y-axis scrolling distance preTransY (if not available, set to 0) through the transform value of the scrollEle element style attribute. Then calculate the position difference (tranY) of the gesture movement according to touchMoveY-touchStartY+preTransY. touchMoveY is the Y coordinate of the current moving point relative to the viewport, which is obtained through the Touch.pageY attribute of point2 (similar to obtaining touchStartY in the touchstart event). The calculated tranY value accurately reflects the movement distance of the user gesture in the Y-axis direction, taking into account the starting touch point, the current moving point and the previously existing scrolling offset, and provides accurate parameters for updating the transform attribute of the entire page scrolling element, thereby achieving a smooth scrolling effect. For example, when the user slides the screen upward, touchMoveY is less than touchStartY, and tranY is a negative value, causing the page to scroll up; conversely, when sliding downward, tranY is a positive value, and the page scrolls down, such as Figure 4 shown.

[0058] According to the page scrolling control method proposed in the embodiments of this application, when a user performs a gesture, the starting and ending trigger points of the gesture are obtained, and the movement distance of the gesture is calculated. Through short-distance gestures, the entire screen can be scrolled, improving the user's interactive experience. This solves the problems of the related art of achieving full-page scrolling by sliding the entire screen, which suffers from poor user experience and complex operation.

[0059] Next, a page scrolling control device according to an embodiment of the present application will be described with reference to the accompanying drawings.

[0060] Figure 5 3 is a block diagram of a device for controlling page scrolling according to an embodiment of the present application.

[0061] like Figure 5 As shown, the page scrolling control device 10 includes: a detection module 100 , a determination module 200 and a control module 300 .

[0062] Among them, the detection module 100 is used to detect the user's gesture operation; the determination module 200 is used to determine the trigger element and the starting trigger point and the end trigger point of the trigger element according to the user's gesture operation, and calculate the moving distance of the gesture operation according to the starting trigger point and the end trigger point; the control module 300 is used to control the current page to perform a full-page scrolling operation according to the moving distance.

[0063] In one embodiment of the present application, the control module 300 is further used to determine the page scrolling direction based on the moving distance if the moving distance is greater than or equal to a preset distance; obtain the scrolling offset before the user's gesture operation and the viewport height of the current page; and control the current page to perform a full-page scrolling operation based on the page scrolling direction, scrolling offset and viewport height.

[0064] In one embodiment of the present application, the determination module 200 is further used to identify the starting Y coordinate of the starting trigger point and the ending Y coordinate of the ending trigger point; and calculate the moving distance of the gesture operation based on the starting Y coordinate and the ending Y coordinate.

[0065] In one embodiment of the present application, the page scrolling control device 10 also includes: a first recognition module, which is used to identify the moving direction of the gesture operation and the current position of the starting trigger point before controlling the current page to perform a full-page scrolling operation according to the moving distance; a generation module, which is used to generate a first prompt message if the current position is in the first area of the current page and the moving direction is downward; if the current position is in the second area of the current page and the moving direction is upward, then generate a second prompt message.

[0066] In one embodiment of the present application, the first recognition module is further used to identify the moving direction of the gesture operation, including: obtaining the scrolling offset before the user's gesture operation; calculating the position difference of the gesture operation based on the scrolling offset, the current movement of the gesture operation, and the starting trigger point; and determining the moving direction of the gesture operation based on the position difference.

[0067] In one embodiment of the present application, the page scrolling control device 10 also includes: a setting module for obtaining the viewport height and scrolling element height of the current page before detecting the user's gesture operation; if the scrolling element height is less than or equal to the viewport height, setting the current page to a non-scrollable state.

[0068] In one embodiment of the present application, the page scrolling control device 10 also includes: a second identification module, which is used to identify fixed elements and scrollable elements in the current page before determining the trigger element and the starting trigger point and end trigger point of the trigger element according to the user's gesture operation; an execution module, which is used to not perform the full-page scrolling operation if the trigger element is a fixed element; if the trigger element is a scrollable element, determine the starting trigger point and end trigger point of the trigger element according to the user's gesture operation.

[0069] It should be noted that the above explanation of the embodiment of the page scrolling control method is also applicable to the page scrolling control device of this embodiment, and will not be repeated here.

[0070] The page scrolling control device proposed in the embodiments of this application obtains the starting and ending trigger points of a user's gesture when performing a gesture, calculates the gesture's movement distance, and achieves full-screen scrolling through short-distance gestures, improving the user's interactive experience. This solves the problems of related technologies that achieve full-page scrolling by sliding the entire screen, which suffer from poor user experience and complex operations.

[0071] Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. The electronic device may include:

[0072] A memory 601 , a processor 602 , and a computer program stored in the memory 601 and executable on the processor 602 .

[0073] When the processor 602 executes the program, the page scrolling control method provided in the above embodiment is implemented.

[0074] Furthermore, the electronic device further includes:

[0075] The communication interface 603 is used for communication between the memory 601 and the processor 602 .

[0076] The memory 601 is used to store computer programs that can be run on the processor 602 .

[0077] The memory 601 may include a high-speed RAM (Random Access Memory) memory, and may also include a non-volatile memory, such as at least one disk memory.

[0078] If the memory 601, the processor 602, and the communication interface 603 are implemented independently, the communication interface 603, the memory 601, and the processor 602 can be connected to each other via a bus and communicate with each other. The bus can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus, or an EISA (Extended Industry Standard Architecture) bus. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 6 Only one thick line is used in the diagram, but this does not mean that there is only one bus or one type of bus.

[0079] Optionally, in a specific implementation, if the memory 601, the processor 602 and the communication interface 603 are integrated on a chip, the memory 601, the processor 602 and the communication interface 603 can communicate with each other through an internal interface.

[0080] The processor 602 may be a CPU (Central Processing Unit), or an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement the embodiments of the present application.

[0081] An embodiment of the present application further provides a computer-readable storage medium having a computer program stored thereon, which implements the above-mentioned page scrolling control method when the program is executed by a processor.

[0082] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described can be combined in any one or N embodiments or examples in a suitable manner. In addition, those skilled in the art can combine and combine different embodiments or examples described in this specification and features of different embodiments or examples without contradiction.

[0083] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be understood to indicate or imply relative importance or implicitly specify the number of technical features indicated. Thus, a feature specified as "first" or "second" may explicitly or implicitly include at least one such feature. In the description of this application, "N" means at least two, for example, two, three, etc., unless otherwise specifically defined.

[0084] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, fragment or portion of code comprising one or more executable instructions for implementing the steps of a custom logical function or process, and the scope of the preferred embodiments of the present application includes alternative implementations in which functions may be performed out of the order shown or discussed, including performing functions in a substantially simultaneous manner or in reverse order depending on the functions involved, which should be understood by those skilled in the art to which the embodiments of the present application belong.

[0085] It should be understood that various parts of the present application can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiment, the N steps or methods can be implemented using software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented using hardware, as in another embodiment, any one of the following technologies known in the art or a combination thereof can be used: a discrete logic circuit having a logic gate circuit for implementing a logic function on a data signal, an application-specific integrated circuit having a suitable combination of logic gate circuits, a programmable gate array, a field programmable gate array, etc.

[0086] Those skilled in the art will understand that all or part of the steps in the method of the above embodiment can be completed by instructing related hardware through a program, and the program can be stored in a computer-readable storage medium. When the program is executed, it includes one or a combination of the steps of the method embodiment.

[0087] Although the embodiments of the present application have been shown and described above, it can be understood that the above embodiments are exemplary and cannot be understood as limitations on the present application. Ordinary technicians in this field can change, modify, replace and modify the above embodiments within the scope of the present application.

Claims

1. A method for controlling page scrolling, characterized in that: The following steps are involved: Detect user gestures; Determine a trigger element and a starting trigger point and an ending trigger point of the trigger element according to a user's gesture operation, and calculate a moving distance of the gesture operation according to the starting trigger point and the ending trigger point; The current page is controlled to perform a full-page scrolling operation according to the moving distance.

2. The page scrolling control method according to claim 1, characterized in that: The controlling the current page to perform a full-page scrolling operation according to the moving distance includes: If the moving distance is greater than or equal to the preset distance, determining the page scrolling direction according to the moving distance; Get the scroll offset before the user's gesture operation and the viewport height of the current page; The current page is controlled to perform a full-page scrolling operation according to the page scrolling direction, the scrolling offset, and the viewport height.

3. The page scrolling control method according to claim 1, characterized in that: Calculating the moving distance of the gesture operation according to the starting trigger point and the ending trigger point includes: Identify the starting Y coordinate of the starting trigger point and the ending Y coordinate of the ending trigger point; The moving distance of the gesture operation is calculated according to the starting Y coordinate and the ending Y coordinate.

4. The page scrolling control method according to claim 1, characterized in that: Before controlling the current page to perform a full-page scrolling operation according to the moving distance, the method further includes: Identifying the movement direction of the gesture operation and the current position of the starting trigger point; If the current position is in the first area of the current page and the moving direction is downward, generating a first prompt message; If the current position is in the second area of the current page and the moving direction is upward, a second prompt message is generated.

5. The page scrolling control method according to claim 4, characterized in that: Identifying the movement direction of the gesture operation includes: Get the scroll offset before the user's gesture operation; Calculating a position difference of the gesture operation according to the scroll offset, the current movement of the gesture operation, and the starting trigger point; The moving direction of the gesture operation is determined according to the position difference.

6. The page scrolling control method according to claim 1, characterized in that: Before detecting the user's gesture operation, it also includes: Get the viewport height and scroll element height of the current page; If the height of the scroll element is less than or equal to the viewport height, the current page is set to a non-scrollable state.

7. The page scrolling control method according to claim 1, characterized in that: Before determining the trigger element and the starting trigger point and the ending trigger point of the trigger element according to the user's gesture operation, the method further includes: Identifying fixed elements and scrollable elements in the current page; If the trigger element is the fixed element, the full-page scrolling operation is not performed; If the trigger element is the scrollable element, the start trigger point and the end trigger point of the trigger element are determined according to the user's gesture operation.

8. A page scrolling control device, characterized in that: include: A detection module, used to detect user gesture operations; A determination module, configured to determine a trigger element and a start trigger point and an end trigger point of the trigger element according to a user's gesture operation, and calculate a moving distance of the gesture operation according to the start trigger point and the end trigger point; The control module is used to control the current page to perform a full-page scrolling operation according to the moving distance.

9. An electronic device, characterized in that: include: A memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the page scrolling control method according to any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program or instruction stored thereon, characterized in that: When the computer program or instruction is executed, the page scrolling control method according to any one of claims 1 to 7 is implemented.

Citation Information

Patent Citations

  • Method for controlling page sliding, page control method, system, and computer readable storage medium

    CN108958612A

  • Page based navigation and presentation of web content

    US20130145252A1

  • Hybrid scrolling of user interfaces

    US20190065021A1