- 2024-06-20需求：添加item后自动滚动到容器底部(如果有滚动条)
大巧不工,用了原生js<template><divclass="app-container"><divclass="box"><divv-for="(item,index)incount":key="index"class="item">{{item}}</div>
- 2024-03-21clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
一、定义document.body.clientHeight网页可见区域高度document.body.scrollHeight网页正文全文高document.body.offsetHeight网页可见区域高（包括边线的高）document.body.scrollTop网页被卷去的高window.screen.height屏幕分辨率高
- 2024-03-20前端-全屏功能
constisFullScreen=ref(false)//全屏constfullScrenn=()=>{letelement=document.documentElementif(element.requestFullscreen){ element.requestFullscreen()}elseif(element.webkitRequestFullScreen){ element.webkitRequestFullScreen()
- 2024-01-11div滚动加载数据
<template><divstyle="border:1pxsolid#ccc;max-height:280px;width:100%;overflow-y:auto;"v-if="recordList.length>0"@scroll="onScroll"><divv-for="(item,index)inrecordList":key=
- 2023-12-18可视化大屏：autofit.js 一行搞定自适应
可视化大屏：autofit.js一行搞定自适应king 关注她 12人赞同了该文章可视化大屏适配/自适应现状可视化大屏的适配是一个老生常谈的话题了，现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢？因为目前市面上适配工具每一个都无
- 2023-11-27JS 判断是否有滚动条和滚动条滚到底部
判断是否有滚动条constscrollDom=document.getElementById('滚动元素id')if(!scrollDom)returnif(scrollDom.clientHeight===scrollDom.scrollHeight){//没有滚动条}判断滚动条滚到底部constscrollDom=document.getElementById('滚动元素id')if(!scr
- 2023-11-21js实现自动滚动以及分页数据请求，解决不同手机scrollTop++兼容问题
创作不易，主要是为了分享，希望能帮到碰到类似问题的朋友，有帮助的话就给点个赞吧。 需求：公司需要实现一份合同的自动滚动预览，以及分页请求下一页数据继续滚动，直到所有合同加载完成就取消滚动。问题：不同手机使用scrollTop++,会出现+1出现小数点，整数的情况，导致请求下一页的数据无法
- 2023-08-25vue3 监听容器滚动到底部
在容器里面添加@scroll事件<template><div@scroll="scrolling"id="content"><pv-for="iinArray.from({length:30},(v,i)=>i)">{{i}}</p></div><divv-if="bottom"
- 2023-07-18缕析条分Scroll属性
最近有项目需要使用js原生开发滑动组件，频繁要用到dom元素的各种属性，其中以各种类型的height和top属性居多，名字相近，含义也很容易搞混。因此特地总结归纳了一下常用的知识点，在文末我们来挑战实现一个简易的移动端Scroll组件。要理解height和top，要从盒模型开始说起，首先我们来认识一
- 2023-06-30原生JS滚动条触底
/console.log("UL的高度",main.clientHeight);//console.log("所有的LI的高度",main.scrollHeight);//console.log("可以滚动的距离",main.scrollHeight-main.clientHeight);//console.log("main.scrollTop",main.scrollTop);if(main.scr
- 2023-06-09CSS: offsetWidth offsetHeight clientWidth clientHeight scrollWidth scrollHeight
<!DOCTYPEhtml><htmllang="en-US"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"cont
- 2023-06-01vue3实现元素监听滚动事件
//useScroll.jsimport{debounce}from'@/common/util.js'exportdefaultfunctionuseScroll(elRef){console.log('########3useScroll',elRef.value)letel=windowconstisReachBottom=ref(false)constclientHeight=ref(0
- 2023-05-17这款全自动自适应工具你用过了吗？autofit.js请求加入你的战场！
前段时间做了一个自适应的小工具（autofit.js）经过一段时间的试用，同学们发现了工具存在的一些问题，我自己也发现了一些，这篇文章是针对这些问题撰写的。autofit.jsautofit.js是一款可以让你的项目一键自适应的工具。autofit.jsnpm主页autofit.jsgithub主页安装npmiautof
- 2023-05-09offsetHeight、clientHeight、scrollHeight的区别
1.盒子模型介绍这三个属性之前先来了解一下CSS盒子模型。盒子模型顾名思义就是盒子的意思，盒子里面可以装很多东西。组成一个完整的盒子主要包括下面几个部分：widthheightpaddingbordermarginbox-sizing（用来区别正常盒模型和怪异盒子模型）盒子模型又分为了正常盒模型和
- 2023-03-15clientHeight、clientWidth innerHeight innerWidth
https://www.runoob.com/jsref/prop-win-innerheight-innerwidth.htmlinnerHeight返回窗口的文档显示区的高度，如果有垂直滚动条，也包括滚动条高度。innerWidth返回窗口
- 2023-03-07JavaScript 其他样式操作的属性
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:100px; height:100px; back
- 2023-02-08在线直播源码，js获取滚动条的位置
在线直播源码，js获取滚动条的位置一.获取当前页面滚动条纵坐标的位置 document.body.scrollTop与document.documentElement.scrollTop IE6/7/8/IE9及以上：可以使用d
- 2023-01-30图片懒加载
前言影响网页性能最主要的因素应该属图片资源了，现在一张图片动不动几兆，如果一张页面有很多图片（像电商类网站），等页面上的图片全部加载完毕再显示在浏览器上的话，用户可能早就
- 2023-01-12封装vue2自定义指令-滚动到底部加载更多
前置知识1.clientHeight：（1）含义：只读属性，表示元素的内部高度（元素可见高度），单位为像素。（2）从盒子模型角度看：包含padding，但不包含border,margin以及水平滚动条。（3）注意：内联元
- 2022-12-05html页面高度不同浏览器兼容性设置
页面需要嵌套在跨域的iframe中，而页面高度不固定，需要每个页面把自己的高度获得后，通过js通知iframe调整显示。而页面在获得自己的高度时，发现总是比预想的大。经过参考别人的博
- 2022-11-28识别视窗高度的工具函数
获取滚动条当前的位置exportconstgetScrollTop=()=>{ varscrollTop=0; if(document.documentElement&&document.documentElement.scrollTop){
- 2022-11-25再次详解clientHeight、offsetHeight、scrollHeight
关于clientHeight、offsetHeight、scrollHeightwindow.screen.availWidth返回当前屏幕宽度(空白空间)window.screen.availHeight返回当前屏幕高度(空白空间)window.s
- 2022-10-10【前端必会】适合首页的滚动过渡（CSS transition）
背景经常看到一些首页的过渡效果不错，闲来无事，实现个基本效果直接上代码<body><divid="1"class="blockbuild-in-scale-up"><h1>Hello1</h1></div><divid="2"c
- 2022-09-29element-ui el-table 高度自适应
element-ui el-table高度自适应<divref="searchHeader"class="div_searchsearch_title":class="{div_search_index:!isExpand}"><el-formref="dataForm":
- 2022-09-27offsetHeight clientHeight scrollHeight
offsetHeight:border+padding+content offsetLeft/offsetTop是元素外边距离父内边距的距离 ↑↑↑参照物由父级身上的position：absolute/fix