计算滚动条的宽度–js

计算滚动条的宽度–js原理创建两个div嵌套在一起外层的div设置固定宽度和overflow:scroll滚动条的宽度=外层div的offsetWidth-内层div的offsetWidth实现代码/***获

大家好,又见面了,我是你们的朋友全栈君。

原理

  1. 创建两个div嵌套在一起
  2. 外层的div设置固定宽度和overflow:scroll
  3. 滚动条的宽度=外层div的offsetWidth-内层div的offsetWidth

与案例题

实现代码

/**
 * 获取滚动条的宽度
 */
getScrollWidth() {
    const scroll = document.createElement("div");
    const scrollIn = document.createElement("div");
    scroll.appendChild(scrollIn);
    scroll.style.width = "100px";
    scroll.style.height = "50px";
    scroll.style.overflow = "scroll";
    scroll.style.marginLeft = "-100000px";
    document.body.appendChild(scroll);
    const scrollInWidth = scrollIn.offsetWidth;
    const scrollWidth = scroll.offsetWidth;
    const tmp = setTimeout(() => {
        document.body.removeChild(scroll);
        clearTimeout(tmp);
    }, 10);
    return scrollWidth - scrollInWidth;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/154675.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ScriptManager.RegisterStartupScript 方法

    ScriptManager.RegisterStartupScript 方法1、ScriptManager.RegisterStartupScript方法(Page,Type,String,String,Boolean): 参数page类型:System.Web.UI.Page正在注册该客户端脚本块的页对象。type类型:System.Type该客户端脚本块的类型。通常使用typeof运算符(C#)或GetType运算符(VisualBasic)来指定该参数,以检索正在注册该脚本的控件的类型。key类型:System.String该脚本块的唯一标识符。

  • c语言实现香农编码和译码_香农编码码长

    c语言实现香农编码和译码_香农编码码长1、设计思想     为了设计的方便,我们需要在这个程序里设计一个结构体,以用来存储信源符号、信源符号概率等参数,将每一组参数看成一个结构体来看待,这样我们就可以随时地调用。2、设计流程     主函数部分,我们先接收要输入的信源符号个数,再接收每个信源符号的名称以及他的概率。    主函数设计好后,我们将各功能的函数分成几个模块来写,第一个是排序函数,如果你坚持从大到小输入则可以不用写;第二个…

  • #从源头解决# 自定义头文件在VS上出现“无法打开源文件“XX.h“的问题

    #从源头解决# 自定义头文件在VS上出现“无法打开源文件“XX.h“的问题自己编写了一个头文件,在主函数中通过#include引用时出现了无法打开源文件的问题,通过网上查阅,发现是自己混淆了#include<>和#include””的用法。问题完美解决!…

  • Maven下载安装

    Maven下载安装

  • android学习笔记之ImageView的scaleType属性

    android学习笔记之ImageView的scaleType属性我们知道,ImageView有一个属性叫做scaleType,它的取值一共有八种,分别是:matrix,fitXY,fitStart,fitCenter,fitEnd,center,centerCrop,centerInside。那我们下面一起来看看这八种取值分别代表什么意思。我用两张图片来做demo,这两张图片的分辨率一大一小,图片分别叫做big和small。原图如下:big:small:OK,

  • TreeTable树形数据列表

    TreeTable树形数据列表使用Treetable展示ajax数据,通用的List集合递归转换为具有层级关系的List集合

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号