CN106293409A - A kind of beautification method of lightweight scroll bar - Google Patents
A kind of beautification method of lightweight scroll bar Download PDFInfo
- Publication number
- CN106293409A CN106293409A CN201610658992.6A CN201610658992A CN106293409A CN 106293409 A CN106293409 A CN 106293409A CN 201610658992 A CN201610658992 A CN 201610658992A CN 106293409 A CN106293409 A CN 106293409A
- Authority
- CN
- China
- Prior art keywords
- scroll bar
- value
- height
- content
- visual layers
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
- G06F3/04855—Interaction with scrollbars
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The beautification method of the present invention a kind of lightweight scroll bar, including writing page layout CSS, builds html Rotating fields, and including content visual layers and content information layer, and dynamically generation beautifies scroll bar element in content visual layers；Calculate roll height/length, and according to roll height/length Dynamic Announce or hide beautify scroll bar element；Monitor the scrollTop value/scrollLeft value of scroll bar, and beautify the position of the position mark block element on scroll bar element according to scrollTop value/scrollLeft value change.Advantage of the present invention is as follows: when rolling, it is possible to achieve synchronizes the sight equation of smooth rolling, brings the effect of smooth rolling to user to experience；Can allow what user can see unified pattern in any browser to beautify scroll bar element, and user can carry out the self-defined css pattern beautifying scroll bar element according to the hobby of oneself, can strengthen user's experience to function.
Description
Technical field
The present invention relates to the beautification method of a kind of lightweight scroll bar.
Background technology
Along with the fast development of the Internet, and the highlighting and the demand of big data display of the aesthetic core of flattening, can be real
Showing more information in the most limited block space, scroll bar is performed meritorious deeds never to be obliterated；But, due to the core in current browser market
The heart is different, and the attitude that scroll bar presents all is not quite similar, and the rolling function of scroll bar is the most smooth.Therefore, user how is allowed
Can see the scroll bar of unified pattern in any browser, and guarantee rolling function more smooth just become one outstanding and
The difficult problem not solved.
Summary of the invention
The technical problem to be solved in the present invention, is to provide the beautification method of a kind of lightweight scroll bar, passes through the method
Realize scroll bar being beautified and realizing the smooth rolling of scroll bar, user's experience to scroll bar effect can be improved.
The present invention is achieved in that the beautification method of a kind of lightweight scroll bar, and described method comprises the steps:
Step 1, write page layout CSS, build html Rotating fields, including content visual layers and content information layer, and
Dynamically generate in content visual layers and beautify scroll bar element；
Step 2, calculate roll height/length, and according to roll height/length Dynamic Announce or hide beautify scroll bar
Element；
Step 3, monitor the scrollTop value/scrollLeft value of scroll bar hidden, and according to scrollTop value/
The change of scrollLeft value beautifies the position of the position mark block element on scroll bar element.
Further, also include:
Step 4, give beautify on scroll bar element position mark block element binding mousemove event, dragged by mouse
Drag position mark block element and change position, and change according to the distance of mouse drag in position and the amendment of content information layer
Hold the scrollTop value/scrollLeft value of visual layers.
Further, in described step 4, described " change the position of content information layer according to the distance of mouse drag
And the scrollTop value/scrollLeft value of amendment content visual layers " particularly as follows:
Utilize the height that the distance of mouse drag rolls equal to content information layer with the ratio of content visual layers height/width
Degree/length and the ratio of content information layer height/width, calculate the height/length that content information layer rolls, and according to rolling
Height/length change content information layer position；Meanwhile, distance and the content visual layers height/width of mouse drag are utilized
Ratio equal to the scrollTop value/scrollLeft value of content visual layers and the ratio of content visual layers height/width, count
Calculate the scrollTop value/scrollLeft value of content visual layers, and revise the scrollTop value of content visual layers/
ScrollLeft value.
Further, in step 1, described " writing page layout CSS " particularly as follows:
Utilize the principle that interdepends of CSS relative localization and absolute fix, write the css pattern volume beautifying scroll bar element
Code；And the overflow value arranging the div producing scroll bar is auto, with the situation according to content information layer in content visual layers
Upper generation or do not produce scroll bar.
Further, in step 1, described " in content visual layers dynamically generate beautify scroll bar element " particularly as follows:
JS is utilized to obtain content visual layers height/width and content information layer height/width, according to the visual floor height of content
Degree/width is equal to position mark block length and the ratio of scroll bar length on scroll bar with the ratio of content information layer height/width
Value, dynamically generates and beautifies scroll bar element and position mark block element, and the position mark on hiding scroll bar and scroll bar
Note block.
Further, described step 2 particularly as follows:
Utilize content information layer height/width to deduct content visual layers height/width to obtain rolling height/length, will
To rolling height/length compare with 0 value, if the rolling height/length obtained is more than 0, then dynamically generate or aobvious
Show that generated beautifies scroll bar element and position mark block element；If the rolling height/length obtained is less than or equal to 0,
Do not generate or hide generated beautify scroll bar element and position mark block element.
Further, described step 3 particularly as follows:
Bind rolling event first to content visual layers, and monitor the scrollTop value/scrollLeft of the scroll bar hidden
Value；Then, it is equal to position mark block according to the ratio of scrollTop value/scrollLeft value with content information layer height/width
Element, to the ratio of the distance value Yu content visual layers height/width beautifying scroll bar element initiating terminal, calculates position mark
Element is to the distance value beautifying scroll bar element initiating terminal；According to distance value, position-marker element is moved to corresponding position afterwards
Put.
Present invention have the advantage that 1, in the rolling process of scroll bar, by monitoring the rolling of scroll bar hidden
Event, realizes position position-marker element moved in time to corresponding, thus realizes synchronizing the sight equation of smooth rolling, give
User brings the effect of smooth rolling to experience；2, user can be allowed can to see beautifying of unified pattern in any browser
Scroll bar element, and owing to the realization of JS is very simple, css pattern the most independently separates, user can according to the hobby of oneself from
Definition beautifies the css pattern of scroll bar element, can strengthen user's experience to function.
Accompanying drawing explanation
The present invention is further illustrated the most in conjunction with the embodiments.
Fig. 1 is the execution flow chart of the beautification method of lightweight scroll bar of the present invention.
Fig. 2 is the schematic diagram of the html Rotating fields that the embodiment of the present invention one is built when beautifying vertical scroll bar.
Fig. 3 is the schematic diagram that the embodiment of the present invention one generation beautifies scroll bar element.
Fig. 4 is that the embodiment of the present invention one is by rolling the schematic diagram changing position-marker element position.
Fig. 5 is that the embodiment of the present invention one changes the schematic diagram of position-marker element position by mouse drag.
Fig. 6 is the schematic diagram of the html Rotating fields that the embodiment of the present invention two is built when beautifying horizontal scroll bar.
Fig. 7 is the schematic diagram that the embodiment of the present invention two generation beautifies scroll bar element.
Fig. 8 is that the embodiment of the present invention two is by rolling the schematic diagram changing position-marker element position.
Fig. 9 is that the embodiment of the present invention two changes the schematic diagram of position-marker element position by mouse drag.
Detailed description of the invention
Specific embodiment one:
Refer to shown in Fig. 1 to Fig. 5, the beautification method of a kind of lightweight scroll bar (with vertical scroll bar is beautified for
Example), described method specifically includes following steps:
Step A1, write page layout CSS, build html Rotating fields, including content visual layers 1 and content information layer 2 (as
Shown in Fig. 2), and dynamically generation beautifies scroll bar element 4 in content visual layers 1；
In this step A1, described " writing page layout CSS " is particularly as follows: utilize CSS relative localization and absolute fix
Interdepend principle, writes the css pattern coding beautifying scroll bar element 4；And the div of generation scroll bar 3 is set
Overflow value is auto, produces with the situation according to content information layer 2 or do not produce scroll bar 3 in content visual layers 1, when
When content information layer 2 height H is less than or equal to content visual layers 1 height CH, does not the most produce scroll bar 3, otherwise, just produce scroll bar
3。
In this step A1, described " dynamically generate in content visual layers 1 and beautify scroll bar element 4 " is particularly as follows: utilize
JS obtains content visual layers 1 height CH and content information layer 2 height H, according to content visual layers 1 height CH and content information layer 2
The ratio of highly H, equal to the ratio of position mark block 31 length A on scroll bar 3 with scroll bar 3 length B, dynamically generates and beautifies rolling
Dynamic bar element 4 and position mark block element 41, will beautify scroll bar element 4 and position mark block element 41 covers in rolling
Position mark block 31 on dynamic bar 3 and the top of position mark block 31, and hiding scroll bar 3 and scroll bar 3.
Step A2, calculate roll height SH, and according to roll height SH Dynamic Announce or hide beautify scroll bar element
4；
As it is shown on figure 3, this step A2 is particularly as follows: utilize content information layer 2 height H to deduct content visual layers 1 height CH and obtain
To rolling height SH, the rolling obtained height SH and 0 value are compared, if the rolling height SH obtained is more than 0, the most dynamically
Generate or show that generated beautifies scroll bar element 4 and position mark block element 41；If the rolling obtained high SH degree
Less than or equal to 0, do not generate or hide generated beautify scroll bar element 4 and position mark block element 41.
The scrollTop value of the scroll bar 3 that step A3, monitoring are hidden, and beautify scroll bar according to scrollTop value change
The position of the position mark block element 41 on element 4；By monitoring the rolling event of the scroll bar 3 hidden, realize position
Labelled element 41 moves in time to corresponding position, thus realizes synchronizing the sight equation of smooth rolling, brings smooth rolling to user
Dynamic effect is experienced；
As shown in Figure 4, this step A3 is particularly as follows: bind rolling event first to content visual layers 1, and monitors the rolling hidden
The scrollTop value of bar 3；Then, first equal to position mark block with the ratio of content information layer 2 height H according to scrollTop value
Element 41, to beautifying the ratio of the distance value t of scroll bar element 4 initiating terminal and content visual layers 1 highly CH, calculates position mark
Element 41 is to the distance value t beautifying scroll bar element 4 initiating terminal；Afterwards according to distance value t position-marker element 41 moved to
Corresponding position.
Step A4, bind mousemove event to the position mark block element 41 that beautifies on scroll bar element 4, pass through Mus
Mark pulls position mark block element 41 and changes position, and changes the position of content information layer 2 according to distance t1 of mouse drag
And the scrollTop value of amendment content visual layers 1.In this step A4, bind mousemove to position mark block element 41
Event is that the content in content information layer 2 is dragged to the position needed by user rapidly, to reach the saving time for convenience
Purpose.
As it is shown in figure 5, in this step A4, described " change the position of content information layer 2 according to distance t1 of mouse drag
Put and revise the scrollTop value of content visual layers 1 " particularly as follows:
Utilize the height that distance t1 of mouse drag rolls equal to content information layer 2 with the ratio of content visual layers 1 height CH
The ratio of degree st and content information layer 2 height H, calculates the height st that content information layer 2 rolls, and according to the height st rolled
Change the position of content information layer 2；Meanwhile, distance t1 of mouse drag is utilized to be equal to the ratio of content visual layers 1 height CH
The scrollTop value of content visual layers 1 and the ratio of content visual layers 1 height CH, calculate content visual layers 1
ScrollTop value, and revise the scrollTop value of content visual layers 1.
Specific embodiment two:
Refer to shown in Fig. 1 and Fig. 6 to Fig. 9, the beautification method of a kind of lightweight scroll bar is (with the U.S. to horizontal scroll bar
Turn to example), described method specifically includes following steps:
Step S1, write page layout CSS, build html Rotating fields, including content visual layers 1 and content information layer 2 (as
Shown in Fig. 6), and dynamically generation beautifies scroll bar element 4 in content visual layers 1；
In this step S1, described " writing page layout CSS " is particularly as follows: utilize CSS relative localization and absolute fix
Interdepend principle, writes the css pattern coding beautifying scroll bar element 4；And the div of generation scroll bar 3 is set
Overflow value is auto, produces with the situation according to content information layer 2 or do not produce scroll bar 3 in content visual layers 1, when
When content information layer 2 width L is less than or equal to content visual layers 1 width C L, does not the most produce scroll bar 3, otherwise, just produce scroll bar
3。
In this step S1, described " dynamically generate in content visual layers 1 and beautify scroll bar element 4 " is particularly as follows: utilize
JS obtains content visual layers 1 width C L and content information layer 2 width L, according to content visual layers 1 width C L and content information layer 2
The ratio of width L, equal to the ratio of position mark block 31 length A1 on scroll bar 3 with scroll bar 3 length B1, dynamically generates and beautifies
Scroll bar element 4 and position mark block element 41, will beautify scroll bar element 4 and position mark block element 41 covers
Position mark block 31 on scroll bar 3 and the top of position mark block 31, and hiding scroll bar 3 and scroll bar 3.
Step S2, calculate roll length SL, and according to roll length SL Dynamic Announce or hide beautify scroll bar element
4；
This step S2 is particularly as follows: utilize content information layer 2 width L to deduct content visual layers 1 width C L and obtain as shown in Figure 7
Roll length SL, rolling length SL obtained and 0 value are compared, if rolling length SL obtained is more than 0, the most dynamically give birth to
Become or show that generated beautifies scroll bar element 4 and position mark block element 41；If rolling length SL obtained is little
In equal to 0, do not generate or hide generated beautify scroll bar element 4 and position mark block element 41.
The scrollLeft value of the scroll bar 3 that step S3, monitoring are hidden, and beautify rolling according to scrollLeft value change
The position of the position mark block element 41 on bar element 4；By monitoring the rolling event of the scroll bar 3 hidden, realize position
Tagging element 41 moves in time to corresponding position, thus realizes synchronizing the sight equation of smooth rolling, brings smooth to user
The effect rolled is experienced；
As shown in Figure 8, this step S3 is particularly as follows: bind rolling event first to content visual layers 1, and monitors the rolling hidden
The scrollLeft value of bar 3；Then, it is equal to position mark block according to the ratio of scrollLeft value with content information layer 2 width L
Element 41, to the ratio of the distance value p Yu content visual layers 1 width C L beautifying scroll bar element 4 initiating terminal, calculates position mark
Note element 4 is to the distance value p beautifying scroll bar element 4 initiating terminal；Afterwards according to distance value p position-marker element 41 moved to
Corresponding position.
Step S4, bind mousemove event to the position mark block element 41 that beautifies on scroll bar element 4, pass through Mus
Mark pulls position mark block element 41 and changes position, and changes the position of content information layer 2 according to distance p1 of mouse drag
And the scrollLeft value of amendment content visual layers 1；In this step S4, bind to position mark block element 41
Mousemove event is that the content in content information layer 2 is dragged to the position needed by user rapidly, to reach for convenience
Time-saving purpose.
As it is shown in figure 9, in this step S4, described " change the position of content information layer 2 according to distance p1 of mouse drag
Put and revise the scrollLeft value of content visual layers 1 " particularly as follows:
Utilize the length that distance p1 of mouse drag rolls equal to content information layer 2 with the ratio of content visual layers 1 width C L
The ratio of degree sp and content information layer 2 width L, calculates length sp that content information layer 2 rolls, and according to length sp rolled
Change the position of content information layer 2；Meanwhile, distance p1 of mouse drag is utilized to be equal to the ratio of content visual layers 1 width C L
The scrollLeft value of content visual layers 1 and the ratio of content visual layers 1 width C L, calculate content visual layers 1
ScrollLeft value, and revise the scrollLeft value of content visual layers 1.
In sum, present invention have the advantage that 1, in the rolling process of scroll bar, by monitoring the rolling hidden
The rolling event of bar, realizes position position-marker element moved in time to corresponding, thus realizes synchronizing smooth rolling
Sight equation, brings the effect of smooth rolling to experience to user；2, user can be allowed can to see unification in any browser
Pattern beautify scroll bar element, and owing to the realization of JS is very simple, css pattern the most independently separates, and user can be according to oneself
Hobby come the self-defined css pattern beautifying scroll bar element, user's experience to function can be strengthened.
Although the foregoing describing the detailed description of the invention of the present invention, but those familiar with the art should managing
Solving, our described specific embodiment is merely exemplary rather than for the restriction to the scope of the present invention, is familiar with this
The technical staff in field, in the equivalent modification made according to the spirit of the present invention and change, should be contained the present invention's
In scope of the claimed protection.
Claims (7)
1. the beautification method of a lightweight scroll bar, it is characterised in that: comprise the steps:
Step 1, write page layout CSS, build html Rotating fields, including content visual layers and content information layer, and in content
Dynamically generate in visual layers and beautify scroll bar element；
Step 2, calculate roll height/length, and according to roll height/length Dynamic Announce or hide beautify scroll bar unit
Element；
Step 3, monitor the scrollTop value/scrollLeft value of scroll bar hidden, and according to scrollTop value/
The change of scrollLeft value beautifies the position of the position mark block element on scroll bar element.
The beautification method of a kind of lightweight scroll bar the most according to claim 1, it is characterised in that: also include:
Step 4, give beautify on scroll bar element position mark block element binding mousemove event, by mouse drag position
Tagging block element change position, and according to the distance of mouse drag change content information layer position and amendment content can
ScrollTop value/scrollLeft value depending on layer.
The beautification method of a kind of lightweight scroll bar the most according to claim 2, it is characterised in that: in described step 4,
Described " according to the distance of mouse drag change content information layer position and amendment content visual layers scrollTop value/
ScrollLeft value " particularly as follows:
Utilize height/length that the distance of mouse drag rolls equal to content information layer with the ratio of content visual layers height/width
Degree and the ratio of content information layer height/width, calculate the height/length that content information layer rolls, and according to the height rolled
Degree/length changes the position of content information layer；Meanwhile, distance and the ratio of content visual layers height/width of mouse drag are utilized
Value scrollTop value/scrollLeft value equal to content visual layers and the ratio of content visual layers height/width, calculate
ScrollTop value/scrollLeft the value of content visual layers, and revise the scrollTop value/scrollLeft of content visual layers
Value.
The beautification method of a kind of lightweight scroll bar the most according to claim 1, it is characterised in that: in step 1, described
" write page layout CSS " particularly as follows:
Utilize the principle that interdepends of CSS relative localization and absolute fix, write the css pattern coding beautifying scroll bar element；
And the overflow value arranging the div producing scroll bar is auto, with the situation according to content information layer in content visual layers
Produce or do not produce scroll bar.
The beautification method of a kind of lightweight scroll bar the most according to claim 4, it is characterised in that: in step 1, described
" in content visual layers dynamically generate beautify scroll bar element " particularly as follows:
JS is utilized to obtain content visual layers height/width and content information layer height/width, according to content visual layers height/wide
Degree is equal to position mark block length and the ratio of scroll bar length on scroll bar with the ratio of content information layer height/width, moves
State generates beautifies scroll bar element and position mark block element, and the position mark block on hiding scroll bar and scroll bar.
The beautification method of a kind of lightweight scroll bar the most according to claim 5, it is characterised in that: described step 2 is concrete
For:
Utilize content information layer height/width to deduct content visual layers height/width to obtain rolling height/length, by obtain
Roll height/length to compare with 0 value, if the rolling height/length obtained is more than 0, then dynamically generates or show
Scroll bar element and position mark block element is beautified through generate；If the rolling height/length obtained is less than or equal to 0, the most not
Generate or hide generated beautify scroll bar element and position mark block element.
The beautification method of a kind of lightweight scroll bar the most according to claim 5, it is characterised in that: described step 3 is concrete
For:
Bind rolling event first to content visual layers, and monitor the scrollTop value/scrollLeft value of the scroll bar hidden；
Then, first equal to position mark block with the ratio of content information layer height/width according to scrollTop value/scrollLeft value
Element, to the ratio of the distance value Yu content visual layers height/width beautifying scroll bar element initiating terminal, calculates position mark unit
Element is to the distance value beautifying scroll bar element initiating terminal；According to distance value, position-marker element is moved to corresponding position afterwards
Put.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610658992.6A CN106293409B (en) | 2016-08-12 | 2016-08-12 | A kind of beautification method of lightweight scroll bar |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610658992.6A CN106293409B (en) | 2016-08-12 | 2016-08-12 | A kind of beautification method of lightweight scroll bar |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106293409A true CN106293409A (en) | 2017-01-04 |
| CN106293409B CN106293409B (en) | 2019-07-05 |
Family
ID=57670127
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610658992.6A Active CN106293409B (en) | 2016-08-12 | 2016-08-12 | A kind of beautification method of lightweight scroll bar |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106293409B (en) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108595096A (en) * | 2018-04-20 | 2018-09-28 | 武汉楚鼎信息技术有限公司 | A kind of method and system device that web page contents inversely render |
| CN109213481A (en) * | 2017-06-30 | 2019-01-15 | 武汉斗鱼网络科技有限公司 | A kind of slider control implementation method and device |
| CN109814790A (en) * | 2019-01-31 | 2019-05-28 | 成都摹客科技有限公司 | A kind of method of the page scroll interaction of prototype tool |
| CN110851058A (en) * | 2019-11-11 | 2020-02-28 | 支付宝(杭州)信息技术有限公司 | Page virtual scrolling method, device and equipment |
| CN111382388A (en) * | 2020-03-19 | 2020-07-07 | 中国银行股份有限公司 | Method and system for bottom element bottom suction control by utilizing CSS (cascading style sheets) |
| CN111596853A (en) * | 2020-04-29 | 2020-08-28 | 五八有限公司 | Method and device for realizing rolling indicator, electronic equipment and storage medium |
| CN112698903A (en) * | 2020-12-31 | 2021-04-23 | 浪潮云信息技术股份公司 | NG-ZORRO-based table scroll bar position control method and system |
| CN112988026A (en) * | 2021-03-03 | 2021-06-18 | 京东数字科技控股股份有限公司 | Scroll bar display method and device and electronic equipment |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130167071A1 (en) * | 2011-12-21 | 2013-06-27 | International Business Machines Corporation | Information processing apparatus, display processing method, program, and recording medium |
| CN103268189A (en) * | 2013-05-30 | 2013-08-28 | 广东欧珀移动通信有限公司 | Method and system for realizing scroll bar on user interface of player |
| CN103917946A (en) * | 2012-10-10 | 2014-07-09 | Sk普兰尼特有限公司 | Method and system for displaying fast-scrolling content and scroll bar |
| CN104267961A (en) * | 2014-09-30 | 2015-01-07 | 腾讯科技（深圳）有限公司 | Scroll bar generation method and device |
| CN104572057A (en) * | 2013-10-25 | 2015-04-29 | 腾讯科技（深圳）有限公司 | Scroll bar control method and device |
-
2016
- 2016-08-12 CN CN201610658992.6A patent/CN106293409B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130167071A1 (en) * | 2011-12-21 | 2013-06-27 | International Business Machines Corporation | Information processing apparatus, display processing method, program, and recording medium |
| CN103917946A (en) * | 2012-10-10 | 2014-07-09 | Sk普兰尼特有限公司 | Method and system for displaying fast-scrolling content and scroll bar |
| CN103268189A (en) * | 2013-05-30 | 2013-08-28 | 广东欧珀移动通信有限公司 | Method and system for realizing scroll bar on user interface of player |
| CN104572057A (en) * | 2013-10-25 | 2015-04-29 | 腾讯科技（深圳）有限公司 | Scroll bar control method and device |
| CN104267961A (en) * | 2014-09-30 | 2015-01-07 | 腾讯科技（深圳）有限公司 | Scroll bar generation method and device |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109213481A (en) * | 2017-06-30 | 2019-01-15 | 武汉斗鱼网络科技有限公司 | A kind of slider control implementation method and device |
| CN108595096A (en) * | 2018-04-20 | 2018-09-28 | 武汉楚鼎信息技术有限公司 | A kind of method and system device that web page contents inversely render |
| CN109814790A (en) * | 2019-01-31 | 2019-05-28 | 成都摹客科技有限公司 | A kind of method of the page scroll interaction of prototype tool |
| CN109814790B (en) * | 2019-01-31 | 2021-04-13 | 成都摹客科技有限公司 | Page rolling interaction method of prototype design tool |
| CN110851058A (en) * | 2019-11-11 | 2020-02-28 | 支付宝(杭州)信息技术有限公司 | Page virtual scrolling method, device and equipment |
| CN110851058B (en) * | 2019-11-11 | 2021-03-30 | 支付宝(杭州)信息技术有限公司 | Page virtual scrolling method, device and equipment |
| CN111382388A (en) * | 2020-03-19 | 2020-07-07 | 中国银行股份有限公司 | Method and system for bottom element bottom suction control by utilizing CSS (cascading style sheets) |
| CN111382388B (en) * | 2020-03-19 | 2023-10-24 | 中国银行股份有限公司 | Method and system for bottom element bottom suction control by using CSS |
| CN111596853A (en) * | 2020-04-29 | 2020-08-28 | 五八有限公司 | Method and device for realizing rolling indicator, electronic equipment and storage medium |
| CN112698903A (en) * | 2020-12-31 | 2021-04-23 | 浪潮云信息技术股份公司 | NG-ZORRO-based table scroll bar position control method and system |
| CN112988026A (en) * | 2021-03-03 | 2021-06-18 | 京东数字科技控股股份有限公司 | Scroll bar display method and device and electronic equipment |
| CN112988026B (en) * | 2021-03-03 | 2024-05-28 | 京东科技控股股份有限公司 | Scroll bar display method and device and electronic equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106293409B (en) | 2019-07-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106293409A (en) | A kind of beautification method of lightweight scroll bar | |
| CN105653644B (en) | A kind of page constructor and page building method | |
| CN102937848B (en) | Method for editing handwritings and electronic equipment | |
| Knight et al. | Making grammars: from computing with shapes to computing with things | |
| CN103034708B (en) | Browser spreadsheet integration | |
| CN103620526B (en) | The gesture control type technology of radius of interaction is extended in computer vision application | |
| Horak et al. | Vistribute: Distributing interactive visualizations in dynamic multi-device setups | |
| CN108665520A (en) | A kind of method and device that page animation renders | |
| CN103699312B (en) | Multi-application foreground running implementation method and device and electronic device | |
| CN101763234B (en) | Method and device for simulating various screen resolutions | |
| JP2013519952A5 (en) | ||
| CN107608596A (en) | A kind of method, terminal and the storage medium of e-book page turning | |
| CN108989870A (en) | Control the method and system in barrage region | |
| CN110009715A (en) | The system that the parameter of the scalable cartoon role of customization on WEB generates | |
| CN103677491B (en) | A kind of method and apparatus for rendering webpage | |
| CN105550021A (en) | Cross-browser dynamic presentation method and cross-browser dynamic presentation apparatus | |
| WO2018001115A1 (en) | Controlling method and device for slider control and slider selector | |
| CN107491297A (en) | Drop-down refreshes the implementation method and device at APP interfaces | |
| CN106484384A (en) | A kind of page animation methods of exhibiting and system | |
| CN105468227B (en) | Information displaying method and device in a kind of webpage | |
| CN107704244A (en) | A kind of method realized bookstrap table grid columns and pulled | |
| CN108228998A (en) | Computer based on WEB acts improperly design system | |
| CN103268189A (en) | Method and system for realizing scroll bar on user interface of player | |
| CN106201314B (en) | A kind of display methods and display device for realizing handwriting input on touch screen | |
| CN103345565B (en) | Instrument panel construction method for data display based on Flash technology |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |