前端：计算滚动条距底部多远（距离底部的百分比）

// 获取某固定元素滚动的高度
const scrollHeight = document.getElementById('mobileRenderContent').scrollHeight;// 获取当前窗口大小，滚动条不一定从顶部开始计算，因此94是距离顶部的位置，如果没有就写0
const windowHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 94;
const scrollTop = document.getElementById('mobileRenderContent').scrollTop; // 滚动条距离顶部高度
const scrollBottom = scrollHeight - windowHeight - scrollTop; // 滚动条距离底部高度// 计算滚动条距离底部百分比
// if语句作用：滚动后再此滚动时，如果已存的值比滚动的值大，就不保存，否则会有BUG，阅读百分比会一会多一会小，实际只能增大不能减少
if (((scrollHeight - scrollBottom) / scrollHeight) * 100 > this.percent) {this.percent = ((scrollHeight - scrollBottom) / scrollHeight) * 100;
}// 需求可能是全窗口，那么scrollHeight可以直接这样写：
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;window.addEventListener('resize', () => {// 监听滚动条写法
});

前端：计算滚动条距底部多远（距离底部的百分比）相关推荐

获取滚动条距离底部的高度
今天写移动端遇到了需求要获取滚动条距离底部的高度 var wHeight = $(document).height();var scrollHeight = wHeight - $(document) ...
vue滚动条事件（获取滚动条距离底部距离）
网上大部分vue的滚动条操作是监听dom实现,我是用@scroll实现首先有滚动条的div一定要设固定高度,然后overflow:auto;出现滚动条 passive是使滚动更加流畅,减少卡顿 &l ...
php 地图两点距离计算,计算地图上两点间的距离PHP类
计算地图上两点间的距离,使用的是谷歌地图 class GeoHelper { /** * @param int $lat1 * @param int $lon1 * @param int $lat2 ...
Cesium 路径分析（纯前端计算）
最近写了个基于高德在线服务的路径分析功能.纯前端计算先说下此功能的思路,由于高德的坐标系是国测局的,而cesium的坐标系是wgs84的,故要对偏差进行处理,处理之后再进行模拟: 先上个图看下效果: ...
js利用offsetWidth和clientWidth来计算滚动条的宽度
大家好,清明节即将来来临,清明时节雨纷纷,路上行人欲断魂,借问酒家何处有,牧童遥指杏花村!!哈哈哈哈!言归正传,今天我主要介绍一个计算滚动条宽度的例子. 前言其实,很多情况下滚动条宽度是不用计算的, ...
R语言计算曼哈顿距离（Manhattan Distance）实战:计算两个向量的曼哈顿距离、dist函数计算矩阵中两两元素的曼哈顿距离
R语言计算曼哈顿距离(Manhattan Distance)实战:计算两个向量的曼哈顿距离.dist函数计算矩阵中两两元素的曼哈顿距离目录 R语言计算曼哈顿距离(Manhattan Distance ...
php 计算两点时间距离,PHP计算地球上两点之间的距离（示例详解）
给定经度和纬度,求地球上两点之间的距离.首先我们需要了解该问题的解决思路,然后再用PHP代码来实现计算. 此问题可以用半正矢(haversine)公式求解: 大圆距离或正交距离是球面(或地球表面)上两 ...
sklearn计算两个向量之间的距离
from sklearn.feature_extraction.text import CountVectorizer from sklearn.metrics.pairwise import euc ...
高德经纬度距离计算php,计算两个经纬度之间的距离单位(m)
/** * 计算两个经纬度之间的距离单位(m) * * @param lat1 * @param lng1 * @param lat2 * @param lng2 * @return */ publ ...

前端：计算滚动条距底部多远（距离底部的百分比）

前端：计算滚动条距底部多远（距离底部的百分比）相关推荐

最新文章

热门文章