从源码角度解读BetterScroll中maxScrollY的含义

news2024/11/26 1:48:20

最近在看一个Vue3 Typescript项目,里面有段BetterScroll代码。

 if (scroll.value && scroll.value.maxScrollY >= -1) {

        state.manualLoading = true

        await searchMore()

        state.manualLoading = false

      }

 对这个maxScrollY的含义不太明白,官网的解释也说的不清楚,说的等于是废话,以下是官网解释。

 看的出来根本没有说清楚。

所以干脆直接看源码:

首先定位到下面这段:

 看的出来,关键是wrapperHeight和indicatorHeight

wrapperHeight应该是父级容器高度,那么又是什么?

接着跟进indicatorHeight:

indicatorHeight从getRect函数解构出来。

所以继续跟进getRect函数:

对于这个getBoundingClientRect,其实不必大惊小怪,这个其实是相对于浏览器窗口的一个dom对象,这里关键看它的height属性。

getBoundingClientRect的heigh属性是包含了原有dom元素的height + padding + borderwidth.

见官网图:

 那么前面的 this.maxScrollY = wrapperHeight - indicatorHeight

就好理解了。 maxScrollY相当于:父容器高度 - 内容元素的高度

maxScrollY的意义就是父容器内部减去内容高度后的剩余空间

此剩余空间如果为整数或者接近于0,说明父容器能装的下内容高度,此时无法进行滚动。

如果此剩余空间始终为负数,说明内容高度大于父容器高度,此时可以进行滚动。

这就是maxScrollY的全部意义!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1173509.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【存档】vscode配置latex环境

原来在另一台电脑上找了个教程配了一遍,这次重新配的时候,那个教程作者更新过后,改成只有linux的脚本了,所以存档一下。真香警告, 2023年初的vscodelatex写作 - 知乎 (zhihu.com) 环境: win10/win11vscodelatex work…

Flink源码解析八之任务调度和负载均衡

源码概览 jobmanager scheduler:这部分与 Flink 的任务调度有关。 CoLocationConstraint:这是一个约束类,用于确保某些算子的不同子任务在同一个 TaskManager 上运行。这通常用于状态共享或算子链的情况。CoLocationGroup & CoLocationGroupImpl:这些与 CoLocationCon…

【漏洞复现】typecho_v1.0-14.10.10_unserialize

感谢互联网提供分享知识与智慧,在法治的社会里,请遵守有关法律法规 文章目录 漏洞利用GetShell 下载链接:https://pan.baidu.com/s/1z0w7ret-uXHMuOZpGYDVlw 提取码:lt7a 首页 漏洞点:/install.php?finish 漏洞利用 …

京东云主机租用优惠价格表和轻量云主机

京东云主机租用优惠价格表轻量云主机2C2G3M配置66元一年、2C2G4M带宽99元1年,3年326元;云主机2核4G5M带宽598元一年,买三年1499元;轻量云主机低至5.5元一个月,阿腾云atengyun.com分享领取13180元京东云服务器专用优惠代…

从公共业务提取来看架构演进——功能设置篇

1.引言 上一篇文章我们以帐号权限的提取为例,介绍了当架构跟不上业务发展时及时调整架构的一种思路。这篇文章我们以功能设置为例,进一步讨论公共业务提取这个话题。 功能设置在本文中是指产品开放给企业和用户的一些功能设置项,以视频会议…

学习视频剪辑:批量添加srt字幕,让视频更生动

随着社交媒体的普及,视频制作变得越来越重要。无论是记录生活,还是分享知识,视频都是一个非常有力的工具。但是,如何让您的视频更生动、更吸引人呢?通过学习视频剪辑,您可以使您的视频更具有吸引力。而在这…

自定义element-ui plus 函数式调用,在API,js中直接使用全局组件

npm方式: npm install -D unplugin-vue-components unplugin-auto-import yarn 方式 : yarn add unplugin-vue-components; yarn add unplugin-auto-import; 使用官方的这个: vite.config.js中配置 plugins: [vue(),AutoImport({resolvers: [ElementPlusResolve…

Educational Codeforces Round 2 D 计算几何

题目链接:Educational Codeforces Round 2 D 题目 给你两个圆。求它们相交处的面积。 输入 第一行包含三个整数 x1, y1, r1 (  - 109 ≤ x1, y1 ≤ 109, 1 ≤ r1 ≤ 109 ) - 第一个圆的圆心位置和半径。 第二行包含三个整数 x2, y2, r2 (  …

电脑如何设置不同网段的IP地址,实现访问不同IP的PLC或HMI设备?

电脑如何设置不同网段的IP地址,实现访问不同IP的PLC或HMI设备? 电脑如何设置不同网段的IP地址,实现访问不同IP的PLC或HMI设备? 这里以win10系统为例进行说明: 如下图所示,打开右下角的“网络和Internet设置”, 如下图所示,点击进入“更改适配器选项”, 如下图所示…

qt6:无法使用setFontColor

问题描述 跟着C开发指南视频学习,但是发现无论是直接使用ui设计,还是纯代码都无法实现变更字体颜色的功能。图中显示,点击颜色控件后,文本框的文字加粗、下划线、斜体等才能设置,但是无法变更颜色。 此文提醒qt sty…

【echarts基础】在柱形图上设置文本

一、需求描述 在柱状图上设置文本标签,按需修改它的颜色、大小、边框、阴影等,如下。 二、代码展示 series:[{name:"螺蛳粉",type:"bar",data:data.data.chartData.chartData.num.螺蛳粉,label:{//图形上显示文本标签formatter:&q…

数学概念 | 旋转矩阵、欧拉角、四元数

目录 一,旋转矩阵 二维旋转矩阵 三维旋转矩阵 二,欧拉角 三,四元数 四,矩阵、欧拉角、四元数相互转换 四元数转矩阵 矩阵转四元数 欧拉角转矩阵 矩阵转欧拉角 欧拉角转四元数 四元数转欧拉角 一,旋转矩阵 …

「Verilog学习笔记」移位运算与乘法

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点,刷题网站用的是牛客网 分析 1、在硬件中进行乘除法运算是比较消耗资源的一种方法,想要在不影响延迟并尽量减少资源消耗,必须从硬件的特点上进行设计。根据寄存器的原理&a…

【Head First 设计模式】--策略模式

一、背景 Head First 设计模式第一章设计模式入门–策略模式 二、工具箱的工具(本章) 1、OO基础 封装 继承 多态 抽象 2、OO原则 封装变化 面向接口编程,而非面向实现编程 组合优于继承 3、OO模式 策略模式,所谓策略模式就是定义…

UE4 Niagara Module Script 初次使用笔记

这里可以创建一个Niagara模块脚本 创建出来长这样 点击号,输出staticmesh,点击它 这样就可以拿到对应的一些模型信息 这里的RandomnTriCoord是模型的坐标信息 根据坐标信息拿到位置信息 最后的Position也是通过Map Set的号,选择Particles的P…

2023年【安全员-A证】新版试题及安全员-A证模拟考试题库

题库来源:安全生产模拟考试一点通公众号小程序 安全员-A证新版试题考前必练!安全生产模拟考试一点通每个月更新安全员-A证模拟考试题库题目及答案!多做几遍,其实通过安全员-A证理论考试很简单。 1、【多选题】《中华人民共和国工…

Win11新电脑启动无无线网络连接解决办法

Win11新电脑启动无无线网络连接解决办法 前言一、解决方法 前言 今天笔者在使用学校实验室分配的新电脑时候,发现在新激活的时候需要让我连接到无线网络,但不管鼠标怎么点都操作不了,于是在卡在这里了,唯一的办法就是跳过此页面&…

vCenter挂载iSCSI共享存储

1.添加磁盘,创建新的物理卷 Volumes -> (Volumes section)Manage Volumes ->create new physical volumes -> (Block Device Management) 2.点击新磁盘 3.新建物理卷 Volumes -> (Volumes section)Block Devices -> (Block Device Management)/de…

CSAPP BOMB LAB part3

CSAPP BOMB LAB part3 phase_4 bomb.s phase_4的代码: 格式: 40102e行,比较0x8rsp的值和0xe, 需要让0x8rsp小于0xe, 然后跳转到40103a, func函数根据bomb.s 转化为c代码: 这个直接参考了知乎网友的翻译, func4的返回值等于0, 跳转到40…

AI 绘画 | Stable Diffusion 提示词

Prompts提示词简介 在Stable Diffusion中,Prompts是控制模型生成图像的关键输入参数。它们是一种文本提示,告诉模型应该生成什么样的图像。 Prompts可以是任何文本输入,包括描述图像的文本,如“一只橘色的短毛猫,坐在…