一般禁止body滚动的做法就是设置overflow:hidden。但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用，然后我分析了我的写法，就是在body上加了一个class去定义属性，然后改成标签的定位，如body{overflow:hidden;}，这个实现是可以的，没有滚动条。再进一步分析，如果要用class去实现没有滚动条，如下代码设置：
不显示滚动条（css） ::-webkit-scrollbar { width: 0px; } 禁止页面滚动条（js） document.body.parentNode.style.overflowY = "hidden"; $("body").parent().css("overflow-y","hidden"); 启用浏览器滚动条（js） document.body.parentNode.style.overflowY = "auto"; $("body").parent().css("overflo
什么是内滚动布局呢？ 个人认为，内滚动布局就是主滚动条是在页面内部，而不是浏览器窗体上的布局。 故内滚动布局是相对传统的window窗体滚动而言的。
使用能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>能快速调用移动设备的的图库/文件。 这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。
不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。
demo： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author"
如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接 ,
弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是在蒙层出现的时候滚动页面，如果不加处理，蒙层底部的页面会开始滚动，实际上我们是不希望他进行滚动的，因此需要阻止这种行为。当弹出蒙层时禁止蒙层下的页面滚动，也可以称为滚动穿透的问题，文中介绍了一些常用的解决方案。
（现在大部分移动浏览器包括wp都支持viewport的width选项），这些meta标签在开发webapp时起到非常重要的作用，可以给用户提供更好的体验
当页面上的元素超过一屏后，想操作屏幕下方的元素，是不能直接定位到，会报元素不可见的。这时候需要借助滚动条来拖动屏幕，使被操作的元素显示在当前的屏幕上。滚动条是无法直接用定位工具来定位的。selenium 里面也没有直接的方法去控制滚动条，这时候只能借助 J 了，还好 selenium 提供了一个操作 js 的方法:execute_script()，可以直接执行 js 的脚本
本文介绍了在HTML元素中分别使用clientHeight、offsetHeight、scrollHeight、offsetTop和scrollTop这五个属性，并分析了它们之间的关系以及在出现滚动条时的作用。
在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下：
如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的 jQuery 插件比较不错的，有两个：jScrollPane 和 mCustomScrollbar。
//弹出框禁止滑动 Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面滑动 }
selenium并不是万能的，有时候页面上操作无法实现的，这时候就需要借助JS来完成了。
3.这里可以修改scrollTop 的值，来定位右侧滚动条的位置，0是最上面，10000是最底部。
在 H5 中，我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。这两种单位可以让页面元素的大小随着根元素（对于 REM）或视口宽度（对于 VW）的大小变化而变化，从而适应不同尺寸的屏幕。
jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。
前言 最近在写插件的过程中，需要使用 JS 判断是否有滚动条，搜了一下，大致方法都差不多，但都有些啰嗦，代码不够简洁。最终通过参考不同方法，写了一个比较简单的方法。在判断滚动条的同时也需要计算滚动条的
后台管理系统中比较常见的布局是左边菜单栏，右边tab切换栏，但是一般的tab组件不包含tab页过多的切换问题的，所以需要个性化实现，本文的实现方案是滑动鼠标滚轮绑定tab达到切换的效果，先上一个动态图看下效果
滚动条操作 浏览器滚动条并没有提供相应的操作方法。在这种情况下，就可以借助JavaScript也就是JS来控制浏览器的滚动条。 WebDriver提供了execute_script()方法来执行JavaScript代码。 js="window.scrollTo(100,450);" driver.execute_script(js) 当页面上的元素超过一屏后，想操作屏幕下方的元素，是不能直接定位到，会报元素不可见的。 这时候需要借助滚动条来拖动屏幕，使被操作的元素显示在当前的屏幕上。 滚动条是无法直接用定位工具来定位的。selenium里面也没有直接的方法去控制滚动条，这时候只能借助JS了，还好selenium提供了一个操作js的方法: execute_script()，可以直接执行js的脚本。 --scrollHeight 获取对象的滚动高度。 --scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 --scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 --scrollWidth 获取对象的滚动宽度。
selenium页面交互过程，操作中常见需要点击某个元素，但是页面看不到该元素，需要滑动滚动条，滑到可见处，在进行下一步的操作,那么UI自动化中我们就是使用到execute_script方法进行实现，首先简单介绍一下滑动滚动条的常见语法
我们在上面《页面分类》的项目中，对 tap 事件的处理使用的是 touch 事件处理的，因为如果使用 click 事件的话，总会有延时。
前几天有给大家分享一个svelte.js自定义网页版弹窗组件svelte-layer。今天再来分享一个最新基于svelte.js开发的网页虚拟美化滚动条组件svelte-scrollbar。
VScroll 一款基于vue2.x构建的虚拟替代系统原生滚动条组件。支持自定义是否原生滚动条、自动隐藏、滚动条大小及颜色等功能。拥有完美顺滑的滚动体验！
本文由 IMWeb 团队成员 erasermeng 首发于腾讯内部KM论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。 什么是滚动穿透 如图所示，有一层遮罩蒙层覆盖在body上时，当我们滚动遮罩层，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。 阻止冒泡？ 刚开始遇到这个问题的同学可能会联想到是不是由于事件冒泡到body上引起的，于是监听 scroll/touchmove事件，阻止事件冒泡。 事实上，这并没有什么卵用。 首先，一般而言滚动
最近项目中 老板需要 将聊天界面 的滚动条美化一下，所以主编海百了一波，发现一个样式和兼容性不错的滚动条插件 jQuery自定义滚动条样式插件mCustomScrollbar，基本可以满足大家的开发，官方也给出了相应的demo;大家可以看看
在做web自动化时，有些情况playwright的api无法完成以及无法应对，需要通过或者借助第三方手段比如js来完成实现，比如：去改变某些元素对象的属性或者进行一些特殊的操作，本文讲解playwright怎样来调用JavaScript完成特殊操作。
上传文件是每个做自动化测试同学都会遇到，而且可以说是面试必考的问题，标准控件我们一般用send_keys()就能完成上传， 但是我们的测试网站的上传控件一般为自己封装的，用传统的上传已经不好用了， 也就是说用selenium的APi已经无法完成上传操作了。那么下面，针对控件进行分类进行演示：
在做web自动化时，有些情况selenium的api无法完成，需要通过第三方手段比如js来完成实现，比如去改变某些元素对象的属性或者进行一些特殊的操作，本文将来讲解怎样来调用JavaScript完成特殊操作。
最近自己在自学vue2.0，然后就自己摸索做一个简单的后台管理系统，在做的过程中，总感觉不同浏览器自带的滚动条样式不统一，也很难看，所以就在网上找一些使用vue的滚动条插件。最开始用的是Easy-scroll插件，可是在使用过程中，发现一个问题——由于在开发过程中，需要经常打开开发者选项进行调试，可是只要一开启这个选项，Easy-scroll插件就会出现debugger断点，在网上也一直没找到怎么取消debugger。后来就找到了今天要说的这款插件：vue-happy-scroll。
这两天研究GPT，然后在写对话时，因为对话是js动态添加的，然后随着内容的增多，要想让滚动条跟随内容的增多往下滚动，所以需要添加一个滚动条监听，并且随着内容增多将滚动条自动往下滚动。
我们首先可以通过直接定位下拉框中的内容对应的元素，完成对下拉框元素的处理，我们也可以通过select类
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹。
如图： css宽度：1250 不包括滚动条宽度 用控制台箭头选取元素显示的左边的宽度：1250 不包含滚动条宽度 缩放浏览器右上角显示的宽度：1267 包含了滚动条宽度 再看下控制台： 由此可计算浏览器滚动条宽度为： window.innerWidth - $(window).width() window.innerWidth： 包含滚动条的宽度 $(window).width()： 不包含滚动条宽度 document相关的方法都不包含滚动条宽度 总结： 包含滚动条的只有两个: window
一般返回顶部都是直接用 JS 实现的，但是我不懂 JS ，写个 console.log 我都不会就不用说写返回顶部了。那就直接用回最原始的方法：锚点定位。 锚点定位其实很好用，但主要是太生硬了，点一下定位就瞬间冲过去了，没有任何过渡。很多人用JS来做返回顶部而不用 CSS 可能就是锚点定位的这个缺点。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157990.html原文链接：https://javaforall.cn
在Web开发中，实现流畅的滚动效果对于提升用户体验至关重要。为了实现这一目标，开发人员可以利用一系列的滚动方案。其中，请求动画帧（requestAnimationFrame，简称rAF）是一种常用的技术。rAF通过优化动画效果的渲染，可以避免卡顿和过度绘制的问题。此外，还有其他滚动方案如CSS动画、滚动事件监听等等，开发人员可以根据具体需求选择合适的方案。通过合理选择和应用这些滚动方案，我们可以提供更加流畅和优化的用户体验。
js实用方法记录-指不定哪天就会用到的js方法 常用或者不常用都有 判断是否在微信浏览器中 测试代码：isWeiXin()==false /** * 是否在微信中 */ function isWeixin() { return ( navigator.userAgent .toLowerCase() .indexOf('micromessenger') > -1 ) } 全角转半角 测试代码：wholetoHalf('ｈｅｌｌｏ'')=='hell
作者：matrix 被围观: 9,147 次 发布时间：2018-06-28 分类：零零星星 | 3 条评论 »
该文讲述了如何通过JavaScript判断滚动条是否停止滚动，从而解决在数据量较大情况下，频繁向后台发送请求计算数据，造成服务器和浏览器压力过大的问题。具体实现方法是：当滚动条滚动时，发起一个定期执行的方法，并记录一次当前滚动条到顶部的距离。在这个方法中，判断此时滚动条到顶部的距离是否和上次记录的相等，如果相等，那么说明停止滚动了，不相等则还在滚动。这种方法可以设置定时执行的时间，时间越短，响应的越及时，浏览器压力越大；时间越长，响应的越慢，浏览器压力越小。
插件 https://github.com/inuyaksa/jquery.nicescroll
一些属性和方法，在dom中没有规定如何确定页面中元素大小的情况下诞生。。。 1.偏移量（offset dimension） 测试代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>offset偏移量学习</title> 6 <meta name="author" content="郭菊锋/702004176@qq.com"/> 7
大家好，又见面了，我是你们的朋友全栈君。屏幕可见区域高（内容的可视高度，不包括边框，边距或滚动条）：document.body.clientHeight 正文内容高（整个元素的高度，包括带滚动条的隐蔽的地方）：document.body.scrollHeight 内容高+padding+边框：document.body.offsetHeight 滚动条已经滚动的高度：document.body.scrollTop
有些页面的内容不是打开页面时直接加载的，需要我们滚动页面，直到页面的位置显示在屏幕上时，才会去请求服务器，加载相关的内容，这就是我们常说的懒加载。还有就是在日常工作和学习中，经常会遇到我们的页面内容较多，一个屏幕范围无法完整展示内容，我们就需要滚动滚动条去到我们想要的地方，所以有时候我们就需要操作滚动条向下滚动的操作。其实前边的文章也提到过滚动条的操作，今天主要是将各种宏哥知道的方法进行一下汇总和总结，方便大家查找和学习。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
