滚动条的实现方法、装置、电子设备及存储介质

技术领域

本申请涉及计算机技术领域，具体而言，本申请涉及一种滚动条的实现方法、装置、电子设备、计算机可读存储介质。

背景技术

滚动条，是在无法显示整个界面，而出现程序一侧的可以滚动并用于显示剩余界面的条形控件。

目前浏览器自带的滚动条样式比较单一，而且各个浏览器的样式都不一样，给用户界面(User Interface)和前端工程师带来了较大的困难。

并且，传统的CSS无法定义浏览器的样式，在CSS3中，谷歌浏览器带有-webkit前缀的私有样式可以定义浏览器滚动条，但是无法在Firefox、IE、Safari、Opera中使用，兼容性比较差。

发明内容

本申请实施例提供了一种滚动条的实现方法、装置、电子设备、计算机可读存储介质，可以解决现有技术的上述问题。所述技术方案如下：

根据本申请实施例的一个方面，提供了一种种滚动条的实现方法，该方法包括：

将页面中的内容对象封装到第一子元素，为所述第一子元素创建父元素，在所述父元素中创建第二子元素，所述第二子元素包括滚动条的样式信息；

根据所述第一子元素与所述父元素的高度比，确定所述第二子元素的高度，根据所述第二子元素的高度在所述页面展示滚动条；

响应于对所述滚动条的滚动操作，在所述页面上平滑滚动所述滚动条。

作为一种可选的实施方式，在所述页面上平滑滚动所述滚动条，之后还包括：

响应于停止对所述滚动条的滚动操作，以所述滚动条在平滑滚动结束时的瞬时速度为起始速度，做减速运动至停止。

作为一种可选的实施方式，以所述滚动条在平滑滚动时的瞬时速度为起始速度，做减速运动至停止，包括：

若所述滚动条在触底时的瞬时速度不小于预设值，则控制滚动条以回弹速度继续做减速运动至停止；

其中，所述回弹速度与所述滚动条在触底时的瞬时速度大小相同，方向相反。

作为一种可选的实施方式，控制滚动条以回弹速度继续做减速运动，之前还包括：

对所述滚动条的形状进行压缩处理，并在压缩处理后逐渐恢复为原形状；

所述压缩处理包括将所述滚动条的形状在滑动方向上压缩预设比例，在垂直于滑动方向的方向上增大预设比例。

作为一种可选的实施方式，响应于对所述滚动条的滚动操作，在所述页面上平滑滚动所述滚动条，包括：

使用绝对定位的方式，根据第一子元素的顶点位置，按照高度比，计算第二子元素到顶部的距离；

根据所述距离与所述第一子元素的顶点位置间的线性相关性，确定功滚动操作时所述滚动条的平均速度，以所述平均速度在所述页面上平滑滚动所述滚动条。

作为一种可选的实施方式，以所述滚动条在平滑滚动时的瞬时速度为起始速度，做减速运动至停止，包括：

确定减速运动的时长和递归次数；

根据所述起始速度、时长以及递归次数，确定每次递归开始和结束时的速度；

根据每次递归开始和结束时的速度，控制所述滚动条做减速运动至停止。

根据本申请实施例的另一个方面，提供了一种滚动条的实现装置，该装置包括：

封装模块，用于将页面中的内容对象封装到第一子元素，为所述第一子元素创建父元素，在所述父元素中创建第二子元素，所述第二子元素包括滚动条的样式信息；

高度确定模块，用于根据所述第一子元素与所述父元素的高度比，确定所述第二子元素的高度，根据所述第二子元素的高度在所述页面展示滚动条；

滚动响应模块，用于响应于对所述滚动条的滚动操作，在所述页面上平滑滚动所述滚动条。

根据本申请实施例的另一个方面，提供了一种电子设备，该电子设备包括：存储器、处理器及存储在存储器上的计算机程序，处理器执行所述计算机程序以实现上述的滚动条的实现方法的步骤。

根据本申请实施例的再一个方面，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述的滚动条的实现方法的步骤。

本申请实施例提供的技术方案带来的有益效果是：

通过将页面中的内容对象封装到第一子元素，为第一子元素创建父元素，并在父元素中创建第二子元素，对于页面的来源不设限制，兼容性更好，可适用于各种页面场景，第二子元素包括滚动条的样式信息，不仅可实现自定义样式编辑滚动条样式，第二子元素中的样式信息还可以是预先配置的，从而针对不同的页面展示统一的样式信息，进一步根据第一子元素和父元素的高度比，可以确定第二子元素的高度，在确定第二子元素的高度以及滚动条样式后，即可在页面中展示滚动条，响应于对滚动条的滚动操作，在页面上平滑滚动滚动条。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。

图1为本申请实施例提供的滚动条的实现方法的流程示意图；

图2为本申请实施例提供的滚动条实现方法应用于电脑的示意图；

图3为本申请实施例提供的滚动条实现方法应用于移动终端的示意图；

图4为本申请实施例提供的一种控制滚动条的滚动全过程的示意图；

图5为本申请实施例提供的一种滚动条的实现装置的结构示意图；

图6为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

下面结合本申请中的附图描述本申请的实施例。应理解，下面结合附图所阐述的实施方式，是用于解释本申请实施例的技术方案的示例性描述，对本申请实施例的技术方案不构成限制。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”和“该”也可包括复数形式。应该进一步理解的是，本申请实施例所使用的术语“包括”以及“包含”是指相应特征可以实现为所呈现的特征、信息、数据、步骤、操作、元件和/或组件，但不排除实现为本技术领域所支持其他特征、信息、数据、步骤、操作、元件、组件和/或它们的组合等。应该理解，当我们称一个元件被“连接”或“耦接”到另一元件时，该一个元件可以直接连接或耦接到另一元件，也可以指该一个元件和另一元件通过中间元件建立连接关系。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的术语“和/或”指示该术语所限定的项目中的至少一个，例如“A和/或B”可以实现为“A”，或者实现为“B”，或者实现为“A和B”。

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

本申请提供的滚动条的实现方法、装置、电子设备、计算机可读存储介质以及计算机程序产品，旨在解决现有技术的如上技术问题。

下面通过对几个示例性实施方式的描述，对本申请实施例的技术方案以及本申请的技术方案产生的技术效果进行说明。需要指出的是，下述实施方式之间可以相互参考、借鉴或结合，对于不同实施方式中相同的术语、相似的特征以及相似的实施步骤等，不再重复描述。

本申请实施例中提供了一种滚动条的实现方法，如图1所示，该方法包括：

S101、将页面中的内容对象封装到第一子元素，为所述第一子元素创建父元素，在所述父元素中创建第二子元素，所述第二子元素包括滚动条的样式信息。

本申请实施例可适用于各种具有视觉展示目的的页面，该页面可以是web客户端展示的页面，也可以是移动终端、电脑、平板电脑显示的页面。本申请将页面中的所有内容对象，都封装在第一子元素container中，并且为container创建父元素wrapper，给wrapper新建第二子元素rightScroll。

本申请在新建rightScroll时，可以在rightScroll中配置滚动条的样式信息，例如颜色、宽度、纹理图案等等，本申请实施例不作具体的限定。

在一个实施例中，本申请封装第一子元素的相关代码可以包括：

上述代码中，页面中的内容对象数量为100。

在一个实施例中，设置第一子元素的高度的css代码可以包括：

S102、根据第一子元素与父元素的高度比，确定第二子元素的高度，根据所述第二子元素的高度在所述页面展示滚动条。

本申请实施例在封装第一子元素以及创建父元素时，设置了第一子元素和父元素的高度，本申请实施例基于第一子元素和父元素的高度比可以确定第一子元素的高度。

在一个实施例中，若第一子元素和父元素的高度比为2，说明页面在展示内容对象时，只能展示所有内容对象的一半区域，因此第二子元素的高度为页面高度的一半，即，页面上展示的滚动条的高度为页面高度的一半。在确定了滚动条的高度和样式后，可将滚动条在页面上进行展示。

S103、响应于对所述滚动条的滚动操作，在所述页面上平滑滚动所述滚动条。

在页面上展示滚动条后，用户可以对滚动条进行滚动操作，响应于滚动操作将滚动条移动的距离，在页面上平滑滚动滚动条。本申请实施例可以控制滚动条作匀速运动。

在一个实施例中，本申请控制滚动条做匀速运动的代码可以包括：

本申请实施例的滚动条的实现方法，通过将页面中的内容对象封装到第一子元素，为第一子元素创建父元素，并在父元素中创建第二子元素，对于页面的来源不设限制，兼容性更好，可适用于各种页面场景，第二子元素包括滚动条的样式信息，不仅可实现自定义样式编辑滚动条样式，第二子元素中的样式信息还可以是预先配置的，从而针对不同的页面展示统一的样式信息，进一步根据第一子元素和父元素的高度比，可以确定第二子元素的高度，在确定第二子元素的高度以及滚动条样式后，即可在页面中展示滚动条，响应于对滚动条的滚动操作，在页面上平滑滚动所述滚动条。

请参见图2，其示例性地示出了本申请的滚动条实现方法应用于电脑的示意图，从图中可以看出，本方案并非应用于浏览器中，而是应用于文档浏览场景，该文档具体为一个列表，文档的右侧有一滚动条201，用户将鼠标的光标202移动至滚动条201上，通过对鼠标进行预设操作，例如长按左键向下移动，使得滚动条201随光标202同步向下滚动。

请参见图3，其示例性地示出了本申请的滚动条实现方法应用于移动终端的示意图，可以理解的是，移动终端相比于电脑，存在一个明显差异就是没有光标，当用户的手指(也可以是触控笔)302接触滚动条301并移动时，滚动条也会随之滚动。

在上述各实施例的基础上，作为一种可选实施例，在所述页面上平滑滚动所述滚动条，之后还包括：

响应于停止对所述滚动条的滚动操作，以所述滚动条在平滑滚动结束时的瞬时速度为起始速度，做减速运动至停止。

本申请实施例支持在停止对滚动条的滚动操作后，继续维持滚动条保持一段时间的滑动效果，使得页面的滚动效果更佳，更贴近真实的物理世界，动画效果更好。

在一个实施例中，本申请实施例在控制滚动条做减速运动时，可以为匀减速运动，也可以为非匀减速运动。

在上述各实施例的基础上，作为一种可选实施例，以所述滚动条在平滑滚动时的瞬时速度为起始速度，做减速运动至停止，包括：

若所述滚动条在触底时的瞬时速度不小于预设值，则控制滚动条以回弹速度继续做减速运动至停止；

其中，所述回弹速度与所述滚动条在触底时的瞬时速度大小相同，方向相反。

本申请实施例在控制滚动条做减速运动时，还进一步增加了惯性回弹效果，也即当滚动条触底后，并不会立即停止运动，而是以触底时的瞬时速度反向回弹，从而更贴近真实的物理世界。

在上述各实施例的基础上，作为一种可选实施例，控制滚动条以回弹速度继续做减速运动，之前还包括：

对所述滚动条的形状进行压缩处理，并在压缩处理后逐渐恢复为原形状；

所述压缩处理包括将所述滚动条的形状在滑动方向上压缩预设比例，在垂直于滑动方向的方向上增大预设比例。

本申请在控制滚动条回弹时，为了更贴近真实的物理世界，还对滚动条进行了压缩反弹处理，以滚动方向为竖直方向为例，当滚动条触底时，对滚动条在竖直方向上逐渐压缩，同时在水平方向上进行逐渐增大，变化到预设程度时，再进行复原。在一个实施例中，本申请实施例可以设置压缩和增大的比例均为5％，设置压缩和增大对应的时长均为1s，也即当滚动条触底后，滚动条在1秒内同时进行竖直方向压缩5％，水平方向增大5％，之后再耗时1秒控制滚动条同时进行竖直方向扩展至原尺寸，水平方向压缩至原尺寸。

请参见图4，其示例性地示出了本申请实施例控制滚动条的滚动全过程的示意图，如图所示，

当用户触发滚动条滚动时，滚动条从静止状态做匀速运动或者匀加速运动；

当用户停止触发滚动操作时，滑块基于滚动条在平滑滚动结束时的瞬时速度为起始速度，做减速运动；

在减速运动的过程中，判断滚动条是否触底(顶)；

若未触底，则继续减速至停止；

若触底，则以回弹速度继续做减速运动至停止。

在上述各实施例的基础上，作为一种可选实施例，响应于对所述滚动条的滚动操作，在所述页面上平滑滚动所述滚动条，包括：

使用绝对定位的方式，根据第一子元素的顶点位置，按照高度比，计算第二子元素到顶部的距离；

根据所述距离与所述第一子元素的顶点位置间的线性相关性，确定功滚动操作时所述滚动条的平均速度，以所述平均速度在所述页面上平滑滚动所述滚动条。

具体的，本申请实施例在页面上平滑滚动滚动条的代码可以包括：

在上述各实施例的基础上，作为一种可选实施例，以所述滚动条在平滑滚动时的瞬时速度为起始速度，做减速运动至停止，包括：

确定减速运动的时长和递归次数；

根据所述起始速度、时长以及递归次数，确定每次递归开始和结束时的速度；

根据每次递归开始和结束时的速度，控制所述滚动条做减速运动至停止。

本申请实施例在控制滚动条做减速运动时，将减速过程划分为了多个连续的减速阶段，每个减速阶段对应一次递归，具体地，根据预设的减速运动的时长和递归次数，可以确定每一次递归过程需要减小的速度，也就获得了每次递归开始和结束时的速度，根据每次递归开始和结束时的速度，控制所述滚动条做减速运动至停止。

具体的，本申请实施例的滚动条做减速运动的代码可以包括：

在一个实施例中，本申请实施例控制滚动条回弹的代码包括：

本申请实施例提供了一种滚动条的实现装置，如图5所示，该滚动条的实现装置可以包括：封装模块501、高度确定模块502以及滚动响应模块503，其中，

封装模块501，用于将页面中的内容对象封装到第一子元素，为所述第一子元素创建父元素，在所述父元素中创建第二子元素，所述第二子元素包括滚动条的样式信息；

高度确定模块502，用于根据所述第一子元素与所述父元素的高度比，确定所述第二子元素的高度，根据所述第二子元素的高度在所述页面展示滚动条；

滚动响应模块503，用于响应于对所述滚动条的滚动操作，在所述页面上平滑滚动所述滚动条。

本申请实施例的装置可执行本申请实施例所提供的方法，其实现原理相类似，本申请各实施例的装置中的各模块所执行的动作是与本申请各实施例的方法中的步骤相对应的，对于装置的各模块的详细功能描述具体可以参见前文中所示的对应方法中的描述，此处不再赘述。

本申请实施例中提供了一种电子设备，包括存储器、处理器及存储在存储器上的计算机程序，该处理器执行上述计算机程序以实现滚动条的实现方法的步骤，与相关技术相比可实现：通过将页面中的内容对象封装到第一子元素，为第一子元素创建父元素，并在父元素中创建第二子元素，对于页面的来源不设限制，兼容性更好，可适用于各种页面场景，第二子元素包括滚动条的样式信息，不仅可实现自定义样式编辑滚动条样式，第二子元素中的样式信息还可以是预先配置的，从而针对不同的页面展示统一的样式信息，进一步根据第一子元素和父元素的高度比，可以确定第二子元素的高度，在确定第二子元素的高度以及滚动条样式后，即可在页面中展示滚动条，响应于对滚动条的滚动操作，在页面上平滑滚动所述滚动条。

在一个可选实施例中提供了一种电子设备，如图6所示，图6所示的电子设备4000包括：处理器4001和存储器4003。其中，处理器4001和存储器4003相连，如通过总线4002相连。可选地，电子设备4000还可以包括收发器4004，收发器4004可以用于该电子设备与其他电子设备之间的数据交互，如数据的发送和/或数据的接收等。需要说明的是，实际应用中收发器4004不限于一个，该电子设备4000的结构并不构成对本申请实施例的限定。

处理器4001可以是CPU(Central Processing Unit，中央处理器)，通用处理器，DSP(Digital Signal Processor，数据信号处理器)，ASIC(Application SpecificIntegrated Circuit，专用集成电路)，FPGA(Field Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器4001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线4002可包括一通路，在上述组件之间传送信息。总线4002可以是PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA(ExtendedIndustry Standard Architecture，扩展工业标准结构)总线等。总线4002可以分为地址总线、数据总线、控制总线等。为便于表示，图6中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器4003可以是ROM(Read Only Memory，只读存储器)或可存储静态信息和指令的其他类型的静态存储设备，RAM(Random Access Memory，随机存取存储器)或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器)、CD-ROM(Compact DiscRead Only Memory，只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质、其他磁存储设备、或者能够用于携带或存储计算机程序并能够由计算机读取的任何其他介质，在此不做限定。

存储器4003用于存储执行本申请实施例的计算机程序，并由处理器4001来控制执行。处理器4001用于执行存储器4003中存储的计算机程序，以实现前述方法实施例所示的步骤。

本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时可实现前述方法实施例的步骤及相应内容。

本申请实施例还提供了一种计算机程序产品，包括计算机程序，计算机程序被处理器执行时可实现前述方法实施例的步骤及相应内容。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”、“1”、“2”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除图示或文字描述以外的顺序实施。

应该理解的是，虽然本申请实施例的流程图中通过箭头指示各个操作步骤，但是这些步骤的实施顺序并不受限于箭头所指示的顺序。除非本文中有明确的说明，否则在本申请实施例的一些实施场景中，各流程图中的实施步骤可以按照需求以其他的顺序执行。此外，各流程图中的部分或全部步骤基于实际的实施场景，可以包括多个子步骤或者多个阶段。这些子步骤或者阶段中的部分或全部可以在同一时刻被执行，这些子步骤或者阶段中的每个子步骤或者阶段也可以分别在不同的时刻被执行。在执行时刻不同的场景下，这些子步骤或者阶段的执行顺序可以根据需求灵活配置，本申请实施例对此不限制。

以上所述仅是本申请部分实施场景的可选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请的方案技术构思的前提下，采用基于本申请技术思想的其他类似实施手段，同样属于本申请实施例的保护范畴。