scrolltop

(document).height()、$(document).scrollTop()，有需要的朋友可以参考下。 jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用. 注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变jQuery(document).height()是不变的。 $(document).scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离 $(document).scrollLeft() 这是获取水平滚动条的距离 要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了 要获取底端 只要获取scrollTop()>=(document).height()−(window).height() 就可以知道已经滚动到底端了 height：指元素内容的高度 ，jQuery中的height()方法返回的就是这个高度。 clientHeight：内容高度+padding高度 ，jQuery中的innerHeight()方法返回的就是这个高度。 offsetHeight：内容高度+padding高度+ 边框宽度 ，jQuery中的outerHeight(

效果图：随着鼠标往下滚动，不断加载生成不同颜色 大小的图片 HTML <div id= "content" > <ul></ul> <ul></ul> <ul></ul> <ul></ul> </div> CSS * { margin : 0 ; padding : 0 ; } #content { width : 1000px ; border : 1px dashed black ; margin : 0 auto ; overflow : hidden ; } #content ul { width : 240px ; padding : 5px ; float : left ; list-style-type : none ; } #content li { background-color : yellow ; font-size : 20px ; color : white ; text-align : center ; margin-bottom : 5px ; } JS //随机[m,n]之间的整数 封装 function randomNumber(m, n) { return Math. floor ( Math. random ( ) * ( n - m + 1 ) + m ) ; } //随机颜色 封装 function randomColor() {

DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值， pading border margin width height client clientWidth 不要border clientHeight 不要border offset offsetTop offsetLeft offsetWidth 要border offsetHeight 要border scroll scrollTop scrollHeight scrollLeft scrollWidth 盒模型 生产环境一般使用 box-sizing: border-box, 效果： width == content.width + pading + border height == content.height + pading + border .antd-pro-pages-test-dom-index-box { box-sizing: border-box; width: 100px; height: 100px; padding: 5px; border-color: grey; border-style: solid; border-width: 5px; margin: 5px; } 滚动 <div class="container1"

https://www.jianshu.com/p/950c673bcff9 背景 路由跳转时进入新的页面，但位置却不在顶部，而是在上个页面浏览的位置，在每次进入新页面时，想让它定位在页面的顶部。 代码 方式一 main.js router.beforeEach((to, from, next) => { // chrome document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 // safari window.pageYOffset = 0 next() }) 每次点击分页的时候，页面也会停留在之前浏览的位置，在调完接口后也加入下面几行代码就好了。 // chrome document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 // safari window.pageYOffset = 0 方式二 router-index.js const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 return { x: 0, y: 0

需求：实时数据滚屏效果，数据5s请求一次 实现： 思路：分两种情况：1、数据无溢出，即没有滚动条效果时，不处理滚屏效果 2、数据有溢出，处理滚屏效果 方案： 关键词： scrollTop //当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。 offsetHeight : //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） scrollHeight //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同 具体参数了解参见 https://www.cnblogs.com/mycognos/p/9131180.html 代码： //方法 autoScroll ( ) { const element = document . getElementById ( "warningList" ) ; // 元素内容没有溢出时，不触发 if ( element . offsetHeight !== element . scrollHeight ) { if ( this . interval ) { clearInterval ( this . interval ) ; } element . scrollTop = this . scrollTop ; //重新赋值，初始值为0 this .

首先我们需要判断模态框是否已经被调用，这里使用bootstrap里提供的方法： // 监听点击事件，来触发页面是否滚动 // 定义两个函数，来禁止滚动和释放页面滚动 $ ( '.modal' ) . on ( 'show.bs.modal' , function ( e ) { stopScroll ( ) ; } ) $ ( '.modal' ) . on ( 'hidden.bs.modal' , function ( e ) { scrolling ( ) ; } ) /** * @method stopScroll 禁止页面滚动 * return 无 */ function stopScroll ( ) { // 定义一个函数来给body添加fixed属性 fixedBody ( ) ; // 为了兼容移动端，我们还需要做一下判断 var bodyWidth = $ ( 'body' ) . width ( ) ; // 并且给body添加modal-open类 $ ( 'body' ) . addClass ( 'modal-open' ) ; // 判断如果是移动端 if ( bodyWidth > 768 ) { // 移动端padding-right记得设置为17px. } } /** * @method scrolling 还原页面滚动 * return 无 */