计算滚动条的宽度–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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • android 之旋转罗盘 风车 开发[通俗易懂]

    android 之旋转罗盘 风车 开发[通俗易懂]我要介绍的是一个能旋转的view,说这个view能旋转有点不切实际,那是视觉效果,其实是对图片的旋转。目前它只支持图片。你可以把它认为是一个能响应手势旋转的View。它的功能有:1.会响应手势旋转2

    2022年8月3日
    13
  • Linux stat函数_linux C编程视频

    Linux stat函数_linux C编程视频linuxC函数之stat函数1.函数功能:通过文件名filename获取文件信息,并保存在buf所指的结构体stat中2.函数原型1)函数头文件#include#include2)函数intstat(constchar*file_name,structstat*buf)3)返回返回值:     执行成功则返回0,失败返回-1,错误代码存于errno错误代码:ENOENT  

    2022年8月21日
    12
  • Redis从青铜到王者,从环境搭建到熟练使用,看这一篇就够了,超全整理详细解析,赶紧收藏吧!!!

    Redis从青铜到王者,从环境搭建到熟练使用,看这一篇就够了,超全整理详细解析,赶紧收藏吧!!!一、常见的非关系型数据库NOSQL分类二、了解Redis三、Redis的单节点安装教程四、Redis的常用命令五、BITMAP位图六、Redis的数据模型七、Redis持久化八、idea使用Jedis连接Redis

    2022年5月10日
    38
  • pycharm安装pyqt5-tools_python pyqt5教程

    pycharm安装pyqt5-tools_python pyqt5教程许多人会使用pyqt5去写python的可视化界面,但是每次都需要在终端把.ui文件转为.Py文件,操作相对比较麻烦,此时pycharm就派上用场了,pycharm是一个特别好用的python编辑器,也可以把pyqt5的开发工具集成到pycharm中,具体的操作步骤如下:首先找到pycharm的菜单栏“file”,点击选择”setting“选择tools下的Externaltools点击+号添加工具:按如下输入Name:QTdesigner(自己另外取一个也行)program:D:\anaco

    2022年8月27日
    6
  • lwip tcp_lwip udp发送

    lwip tcp_lwip udp发送欢迎查看本文所在的系列,STM32的LWIP应用,点击跳转1、tcp_arg()该函数用于传递给应用程序的具体状态,在控制块标志建立以后调用,即在函数tcp_new()调用之后才能调用功能指定应该传递给所有回调函数的应用程序的具体状态原型voidtcp_arg(structtcp_pcb*pcb,void*arg)参数pcb:当前TCP连接的控制块arg:需要传递给回调…

    2025年7月16日
    9
  • AVC1与H264的区别

    AVC1与H264的区别今天上网时偶尔发现这个在我脑海里疑惑的问题的答案。H.264VideoTypesThefollowingmediasubtypesaredefinedforH.264video.SubtypeFOURCCDescri

    2022年6月17日
    49

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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