首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

纯js。获取元素的宽度并在滚动中使用它

在纯JS中获取元素的宽度并在滚动中使用它,可以通过以下步骤实现:

  1. 使用document.querySelectordocument.getElementById等方法获取需要操作的元素。例如,假设我们要获取id为"myElement"的元素:
代码语言:txt
复制
var element = document.getElementById("myElement");
  1. 使用element.offsetWidth属性获取元素的宽度。offsetWidth返回元素的整体宽度,包括内容、内边距和边框的宽度。例如:
代码语言:txt
复制
var width = element.offsetWidth;
  1. 在滚动事件中使用获取到的宽度。可以通过window.addEventListener方法监听滚动事件,并在事件处理函数中使用获取到的宽度。例如:
代码语言:txt
复制
window.addEventListener("scroll", function() {
    // 在滚动中使用获取到的宽度
    console.log("元素宽度:" + width);
});

完整的代码示例:

代码语言:txt
复制
var element = document.getElementById("myElement");
var width = element.offsetWidth;

window.addEventListener("scroll", function() {
    console.log("元素宽度:" + width);
});

这样,当页面滚动时,控制台会输出元素的宽度。请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

原创插件:WordPress博客友好对话框+文章随机推荐滚动条插件(附代码版)

就进一步折腾了一下,目前这个 js 已实现以下多种功能: 一、功能描述 ①、能够取得访客搜索来路和搜索关键词,并在右下角滑出欢迎对话框; ?...修复在部分主题下滚动条不显示文字或错乱问题; 修复底部滚动文字在宽度变窄时会消失问题; 修改为当宽度小于 480px 底部滚动条自动隐藏; 新增宽度小于 720px 时,不会自动弹出欢迎框;  新增...Ver 1.24 版本更新说明: 修复了在 IE 下复制文字无法弹出版权提醒 BUG; 新增宽度小于 900px 时隐藏底部公告栏特性。...cookie 获取用户名乱码问题 2014.11.23:Ver 1.22 版本更新说明 ①、后台设置新增主题对话框功能开关,至此该插件所有功能都能灵活组合了; ②、修复了几个不影响功能小错误。...针对代码版(WordPress 插件版已自带底部手动呼出功能): ②、如果想和张戈博客一样,在右下角增加一个手动呼出对话框功能,你可以如下操作: i.

3.7K120

分享 10 个有用 Vue.js 自定义 Hook

因为它在许多项目中使用,并且使用 JavaScript 或任何框架构建它太容易了。 与 Vue 相同,只需几行代码即可构建它。...我们经常用它处理流行操作之一是用户在模式之外单击。 useOnClickOutside 对于这种情况是一个有用hook。 我们只需要一个 ref 元素、回调函数并将其绑定到窗口事件中。...,我们只需要使用参数 ref 元素和回调函数来调用它。...我认为它们构建和使用都很简单。 我只是为那些想要在 Vue.js 中使用这些钩子的人提供一些注释。 请记住删除要添加到窗口事件。...最后,在我文章中,我与您分享了10 个有用 Vue 自定义hook,我希望它们对您有所帮助。 Vue.js 是一个很棒框架,我希望你可以用它构建更多很棒东西。

37831
  • 动手练一练,手写一个价格对比、固定表头滚动表格

    虽然有不少相关插件提供了类似的功能,比如 ScrollMagic.js,但是今天实例,我们将用原生方式进行实现,当滚动滚动至表格位置,固定表头位置,表格内容查看完后,取消固定表头功能。...获取表格 offsetWidth 宽度 获取表格距离视口顶部距离(getBoundingClientRect().top) 获取表头 offsetHeight 高度 基于这些我们定义相关变量,...获取用户从视口顶部滚动距离(pageYOffset) 获取最后一部分内容区域距离窗口顶部高度(getBoundingClientRect().top) 检测滚动条是否滚动到表格区域。...如果滚动到表格区域,获取重置后表头宽度。 接下来我们来判断第三部分内容区域距离视口顶部高度是否大于表头高度。...小节 到此,我们一起完成了这个案例,通过本案例,我们学会了如何使用原生方式动态实现固定元素并在一定时机取消固定。

    3.2K31

    整理获取 viewport 和 element 尺寸和位置方法

    整理获取 viewport 和 element 尺寸和位置方法 ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅 视口页面或窗口位置和宽高 获取视口宽高 下面方法是包括滚动宽高,不支持 IE8...window.innerWidth window.innerHeight width + padding + border + 滚动条 另外 outerWidth 浏览器兼容差,可获取包括工具栏宽高...标准浏览器使用是 screenX/screenY,IE 中使是 screenLeft/screenTop window.screenLeft || window.screenX window.screenTop.../border-top-width 值,就是边框宽度 offsetWidth/offsetHeight 同样可以使用 offsetWidth/offsetHeight 来获取元素包括滚动条和边框尺寸...document.documentElement,返回是视口滚动区域宽度和视口宽度中较大那个 如果元素是 document.body,并且是在混杂模式下,那么返回是视口滚动区域宽度和视口宽度中较大那个

    1.3K20

    亲手打造属于你 React Hooks

    在我例子中,我将使用它与一个复制按钮组件,它接收我们代码片段代码。 要做到这一点,我们需要做就是向按钮添加一个onclick。并在返回一个名为handle函数时,将被请求代码复制为文本。...在你可以无限滚动应用中,比如微博,一旦用户点击页面底部,你就需要获取更多帖子。 让我们看看如何自己创建一个 usePageBottom钩子,用于类似的用例,比如创建无限滚动。...在这种情况下,我们可以为浏览器返回默认宽度和高度,例如,在一个对象内1200和800: // utils/useWindowSize.js import React from "react"; export...,调用它并在想要隐藏或显示某些元素地方使用宽度。...) ); setMobile(mobile); }, []); return { isMobile }; } 结果 回到登录页,我们可以执行钩子,并从解构对象中获得该属性,并在需要地方使用它

    10.1K60

    移动端H5坑位指南

    CSS方向 自动适应布局 针对移动端,笔者通常会结合JS依据屏幕宽度与设计图宽度比例动态声明font-size,以rem为长度单位声明所有节点几何属性...在苹果系统上非元素滚动操作可能会存在卡顿,但安卓系统不会出现该情况。...在一个滚动容器里,打开弹窗就隐藏滚动条,关闭弹窗就显示滚动条,来回操作会让屏幕抖动起来。提前声明滚动容器padding-right为滚动宽度,就能有效消除这个不良影响。...每个移动端浏览器滚动宽度都有可能不一致,甚至不一定占位置,通过以下方式能间接计算出滚动宽度。100vw为视窗宽度,100%为滚动容器内容宽度,相减就是滚动宽度,妥妥动态计算。...在输入框聚焦时获取页面当前滚动条偏移量,在输入框失焦时赋值页面之前获取滚动条偏移量,这样就能间接还原页面滚动条偏移量解决页面高度坍塌。

    3.4K10

    react组件深度解读

    例如,组件在浏览器中渲染时可能会更改网页标题,或者可能会将浏览器视图滚动到某个位置。最重要是,React 组件可以拥有一个私有状态来保存在组件生命周期内可能发生变化数据。...因此,使用 JSX 可以完成任何事情都可以通过 JS 完成。...我们不是在写 HTML,而实在使用 JS 扩展来创建 React 元素(实际上是 JS 对象)函数调用。...props 重用它:在函数式编程中,我们有函数概念。...如果我们给函数相同输入,我们将始终获得相同输出。如果 React 组件不依赖于其定义之外任何内容,我们也可以将该组件标记为组件。组件在没有任何问题情况下更有可能被重用。

    5.6K20

    react组件用法深度分析

    例如,组件在浏览器中渲染时可能会更改网页标题,或者可能会将浏览器视图滚动到某个位置。最重要是,React 组件可以拥有一个私有状态来保存在组件生命周期内可能发生变化数据。...因此,使用 JSX 可以完成任何事情都可以通过 JS 完成。...我们不是在写 HTML,而实在使用 JS 扩展来创建 React 元素(实际上是 JS 对象)函数调用。...props 重用它:在函数式编程中,我们有函数概念。...如果我们给函数相同输入,我们将始终获得相同输出。如果 React 组件不依赖于其定义之外任何内容,我们也可以将该组件标记为组件。组件在没有任何问题情况下更有可能被重用。

    5.4K20

    QQ空间缓存图片_QQ空间原图

    还是 先拿一个压缩图片做占位,在鼠标移入或点击时放大预览? 今天偶然打开PC端QQ空间时,我发现了一种似乎更好方式 —— 鼠标移入时在范围内上下滚动图片预览,移出时停止滚动。...这是用来获取图片原始高度(同系还有 image.naturalWidth ,你可以用它来确定包裹元素最大/最小宽度); dom.offsetTop :offset系API,用来获取dom元素和离它最近元素顶部距离...、顶部、右侧、底部)位置; dom.scrollHeight :scroll系API,用来获取元素真实高度(同系还有scrollWidth/scrollLeft/scrollTop ),一般不会用它来作用于图片上...) 相对两个 outerWidth 和 outerHeight ,用于获取加上工具条与滚动条窗口宽度与高度; 顺便说一句,像 img.getBoundingClientRect().top...、img.offsetTop 这些都是 只读 值,所以不要妄想用它们来改变元素位置!

    6.3K20

    容易被忽略5个HTML技巧

    延迟加载可防止设备第一时间加载屏幕上尚不需要图像。但是,当你向下滚动或靠近图像时,图像就会开始加载。 换句话说,当用户滚动时才加载图像,让图像变为可见,否则就不加载。...这可以通过 HTML 轻松实现。 你所要做就是将 loading= "lazy"属性添加到你图像文件中。...添加属性后,你图片元素应如下所示: 使用谷歌 Lighthouse...输入建议 尝试搜索什么事物时获取有用关联建议确实会很有帮助。 如今,输入建议和自动完成功能相当流行,你一定已经在谷歌和 Facebook 等网站上注意到它们了。...值得注意是,尽管谷歌声称将这种形式重定向与其他重定向一样对待,但除非确实需要,否则使用这种类型重定向是不明智。 因此应该只在某些情况下才使用它,例如在长时间不活动后重定向页面。

    1.2K10

    中高级前端必须注意40条移动端H5坑位指南 | 网易三年实践

    CSS方向 自动适应布局 针对移动端,笔者通常会结合JS依据屏幕宽度与设计图宽度比例动态声明font-size,以rem为长度单位声明所有节点几何属性...在一个滚动容器里,打开弹窗就隐藏滚动条,关闭弹窗就显示滚动条,来回操作会让屏幕抖动起来。提前声明滚动容器padding-right为滚动宽度,就能有效消除这个不良影响。...每个移动端浏览器滚动宽度都有可能不一致,甚至不一定占位置,通过以下方式能间接计算出滚动宽度。100vw为视窗宽度,100%为滚动容器内容宽度,相减就是滚动宽度,妥妥动态计算。...在输入框聚焦时获取页面当前滚动条偏移量,在输入框失焦时赋值页面之前获取滚动条偏移量,这样就能间接还原页面滚动条偏移量解决页面高度坍塌。...该函数就是scrollIntoView,它会滚动目标元素父容器使之对用户可见,简单概括就是相对视窗让容器滚动到目标元素位置。它有三个可选参数能让scrollIntoView滚动起来更优雅。

    4.3K22

    JavaScript(进阶)

    now() 可以获取当前代码执行时时间戳 ---- # Math Math属于一个工具类,它不需要我们创建对象,它里边封装了属性运算相关常量和方法 我们可以直接使用它来进行数学运算相关操作 方法...,一般传null 例子: //获取元素宽度 getComputedStyle(box , null)["width"]; 1 2 复制 IE8 使用currentStyle 语法: 元素.currentStyle...元素可见宽度,指元素内容区和内边距宽度 offsetHeight 整个元素高度,包括内容区、内边距、边框 offfsetWidth 整个元素宽度,包括内容区、内边距、边框 offsetParent...水平偏移量 offsetTop垂直偏移量 scrollHeight,scrollWidth 获取元素滚动区域高度和宽度 scrollTop,scrollLeft 获取元素垂直和水平滚动滚动距离...向下滚 -120 //wheelDelta这个值我们不看大小,只看正负 //wheelDelta这个属性火狐中不支持 //在火狐中使用event.detail来获取滚动方向 //向上滚

    1.5K20

    Vue.js开发移动端经验总结

    一般我们将根元素htmlfont-size设置为宽度1/10,不同设备宽度不同,但是同样数值rem比例与设备宽度比例是一致。...它作用是:position:fixed元素将相对于屏幕视口(viewport)位置来指定其位置。并且元素位置在屏幕滚动时不会改变。...iOS弹出键盘;软键盘唤起后,页面的 fixed元素将失效(iOS认为用户更希望元素随着滚动而移动,也就是变成了 absolute定位),既然变成了absolute,所以当页面超过一屏且滚动时,失效...fixed 元素就会跟随滚动了。...常用插件 better-scroll是一个为移动端各种滚动场景提供丝滑滚动效果插件,如果在vue中使用可以参考作者文章当 better-scroll 遇见 Vue。

    4.3K10

    5 种瀑布流场景实现原理解析

    5 种场景分别是: 瀑布流 特点 纵向+高度排序 CSS 多列实现,是最简单瀑布流写法 纵向+高度排序+根据宽度自适应列数 通过 JS 根据屏幕宽度计算列数,在 web 端更加灵活展示瀑布流 横向... CSS 弹性布局实现,是最简单横向瀑布流写法 横向+高度排序 横向+高度排序瀑布流,需要通过 JS 计算每一列高度,损耗性能,但是可以避免某列特别长情况,体验更好 横向+高度排序+根据宽度自适应列数...需要通过 JS 计算每一列高度,并根据屏幕宽度计算列数,损耗性能,但是可以避免某列特别长情况,并且可以在 web 端更加灵活展示瀑布流,体验更好,是 5 种瀑布流中用户体验最好 我已经将这 5...二、介绍— 瀑布流,是比较流行一种网站页面布局[1],视觉表现为参差不齐多栏布局,随着页面滚动条[2]向下滚动,这种布局还会不断加载数据块[3]并附加至当前尾部。...:是 column-rule-* 所有属性简写; column-span:指定元素跨越多少列; column-width:指定了列宽度

    4.4K31

    alert弹窗样式自定义-Vue.js开发移动端经验总结

    UI出图时候一般是有一个固定宽度,而我们实际移动端设备宽度却都不太一样,但是如果页面元素缩放比例和页面宽度缩放比例一致,在不同尺寸设备下我们网页效果也将会是一致。   ...一般我们将根元素htmlfont-size设置为宽度1/10,不同设备宽度不同,但是同样数值rem比例与设备宽度比例是一致。...并且元素位置在屏幕滚动时不会改变。但是,在许多特定场合,:fixed表现与我们想象大相径庭。   ...iOS弹出键盘;软键盘唤起后,页面的 fixed元素将失效(iOS认为用户更希望元素随着滚动而移动,也就是变成了 定位),既然变成了,所以当页面超过一屏且滚动时,失效 fixed 元素就会跟随滚动了...常用插件   better-scroll是一个为移动端各种滚动场景提供丝滑滚动效果插件,如果在vue中使用可以参考作者文章当 better-scroll 遇见 Vue。

    3.3K40

    CSS奇淫技巧

    三角形要素是: 将一个元素width和heigth都设置为0 设置较粗边框 将其中三个边框颜色设置为透明 还可以为相邻边框设置不同边框宽度来改变三角形角度。...(padding-bottom和margin-bottom抵消) 当它里面的任 一列高度增加了,则父容器高度被撑到里面最高那列高度 其他比这列矮列会用它padding-bottom补偿这部分高度差...当按百分比设定一个元素宽度时,它是相对于父容器宽度计算。...最先声明阴影在最上面。 将偏移和模糊半径都设置为0,才会形成边缘清晰元素四周边框。 将各个阴影扩展半径设置为不同长度。...这样的话在我们向下滑动页面时,容器及其内容是向上滚动,但其背景图片却是固定,造成一种视差滚动效果。

    2.7K120

    (Demo分享)利用原生JavaScript-ScrollLeft-实现做轮播广告通知

    css样式函数,来获取conBegin宽度 var conBegin_width = getCss(conBegin,'width'); var timer = window.setInterval...// scrollLeft属性可以返回或者设置元素内容向左滚动尺寸。 // 也就是被元素左侧所遮挡尺寸,或者说滚动条向右滚动距离。...// 此属性相当有用,比如可以用来制作水平无缝滚动效果 // 简单了说:元素会从scrollLeft位置显示该元素内容。...,每执行一次定时就距离加1,就形成了文字滚动效果 wrap.scrollLeft ++; // 如果是wrap元素显示内容与该元素实际内容距离。...JS获取CSS样式方法,第一个写需要获取元素,第二个获取属性,第三个参数需要更改样式 function getCss(obj,attr,value){ var getStyle

    1.8K10

    vue移动端开发总结

    一般我们将根元素htmlfont-size设置为宽度1/10,不同设备宽度不同,但是同样数值rem比例与设备宽度比例是一致。...它作用是: position:fixed元素将相对于屏幕视口(viewport)位置来指定其位置。并且元素位置在屏幕滚动时不会改变。...iOS弹出键盘;软键盘唤起后,页面的 fixed元素将失效(iOS认为用户更希望元素随着滚动而移动,也就是变成了 absolute 定位),既然变成了absolute,所以当页面超过一屏且滚动时,失效...fixed 元素就会跟随滚动了。...常用插件 better-scroll(https://better-scroll.github.io/docs/en-US/)是一个为移动端各种滚动场景提供丝滑滚动效果插件,如果在vue中使用可以参考作者文章当

    4.1K30
    领券