js计算滚动条长度&位置,用于自己绘制滚动条

JavaScript技巧:获取滚动条尺寸的函数代码 这在一些特定的情况下可能很有用,比如在设计自定义滚动条的样式时,或者在处理动态布局时需要准确计算元素的位置。它可以帮助你准确获取滚动条的尺寸,以便进行相应的布局和设计调整。接下来,我们通过计算div的宽度减去其内容区域的宽度,来获取滚动条的实际宽度。最后,我们移除这个div,并返回滚动条的尺寸。然后,我们将这个div添加到文档中的一个位置,这个位置在屏幕外面,以确保用户看不到它。这段代码中,我们创建了一个包含滚动元素的div,并将其样式设置为具有一个固定的宽度和高度,同时设置。打印出滚动条的尺寸。 阅读详情

做页面时,经常会遇到的一个问题:一个元素设置为overflow:scroll,内部有滚动条,在元素内部滚动滚轮,当其滚动条到底时,整个页面的滚动也开始了。

有时我们只希望滚动在子元素中有效,整个页面不要动。经常会用到$("body").css("overflow","hidden"),这个样式生效后,页面确实暂时不能滚动了,但是滚动条也消失了。不光看起来不舒服,页面的宽度还会变化。

解决这个问题的一个方法是,自己绘制一个滚动条,填充在原来的位置。这里的难点在于获取滚动条滑块的长度和位置。有一种方式可以近似地计算这两个值。虽然不十分准确,看起来也差不多了。

长度: 

$(window).height()/document.body.clientHeight*$(window).height()

高度:

document.body.scrollTop/document.body.clientHeight*$(window).height()

注意,在IE中不一定有效。

Java对接(BSC)币安链 | BNB与BEP20的开发实践(三)水龙头 WEB3 这一节我们讲一个币安测试链如何获取到BNB、USDT等BEP20数字货币(水龙头)来让我们前期测试开发。如图:我们将创建的地址填入相应输入框,来获取到测试BNB以及其他BEP20数字币。发币可能需要交易等待,请耐心等待即可,交易完成后,币会到达您的地址内。上一节我们用代码来实现BNB转账、BEP20转账、链上交易监控。2.MetaMask(小狐狸)浏览器插件 🪜。使用EDGE浏览器可以在浏览器直接打开。使用Chrome浏览器,请使用🪜打开。基本工作就绪后,即可进行开发测试。3. 测试区块链浏览器 🪜。 阅读详情

相关推荐

避坑指南:DeepSeek Function calling流式输出中的常见问题与解决方案

本文深入探讨了在DeepSeek Function Calling中实现流式输出时常见的参数拼接、函数依赖管理和错误处理等核心挑战。针对流式响应中参数碎片化的问题,提供了健壮的参数拼接方案与状态管理策略。同时,文章详细阐述了如何管理函数调用顺序、处理条件性执行,并构建了分阶段的错误处理与重试机制,旨在帮助开发者构建稳定、高效的流式AI应用。

weixin_29062671的博客 203

js之获取滚动条长度的代码段

前面兼容chrome,后面兼容IE和火狐浏览器

qq_41555580的博客 4906

基于单片机控制双向可控硅灯光强度设计

*单片机设计介绍,基于单片机控制双向可控硅灯光强度设计。

QQ2193276455的博客 2457

两个名人小故事

王羲之13岁那年,偶然发现他父亲藏有一本《说笔》的书法书,便偷来阅读。他父亲担心他年幼不能保密家传,答应待他长大之后再传授。没料到,王羲之竟跪下请求父亲允许他现在阅读,他父亲很受感动,终于答应了他的要求。 王羲之练习书法很刻苦,甚至连吃饭、走路都不放过,真是到了无时无刻不在练习的地步。没有纸笔,他就在身上划写,久而久之,衣服都被划破了。 有时练习书法达到忘情的程度。一次,他练字竟忘了吃饭,家人把饭送到书房,他竟不加思索地用摸摸蘸着墨吃起来,还觉得很有味。当家人发现时,...

zengxianle__malu的博客 483

一文解读DeepSeek训练数据集

本文重点以DeepSeek为例,详细介绍预训练数据集相关内容。大语言模型LLM(如DeepSeek、ChatGPT、文心一言等)的“智慧”源于它们学习的海量数据集。简单来说,数据集就是模型的“知识库”,通常由互联网公开的文本、图片、视频等。这些数据需满足两个特点:规模大和多样性。规模大是指数据量可达千亿级词汇,让模型学习复杂规律;多样性则涵盖多领域(如科技、文学)、多语言、多形式(对话、新闻),帮助模型适应不同场景。例如,训练数据中既有百科知识,也有日常对话,模型才能既解答专业问题,又能闲聊。

u013891230的博客 7090

YOLOv10注意力革新:小波域注意力(WDA)如何实现多尺度特征精准聚焦

本文深入解析YOLOv10中的小波域注意力(WDA)机制,探讨其如何通过频域分解与动态聚焦实现多尺度特征精准提取。WDA模块结合离散小波变换与注意力机制,显著提升小目标检测性能,在VisDrone数据集上AP提升达12.6%。文章详细介绍了两种集成方案及代码实现,为计算机视觉开发者提供实用指南。

weixin_29079671的博客 253

关于滚动条的一些说明

滚动条是一种很有用的控件,当一个页面的内容在显示区域放不下时,就要用到它了。实现界面的时候,有的时候需要实现滚动条控件,有些人可能不明白其原理,这里说说其原理,还是很有意义的。滚动条的滑动偏移量/(显示区域的长度-滚动条的长度)=滑出的内容长度/(所有显示内容的长度-显示区域的长度)。3. 滚动条的滑动偏移量/滚动条的长度=滑出的内容长度/显示区域的长度。以上是滚动条的原理。2. 滚动条的长度/显示区域的长度=显示区域的长度/所有显示内容的长度。1. 当要显示的内容不大于显示区域,这时候不需要显示滚动条。

格物致知的专栏 [音视频编解码 网络协议 计算机视觉 计算机图形学 图像理解 语音识别 机器学习 模拟电路 传感器] 1228

QMT实盘避坑指南:从环境配置到策略部署的完整流程(含国金证券路径设置)

本文是一份详尽的QMT实盘交易避坑指南,重点解析了从环境配置到策略部署的完整流程。针对国金证券QMT平台,文章深入剖析了核心架构、精准路径配置、关键参数解析、交易操作实战及异常处理,并提供了策略部署、监控与日志构建的完整方案,旨在帮助具备Python基础的开发者规避常见陷阱,实现稳定可靠的实盘交易。

weixin_29309475的博客 595

js实现滚动条长度随着内容长度变化而变断

实现最终效果: 滚动条Bar自身的长度随着内容的增多,会变短 拖动bar可以滚动文字的内容高度 思路算法 滚动条bar的高度/scroll高度=box高度/内容的高度 barHeight = box.clientHeight/conten.offsetHeightscroll.clientHeight; 内容滚动的距离/内容最大滚动的距离=滚动条bar滚动的距离/滚动条bar最大的滚动距离 内容最大的滚动距离 var contentMax = conten.scrollHeight-box.client..

qq_64353584的博客 1307

信贷模型域——清收阶段模型(贷后模型)

本文深入探讨了信贷模型域中的清收阶段模型(贷后模型),涵盖早期催收模型(C卡)、晚期催收模型、Best Time to Contact模型和回收模型。这些模型通过多维度数据输入,运用分类、回归和生存分析等建模方法,输出关键指标如还款概率、回收率等,广泛应用于银行、资产管理公司和催收外包公司,助力提升回款率、优化资源分配、降低催收成本,并融入贷后风控体系。

庄小焱 653

vue2/3 - 详细实现内网使用离线百度地图功能,百度地图如何离线加载详细教程(内网部署及使用),在vue中无需网络离线使用百度地图相关功能,提供最新完整的瓦片资源下载及相关工具(示例代码,一键复制

vue,vue2,vue3,百度地图,离线使用百度地图,百度地图瓦片官方下载,vue内网使用百度地图离线无网络,断网情况下使用百度地图,vue离线百度地图教程,如何实现内网部署百度地图,无需联网离线使用,vue+ts实现离线百度地图 内网离线百度地图,如何在百度地图Vue项目中下载离线地图,百度离线地图加载不出来,百度地图离线使用不显示怎么办,怎么解决vue内网使用离线百度地图加载失败问题,vue实现离线地图+百度瓦片,vue引入百度离线地图,vue项目如何使用离线百度地图和自定义地图样式,百度离线地图的下

✅ 精选推荐文章 1万+

js原生写滚动条效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿浏览器滚动条</title> <style type="text/css"> * { margin: 0; padding: 0; ...

JackieDYH的博客 620

文献综述三大痛点用AI轻松解决!借助Gemini 3 Pro搞定检索难、阅读慢、框架乱问题(附 AI 提示词)

4)“漏斗式”结构:先介绍宏观领域的研究现状,再缩小范围,聚焦于与你课题直接先关的子领域,深入探讨与你研究变量直接相关的文献, 指出前人没做过、没做全或结论有矛盾的地方,再顺势提出你的研究课题,这种结构逻辑最清晰,能直接引导读者发现你研究的必要性。想要有针对性的搜到相关文献,必须先把模糊的研究题目拆解成精准的检索语言,这个时候就需要建立一个关键词矩阵,如核心词、同义词、学术术语、上下位词,以及对应的英文表达。请围绕【我的研究主题/关键词】,检索近5年发表的高被引的中英文文献,优先选择顶刊综述/论文。

智能AI让学术科研更容易 277

python滚动条长度_python+selenium+js 处理滚动条

selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了。常见场景:当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的。这时候需要借助滚动条来拖动屏幕,使被操作的元素显示在当前的屏幕上。滚动条是无法直接用定位工具来定位的。selenium里面也没有直接的方法去控制滚动条,这时候只能借助J了,还好selenium提供了一个操作js的方法:...

weixin_32927369的博客 665

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

原生js模拟滚动条效果

巩固一下js基础知识: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...

小柒的前端之旅 812

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

计算滚动条的高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=...

a63438840的博客 740

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

js 导航滚动 滚动条原理讲解

在制作导航时,希望左边的导航和右侧的内容区域可以联动显示,例如:左侧导航点到某个标题后,右侧的内容区域自动将此标题置顶 像Word中的导航窗口: 点击导航中的“文章2”时,右侧的内容区,自动将“文章2”内容滚动到置顶位置进行显示。 但是再点击“文章3”“文章4”时,右侧的内容区域就无法将其内容,滚动到置顶位置了。 滚动条展示原理图: 从上图可知: 可视区域高度/内容高度 = 滚动条长度/滚动条总长; 可滚动距离=内容高度-可视区域高度; 而 从图又可知:滚动条总长 =可视区域高.

拒绝成猿的程序员 1497

javascript控件开发之滚动条控件

在网页中,本身就有滚动条,在显示文本内容的时候,原始的滚动条已够用,一般如果我们想实现一个类似列表的控件时,也可以把所有的列表数据输出到一个完整的标签,再嵌入到一个DIV中即可,然而如果数据量达到几千行时,完全生成的话,将会非常的占用内存,因此较好的办法是用虚拟展示的方式, 所谓虚拟展示就是把数据用一个数组存储, 然后只生成可见部分的DOM元素,比如可见行是10行,那就创建10个,通...

iteye_20428的博客 348

关于模拟一个滚动条的实现------横向滚动条 原生 html css js

但是 overflow: auto;的滚动条太难看了,尽管可以重些一些样式,但是移动端仍不支持。无奈只能做出妥协,遂想 可否实现自定义模拟一个滚动指示器出来,以求满足业务要求。在日常开发中会遇到一些时候,在实现内部滚动的同时,也希望用户看到当前的滚动位置。

qq_46634851的博客 1117

微信小程序自定义 scroll-view 滚动条

小程序自定义 scroll-view 滚动条 效果图 wxml代码 <scroll-view scroll-x class="scroll-view" bindscroll="bindScroll"> <block wx:for="{{arr}}" wx:key="index"> ...

weixin_44227577的博客 2989

js与jquery获得页面大小、滚动条位置、元素位置

js与jquery获得页面大小、滚动条位置、元素位置 //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {    // Mozilla    scrW = window.innerWidth + window.scrollMaxX;...

woshixushigang的专栏 119

js实现自定义滚动条

js实现自定义滚动条,可鼠标拖动,滚动

u013464954的专栏 598

移动端div跟随滚动条滚动(自制

/*隐藏bady滚动条*/ *::-webkit-scrollbar { display: none; } <div class="p2-content search-box"> //内容盒子 有宽有高 y轴滚动 <div class="content-box" id="search-box-content"> //内容部分 <img class="p2-search-input" data-src="img.

佳人与北的博客 641

如何通过控制台 给浏览器添加一个横向的滚动条放到上面 并显示滑动的百分比

如何通过控制台 给浏览器添加一个横向的滚动条放到上面 并显示滑动的百分比

preserveXing的博客 1079

用Javascript获取页面元素的位置

用Javascript获取页面元素的位置 作者: 阮一峰 日期: 2009年9月14日 制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小 首先,要明确两个基本概念。 一张网页的全部面积,就是它的大小。通常情况下,网页的大小由内容和CSS样...

sinoalex 1299

Javascript获取页面元素相对和绝对位置

需求来自于一个同学的小小要求,某人问我能否实现自动点赞?!然后我首先想到的是console上运行js代码获取某个元素并模拟鼠标点击,大体一搜发现没有资料大体也有人说必须这个元素绑定的有onclick方法才行试验了一下确实可以。但不是我想要的。然后不甘心的我当然五Google啦,然后发现其实是 可以的(珍爱生命,请用Google),大体是要用到元素的位置,于是就发现了阮一峰大神的这篇博文,也算是补补

学徒ZSX 1万+
上一篇: 使用Python中os读取含特殊字符路径的简单办法
下一篇: Nginx映射项目外静态资源的实例
平仄_csdn
博客等级 码龄10年 11粉丝 32原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值