Dynamic adjustment method and device for page information window, electronic equipment and storage medium

Abstract

The invention discloses a page information window dynamic adjustment method and device, electronic equipment and a storage medium, and the method comprises the steps: fixing an information window at a preset position at the front end of a target page through a CSS positioning technology, and monitoring the rolling state of the target page; when it is monitored that the target page rolls upwards, a rolling distance is obtained, and the size of the information window is adjusted according to the rolling distance; and when it is monitored that the target page stops rolling or rolls downwards, adjusting the size of the information window to an initial state. When the page rolls, the size of the information window is dynamically adjusted, the visibility of the information window is kept, meanwhile, the space utilization rate of the page and the content display efficiency of the page and the information window are improved, and therefore the page browsing experience of a user is improved, and the method can be widely applied to the technical field of UI design.

Description

Technical Field

[0001] The present invention relates to the field of UI design technology, and in particular to a method, device, electronic device and storage medium for dynamically adjusting a page information window. Background Art

[0002] CSS (Cascading Style Sheets) is a computer language used to express the style of files such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language). CSS can control the appearance of web pages, including layout, color, fonts, and animation. CSS can accurately control the layout of element positions in web pages at the pixel level, supports almost all font sizes, and has the ability to edit web page objects and model styles. CSS has a wide range of functions, and key points include selectors, box models, positioning, layout, responsive design, animations and transitions, visual formatting models, cascading, etc.

[0003] Most web pages, mobile terminals, applets, H5, etc. have high requirements for UI visual effects, and the requirements for adaptability, flexibility, and aesthetics are constantly increasing. As an indispensable part of front-end development, CSS not only affects the appearance of web pages, but also affects the structure and performance of web pages. With the development of Web technology, CSS is also constantly evolving, introducing more advanced features and modules to meet more complex design needs.

[0004] In the prior art, when a user browses a page and performs interactive operations, an information window usually pops up in the middle of the page to display the operation results. The user is required to click confirm or close the information window in the information window to continue browsing the page content or perform other interactive operations, which affects the user's browsing experience. If the information window is fixed at the front end of the page, when the user only browses the page and does not perform other interactive operations, the information window does not need to display the operation results, but it will still occupy the page space for a long time, which also affects the user's browsing experience.

[0005] Terminology explanation:

[0006] CSS (Cascading Style Sheets): is a style language used to describe the presentation of HTML or XML documents. CSS can be stored in a separate .css file or written directly in the HTML document. <style>标签内，或者作为HTML元素的行内样式。

[0007] JavaScript(JS)：是一种高级的、解释型的编程语言。它是一种基于原型、多范式的、动态的、弱类型的语言，广泛应用于网页开发中，用于增强网页的交互性、动态性，实现客户端的页面行为。

[0008] 选择器：用于选择需要添加样式的HTML元素。例如，p选择所有标签，.className选择所有带有class＝"className"属性的元素。

[0009] 属性：定义了如何显示所选的元素。例如，color属性定义文本颜色，background-color定义背景颜色。

[0010] 盒模型：CSS中的每个元素都被一个盒子包围，这个盒子由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。

[0011] 定位：CSS提供了多种定位机制，包括静态定位、相对定位、绝对定位和固定定位。

[0012] 布局：CSS布局可以通过多种方式实现，包括传统的HTML表格布局、浮动(floats)、Flexbox和Grid系统。

[0013] 响应式设计：通过媒体查询(Media Queries)，CSS可以根据不同设备的特性(如屏幕大小)应用不同的样式，从而实现响应式设计。

[0014] getBoundingClientRect():是一个非常实用的前端API，它提供了获取元素尺寸和位置信息的功能。了解它的工作原理和使用方法，可以帮助你在前端开发中更准确地定位和布局元素，从而实现更好的用户体验。同时，也要注意其局限性，特别是在处理滚动和异步更新时，需要格外小心。发明内容

[0015] 本发明的目的在于至少一定程度上解决现有技术中存在的技术问题之一。

[0016] 为此，本发明实施例的一个目的在于提供一种页面信息窗口动态调整方法，该方法在页面滚动时动态调整信息窗口的大小，保持信息窗口可见性的同时，提高了页面的空间利用率以及页面和信息窗口的内容展示效率，从而提高了用户的页面浏览体验。

[0017] 本发明实施例的另一个目的在于提供一种页面信息窗口动态调整装置。

[0018] 为了达到上述技术目的，本发明实施例所采取的技术方案包括：

[0019] 一方面，本发明实施例提供了一种页面信息窗口动态调整方法，包括以下步骤：

[0020] 通过CSS定位技术将信息窗口固定在目标页面的前端的预设位置，并监测所述目标页面的滚动状态；

[0021] 当监测到所述目标页面向上滚动，获取滚动距离，并根据所述滚动距离调整所述信息窗口的大小；

[0022] 当监测到所述目标页面停止滚动或向下滚动，调整所述信息窗口的大小至初始状态。

[0023] 进一步地，在本发明的一个实施例中，所述通过CSS定位技术将信息窗口固定在目标页面的前端的预设位置，其具体包括：

[0024] 确定所述信息窗口对应的HTML元素，并确定所述目标页面对应的视口；

[0025] 通过CSS的position:fixed属性将所述HTML元素固定在所述视口的所述预设位置，并设定所述HTML元素的盒模型宽度值保持不变。

[0026] 进一步地，在本发明的一个实施例中，所述监测所述目标页面的滚动状态，其具体包括：

[0027] 通过JavaScript的window.onscroll事件监听器捕捉用户的滚动操作；

[0028] 通过变量scrollDistance记录所述目标页面的所述滚动距离。

[0029] 进一步地，在本发明的一个实施例中，所述根据所述滚动距离调整所述信息窗口的大小，其具体包括：

[0030] 当当前滚动距离小于预设的第一阈值，保持所述HTML元素的盒模型属性不变；

[0031] 当当前滚动距离大于等于所述第一阈值，逐渐减小所述HTML元素的盒模型高度值，并根据实时的盒模型高度值实时设定所述HTML元素的上外边距、上边框、上内边距、内容高度、下内边距、下边框以及下外边距；

[0032] 当所述HTML元素的盒模型高度值减小至预设的最小高度值，保持所述HTML元素的盒模型属性不变。

[0033] 进一步地，在本发明的一个实施例中，所述调整所述信息窗口的大小至初始状态，其具体包括：

[0034] 获取所述HTML元素的盒模型高度初始值；

[0035] 逐渐增大所述HTML元素的盒模型高度值，并根据实时的盒模型高度值实时设定所述HTML元素的上外边距、上边框、上内边距、内容高度、下内边距、下边框以及下外边距；

[0036] 当所述HTML元素的盒模型高度值增大至所述盒模型高度初始值，保持所述HTML元素的盒模型属性不变。

[0037] 进一步地，在本发明的一个实施例中，所述页面信息窗口动态调整方法还包括以下步骤：

[0038] 响应于用户在所述目标页面的页面交互操作，通过所述信息窗口展示对应的操作结果信息。

[0039] 进一步地，在本发明的一个实施例中，所述通过所述信息窗口展示对应的操作结果信息，其具体包括：

[0040] 获取所述信息窗口的当前内容宽度和当前内容高度；

[0041] 根据所述当前内容宽度和所述当前内容高度对确定所述操作结果信息的目标文本尺寸；

[0042] 根据所述目标文本尺寸对所述操作结果信息进行渲染，并通过所述信息窗口进行展示。

[0043] 另一方面，本发明实施例提供了一种页面信息窗口动态调整装置，包括：

[0044] 信息窗口固定模块，用于通过CSS定位技术将信息窗口固定在目标页面的前端的预设位置，并监测所述目标页面的滚动状态；

[0045] 第一调整模块，用于当监测到所述目标页面向上滚动，获取滚动距离，并根据所述滚动距离调整所述信息窗口的大小；

[0046] 第二调整模块，用于当监测到所述目标页面停止滚动或向下滚动，调整所述信息窗口的大小至初始状态。

[0047] 另一方面，本发明实施例提供了一种电子设备，所述电子设备包括存储器、处理器、存储在所述存储器上并可在所述处理器上运行的程序以及用于实现所述处理器和所述存储器之间的连接通信的数据总线，所述程序被所述处理器执行时实现如前面所述的页面信息窗口动态调整方法。

[0048] 另一方面，本发明实施例还提供了一种存储介质，所述存储介质为计算机可读存储介质，用于计算机可读存储，所述存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如前面所述的页面信息窗口动态调整方法。

[0049] 本发明的优点和有益效果将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到：

[0050] 本发明实施例通过CSS定位技术将信息窗口固定在目标页面的前端的预设位置，并监测目标页面的滚动状态，当监测到目标页面向上滚动，获取滚动距离，并根据滚动距离调整信息窗口的大小，当监测到目标页面停止滚动或向下滚动，调整信息窗口的大小至初始状态。本发明实施例在页面滚动时动态调整信息窗口的大小，保持信息窗口可见性的同时，提高了页面的空间利用率以及页面和信息窗口的内容展示效率，从而提高了用户的页面浏览体验。附图说明

[0051] 为了更清楚地说明本发明实施例中的技术方案，下面对本发明实施例中所需要使用的附图作以下介绍，应当理解的是，下面介绍中的附图仅仅为了方便清晰表述本发明的技术方案中的部分实施例，对于本领域的技术人员来说，在无需付出创造性劳动的前提下，还可以根据这些附图获取到其他附图。

[0052] 图1为本发明实施例提供的页面信息窗口动态调整方法的一种步骤流程图；

[0053] 图2为本发明实施例提供的步骤S101的一种步骤流程图；

[0054] 图3为本发明实施例提供的步骤S101的另一种步骤流程图；

[0055] 图4为本发明实施例提供的步骤S102的一种步骤流程图；

[0056] 图5为本发明实施例提供的步骤S103的一种步骤流程图；

[0057] 图6为本发明实施例提供的页面信息窗口动态调整方法的另一种步骤流程图；

[0058] 图7为本发明实施例提供的步骤S104的一种步骤流程图；

[0059] 图8为本发明实施例提供的页面信息窗口动态调整装置的结构示意图；

[0060] 图9为本发明实施例提供的电子设备的硬件结构示意图；

[0061] 图10为本发明实施例提供的存储介质的结构示意图。具体实施方式

[0062] 下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能理解为对本申请的限制。需要说明的是，虽然在系统示意图中进行了功能模块划分，在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于系统示意图中的模块划分，或流程图中的顺序执行所示出或描述的步骤。对于以下实施例中的步骤编号，其仅为了便于阐述说明而设置，对步骤之间的顺序不做任何限定，实施例中的各步骤的执行顺序均可根据本领域技术人员的理解来进行适应性调整。

[0063] 在本发明的描述中，多个的含义是两个或两个以上，如果有描述到第一、第二只是用于区分技术特征为目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量或者隐含指明所指示的技术特征的先后关系。此外，除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

[0064] 本申请实施例提供的页面信息窗口动态调整方法可应用于终端中，也可应用于服务器端中，还可以是运行于终端或服务器端中的软件。在一些实施例中，终端可以是智能手机、平板电脑、笔记本电脑、台式计算机、机顶盒等；服务器端可以配置成独立的物理服务器，也可以配置成多个物理服务器构成的服务器集群或者分布式系统，还可以配置成提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN以及大数据和人工智能平台等基础云计算服务的云服务器；软件可以是实现页面信息窗口动态调整方法的应用等，但并不局限于以上形式。

[0065] 本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、机顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

[0066] 需要说明的是，在本申请的各个具体实施方式中，当涉及到需要根据用户信息、用户行为数据、用户历史数据以及用户位置信息等与用户身份或特性相关的数据进行相关处理时，都会先获得用户的许可或者同意，而且，对这些数据的收集、使用和处理等，都会遵守相关国家和地区的相关法律法规和标准。此外，当本申请实施例需要获取用户的敏感个人信息时，会通过弹窗或者跳转到确认页面等方式获得用户的单独许可或者单独同意，在明确获得用户的单独许可或者单独同意之后，再获取用于使本申请实施例能够正常运行的必要的用户相关数据。

[0067] 如图1所示为本发明实施例提供的页面信息窗口动态调整方法的一种步骤流程图，参照图1，本发明实施例提供了一种页面信息窗口动态调整方法，具体包括以下步骤：

[0068] S101、通过CSS定位技术将信息窗口固定在目标页面的前端的预设位置，并监测目标页面的滚动状态。

[0069] 具体地，本发明实施例使用CSS定位技术将信息窗口固定在H5网页的特定位置，并且通过JavaScript监听滚动事件，实时监测页面的滚动状态。

[0070] 如图2所示为本发明实施例提供的步骤S101的一种步骤流程图，参照图2，进一步作为可选的实施方式，通过CSS定位技术将信息窗口固定在目标页面的前端的预设位置，其具体包括：

[0071] S1011、确定信息窗口对应的HTML元素，并确定目标页面对应的视口；

[0072] S1012、通过CSS的position:fixed属性将HTML元素固定在视口的预设位置，并设定HTML元素的盒模型宽度值保持不变。

[0073] 具体地，本发明实施例根据getBoundingClientRect()提供的方法来获取信息窗口的HTML元素的大小及其相对于视口的位置，这个方法返回一个DOMRect对象，该对象包含了HTM L元素的top、right、bottom、left、x、y、width和height属性，这些属性以像素为单位描述了HTML元素的位置和大小，并结合CSS的盒模型来实现领过改变UI视图层大小变化的交互效果。使用CSS的position:fixed属性将HTML元素固定在页面前端的预设位置，并可以定义HTML元素的top、right、bottom或left属性，以确定HTML元素的最终位置。

[0074] 需要说明的是，本发明实施例设定设定HTML元素的盒模型宽度值width保持不变，在后续信息窗口的动态调整过程中，仅仅改变信息窗口的高度值。

[0075] 如图3所示为本发明实施例提供的步骤S101的另一种步骤流程图，参照图3，进一步作为可选的实施方式，监测目标页面的滚动状态，其具体包括：

[0076] S1013、通过JavaScript的window.onscroll事件监听器捕捉用户的滚动操作；

[0077] S1014、通过变量scrollDistance记录目标页面的滚动距离。

[0078] 具体地，利用JavaScript的window.onscroll事件监听器来捕捉用户的滚动行为(如scroll事件、滚动条滚动事件)，同时设定一个变量scrollDistance来记录页面的滚动距离。

[0079] 考虑到不同浏览器对滚动条的处理方式，在捕捉滚动条滚动事件时，通过检测滚动条的出现与隐藏(或者滚动条宽度的变化)来确定页面的滚动距离，最终动态更新盒模型高度值。

[0080] 需要说明的是，本发明实施例记录的滚动距离是相对于原始页面的滚动距离，页面向上滚动对应着页面的滚动条向下移动，页面向上滚动对应着页面的滚动条向上移动。

[0081] S102、当监测到目标页面向上滚动，获取滚动距离，并根据滚动距离调整信息窗口的大小。

[0082] 具体地，当页面向上滚动时，根据滚动的距离动态调整信息窗口的大小，直至缩小到预设的最小尺寸。

[0083] 如图4所示为本发明实施例提供的步骤S102的一种步骤流程图，参照图4，进一步作为可选的实施方式，根据滚动距离调整信息窗口的大小，其具体包括：

[0084] S1021、当当前滚动距离小于预设的第一阈值，保持HTML元素的盒模型属性不变；

[0085] S1022、当当前滚动距离大于等于第一阈值，逐渐减小HTML元素的盒模型高度值，并根据实时的盒模型高度值实时设定HTML元素的上外边距、上边框、上内边距、内容高度、下内边距、下边框以及下外边距；

[0086] S1023、当HTML元素的盒模型高度值减小至预设的最小高度值，保持HTML元素的盒模型属性不变。

[0087] 具体地，当scrollDistance达到一定阈值时，通过修改CSS样式，逐渐减小信息窗口的高度，直至达到最小高度minHeight。HTML元素的CSS属性包括宽度、内边距、外边距、边框以及高度，本发明实施例中，在动态调整盒模型高度值的同时，需要同步计算实时的上外边距、上边框、上内边距、内容高度、下内边距、下边框以及下外边距，使其总和等于调整后的盒模型高度值。

[0088] S103、当监测到目标页面停止滚动或向下滚动，调整信息窗口的大小至初始状态。

[0089] 具体地，当页面向下滚动或滚动停止时，将信息窗口恢复到原始大小。

[0090] 如图5所示为本发明实施例提供的步骤S103的一种步骤流程图，参照图5，进一步作为可选的实施方式，调整信息窗口的大小至初始状态，其具体包括：

[0091] S1031、获取HTML元素的盒模型高度初始值；

[0092] S1032、逐渐增大HTML元素的盒模型高度值，并根据实时的盒模型高度值实时设定HT ML元素的上外边距、上边框、上内边距、内容高度、下内边距、下边框以及下外边距；

[0093] S1033、当HTML元素的盒模型高度值增大至盒模型高度初始值，保持HTML元素的盒模型属性不变。

[0094] 具体地，当用户停止滚动或向下滚动时，通过一个定时器或滚动停止事件来判断滚动行为的结束，并逐步恢复信息窗口的高度至初始高度initialHeight。

[0095] 如图6所示为本发明实施例提供的页面信息窗口动态调整方法的另一种步骤流程图，参照图6，进一步作为可选的实施方式，页面信息窗口动态调整方法还包括以下步骤：

[0096] S104、响应于用户在目标页面的页面交互操作，通过信息窗口展示对应的操作结果信息。

[0097] 具体地，用户在目标页面中进行点击选择、切换等页面交互操作，这些操作的结果都会在信息窗口中实时显示，并且由于信息窗口固定在目标页面的前端(并非弹出式)，因此用户无需在信息窗口点击确认或关闭信息窗口即可进行其他页面交互操作，增强了用户的交互体验。

[0098] 如图7所示为本发明实施例提供的步骤S104的一种步骤流程图，参照图7，进一步作为可选的实施方式，通过信息窗口展示对应的操作结果信息，其具体包括：

[0099] S1041、获取信息窗口的当前内容宽度和当前内容高度；

[0100] S1042、根据当前内容宽度和当前内容高度对确定操作结果信息的目标文本尺寸；

[0101] S1043、根据目标文本尺寸对操作结果信息进行渲染，并通过信息窗口进行展示。

[0102] 具体地，本发明实施例的信息窗口随着页面滚动而进行调整，因此在展示操作结果信息时，需要根据实时的内容宽度和内容高度计算文本尺寸，便于在信息窗口中清晰、完整地展示操作结果信息。

[0103] 以上对本发明实施例的方法步骤进行了说明。可以认识到，本发明实施例在页面滚动时动态调整信息窗口的大小，保持信息窗口可见性的同时，提高了页面的空间利用率以及页面和信息窗口的内容展示效率，提升了页面的整体视觉效果，增强了用户的交互体验，也提高了用户的页面浏览体验。

[0104] 本发明实施例通过将页面的滚动距离与CSS盒模型高度计算相关联，能够实现页面布局的动态调整，特别是在长页面或内容较多的页面中，能够根据页面的滚动距离自动调节信息窗口的高度，从而提高页面的可读性和用户的浏览体验。该方法还解决了不同浏览器在处理滚动条和盒模型高度的不一致性问题，确保网页在各种浏览器上都能呈现一致的布局效果，特别是针对滚动条出现时对盒模型高度的影响，可以自动调整布局，避免内容溢出或布局错乱的情况。此外，通过实时监测页面的滚动距离，能够使页面元素的布局随页面滚动进行动态变化，从而提供更加流畅和智能的用户交互体验，减少页面内容的跳动或错位问题。最后，该方法的实现具有良好的性能表现，不会明显增加浏览器的渲染负担，并且易于集成到现有的网页应用中，开发者只需简单的API调用即可实现。

[0105] 如图8所示为本发明实施例提供的页面信息窗口动态调整装置的结构示意图，参照图8，本发明实施例提供了一种页面信息窗口动态调整装置，包括：

[0106] 信息窗口固定模块，用于通过CSS定位技术将信息窗口固定在目标页面的前端的预设位置，并监测目标页面的滚动状态；

[0107] 第一调整模块，用于当监测到目标页面向上滚动，获取滚动距离，并根据滚动距离调整信息窗口的大小；

[0108] 第二调整模块，用于当监测到目标页面停止滚动或向下滚动，调整信息窗口的大小至初始状态。

[0109] 上述方法实施例中的内容均适用于本装置实施例中，本装置实施例所具体实现的功能与上述方法实施例相同，并且达到的有益效果与上述方法实施例所达到的有益效果也相同。

[0110] 本发明实施例还提供了一种电子设备，电子设备包括：存储器、处理器、存储在存储器上并可在处理器上运行的程序以及用于实现处理器和存储器之间的连接通信的数据总线，程序被处理器执行时实现上述页面信息窗口动态调整方法。该电子设备可以为包括平板电脑、车载电脑等任意智能终端。

[0111] 如图9所示为本发明实施例提供的电子设备的硬件结构示意图，参照图9，本发明实施例提供了一种电子设备，包括：

[0112] 处理器901，可以采用通用的CPU(Central Processing Unit，中央处理器)、微处理器、应用专用集成电路(Application Specific Integrated Circuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本发明实施例所提供的技术方案；

[0113] 存储器902，可以采用只读存储器(Read Only Memory，ROM)、静态存储设备、动态存储设备或者随机存取存储器(Random Access Memory，RAM)等形式实现。存储器902可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器902中，并由处理器901来调用执行本发明实施例的页面信息窗口动态调整方法；

[0114] 输入 / 输出接口903，用于实现信息输入及输出；

[0115] 通信接口904，用于实现本设备与其他设备的通信交互，可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信；

[0116] 总线905，在设备的各个组件(例如处理器901、存储器902、输入 / 输出接口903和通信接口904)之间传输信息；

[0117] 其中处理器901、存储器902、输入 / 输出接口903和通信接口904通过总线905实现彼此之间在设备内部的通信连接。

[0118] 如图10所示为本发明实施例提供的存储介质的结构示意图，参照图10，本发明实施例还提供了一种存储介质，存储介质为计算机可读存储介质，用于计算机可读存储，存储介质存储有一个或者多个程序1001，一个或者多个程序1001可被一个或者多个处理器执行，以实现上述页面信息窗口动态调整方法。

[0119] 存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序以及非暂态性计算机可执行程序。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至该处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

[0120] 本发明实施例还公开了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存介质中。计算机设备的处理器可以从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行图1所示的方法。

[0121] 在一些可选择的实施例中，在方框图中提到的功能 / 操作可以不按照操作示图提到的顺序发生。例如，取决于所涉及的功能 / 操作，连续示出的两个方框实际上可以被大体上同时地执行或上述方框有时能以相反顺序被执行。此外，在本发明的流程图中所呈现和描述的实施例以示例的方式被提供，目的在于提供对技术更全面的理解。所公开的方法不限于本文所呈现的操作和逻辑流程。可选择的实施例是可预期的，其中各种操作的顺序被改变以及其中被描述为较大操作的一部分的子操作被独立地执行。

[0122] 此外，虽然在功能性模块的背景下描述了本发明，但应当理解的是，除非另有相反说明，上述的功能和 / 或特征中的一个或多个可以被集成在单个物理装置和 / 或软件模块中，或者一个或多个功能和 / 或特征可以在单独的物理装置或软件模块中被实现。还可以理解的是，有关每个模块的实际实现的详细讨论对于理解本发明是不必要的。更确切地说，考虑到在本文中公开的装置中各种功能模块的属性、功能和内部关系的情况下，在工程师的常规技术内将会了解该模块的实际实现。因此，本领域技术人员运用普通技术就能够在无需过度试验的情况下实现在权利要求书中所阐明的本发明。还可以理解的是，所公开的特定概念仅仅是说明性的，并不意在限制本发明的范围，本发明的范围由所附权利要求书及其等同方案的全部范围来决定。

[0123] 上述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例上述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

[0124] 在流程图中表示或在此以其他方式描述的逻辑和 / 或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，"计算机可读介质”可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。

[0125] 计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印上述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得上述程序，然后将其存储在计算机存储器中。

[0126] 应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

[0127] 在本说明书的上述描述中，参考术语"一个实施方式 / 实施例”、"另一实施方式 / 实施例”或"某些实施方式 / 实施例”等的描述意指结合实施方式或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施方式或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施方式或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施方式或示例中以合适的方式结合。

[0128] 尽管已经示出和描述了本发明的实施方式，本领域的普通技术人员可以理解：在不脱离本发明的原理和宗旨的情况下可以对这些实施方式进行多种变化、修改、替换和变型，本发明的范围由权利要求及其等同物限定。

[0129] 以上是对本发明的较佳实施进行了具体说明，但本发明并不限于上述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做作出种种的等同变形或替换，这些等同的变形或替换均包含在本申请权利要求所限定的范围内。< / style>

Claims

1. A page information window dynamic adjustment method, characterized in that: The following steps are involved: Fixing the information window at a preset position at the front end of the target page by using CSS positioning technology, and monitoring the scrolling state of the target page; When it is detected that the target page scrolls upward, the scroll distance is obtained, and the size of the information window is adjusted according to the scroll distance; When it is detected that the target page stops scrolling or scrolls down, the size of the information window is adjusted to an initial state.

2. A page information window dynamic adjustment method according to claim 1, characterized in that: The method of fixing the information window at a preset position at the front end of the target page by using the CSS positioning technology specifically includes: Determine the HTML element corresponding to the information window, and determine the viewport corresponding to the target page; The HTML element is fixed at the preset position of the viewport through the position:fixed attribute of CSS, and the box model width value of the HTML element is set to remain unchanged.

3. A page information window dynamic adjustment method according to claim 1, characterized in that: The monitoring of the scrolling state of the target page specifically includes: Capture the user's scrolling operation through JavaScript's window.onscroll event listener; The scroll distance of the target page is recorded through the variable scrollDistance.

4. A page information window dynamic adjustment method according to claim 2, characterized in that: The adjusting the size of the information window according to the scrolling distance specifically includes: When the current scrolling distance is less than a preset first threshold, keeping the box model attribute of the HTML element unchanged; When the current scrolling distance is greater than or equal to the first threshold, gradually reduce the box model height value of the HTML element, and set the top margin, top border, top padding, content height, bottom padding, bottom border and bottom margin of the HTML element in real time according to the real-time box model height value; When the box model height value of the HTML element is reduced to a preset minimum height value, the box model attributes of the HTML element are kept unchanged.

5. A page information window dynamic adjustment method according to claim 4, characterized in that: The step of adjusting the size of the information window to an initial state specifically includes: Get the initial value of the box model height of the HTML element; Gradually increase the box model height value of the HTML element, and set the top margin, top border, top padding, content height, bottom padding, bottom border, and bottom margin of the HTML element in real time according to the real-time box model height value; When the box model height value of the HTML element increases to the initial value of the box model height, the box model attribute of the HTML element is kept unchanged.

6. A page information window dynamic adjustment method according to any one of claims 1 to 5, characterized in that: The page information window dynamic adjustment method also includes the following steps: In response to the user's page interaction operation on the target page, the corresponding operation result information is displayed through the information window.

7. A page information window dynamic adjustment method according to claim 6, characterized in that: The corresponding operation result information is displayed through the information window, which specifically includes: Get the current content width and current content height of the information window; Determine a target text size of the operation result information according to the current content width and the current content height; The operation result information is rendered according to the target text size and displayed through the information window.

8. A device for dynamically adjusting a page information window, characterized in that: include: An information window fixing module, used to fix the information window at a preset position at the front end of a target page through CSS positioning technology, and monitor the scrolling state of the target page; A first adjustment module is used to obtain a scrolling distance when detecting that the target page scrolls upward, and adjust the size of the information window according to the scrolling distance; The second adjustment module is used to adjust the size of the information window to an initial state when it is detected that the target page stops scrolling or scrolls down.

9. An electronic device, characterized in that: The electronic device includes a memory, a processor, a program stored in the memory and executable on the processor, and a data bus for realizing connection and communication between the processor and the memory. When the program is executed by the processor, the steps of the page information window dynamic adjustment method as described in any one of claims 1 to 7 are realized.

10. A storage medium, the storage medium being a computer-readable storage medium, used for computer-readable storage, characterized in that: The storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the steps of the page information window dynamic adjustment method according to any one of claims 1 to 7.

Images