scrolltop

滚动穿透问题 滚动穿透是指在移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容。网上整理了解决方案，但有些还是存在一定的问题： https://gitlwz.github.io/2018/05/02/vue-move/ 设置overflow为hidden 1 2 3 4 5 6 .modal-open { &, body { overflow : hidden; height : 100% } } 即当弹出层弹出时在html上添加.modal-open,禁用 html 和 body 的滚动条,但实际用上就会发现： 由于 html 和 body的滚动条都被禁用，弹出层后页面的滚动位置会丢失，需要用 js 来计算原来滚动的位置，在弹出时保持滚动位置； js ֮ touchmove + preventDefault 1 2 3 modal.addEventListener( 'touchmove' , function (e) { e.preventDefault(); }, false ); 最后解决方案：position: fixed 1 2 3 4 body .modal-open { position : fixed; width : 100% ; } 这种方式同样当弹出层弹出时滚动条会丢失，所以还需要使用js来保存滚动条的位置

定义：移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动，这个叫 “滚动穿透” 在弹出层的 touchstart 事件中调用 preventDefault 这种方法不可取，至少有3个缺点： 如果弹出层本身是有滚动（条）的话，将会导致弹出层无法滚动，此时用这种方法无异于饮鸩止渴。 一个很常见的场景，点击弹出层，弹出层消失掉，此时也无法触发弹出层的点击回调事件。 弹出层内的任何事件都执行不了了。 此解决方案是解决方案1的升级版。 在弹出层的 touchmove （注意区别）事件中调用 preventDefault 这种解决办法没有了第一种解决办法的 2, 3 缺点。适用于弹出层本身有没有滚动（条）。 设置body{overflow:hidden;} 缺点：经测试，在PC上支持良好，但是在IOS端，跟没有设置是一样的，完全不起任何作用！。 这种解决方案适用于PC端。 设置 html,body{overflow:hidden;} 在PC和移动端都能禁止掉下层的滚动。 缺点： 滚动位置丢失！页面会回到顶部！ 页面的背景还是能够有滚的动的效果（这个我没遇到）。 可通过js来fix这个缺点，在弹出层出现时，记录页面的scrollTop，当弹出层消失时，把先前记录的scrollTop再次赋予页面。 此解决方案能够避免上述所有缺点。堪称完美。 （这个方案会导致主页面display

个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出现更是家常便饭，每次碰到都需要事先实验一番。为了下次开发提高效率。在这里一次性做个总结， 以用来判断元素是否在可视区域以及用原生js简单实现懒加载 。文末有个简单的懒加载实现的demo，有需要的可以看一下。 Ŀ¼ 工欲善其事，必先利其器。在判断元素是否在可视区域实现简单的原生懒加载前，我们先简单回顾下以下几个关键的概念。 ps： 如果你对这些概念已经比较熟悉了，可以直接跳到第五点查看关键代码示例。 1. 偏移量 偏移量(offset dimension),元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小( 注意，不包括外边距 )。通过下列4个属性可以取得元素的偏移量。 偏移量 概念 公式 offsetHeight 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的) 水平滚动条的高度、上边框高度和下边框高度。 offsetHeght = content + padding + border + scrollX offsetWidth 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂 直滚动条的宽度、左边框宽度和右边框宽度

　　<dic id='scrollTop'>返回顶部</div> <script> 　　$(function(){ 　　 $(function(){ 　 $(window).scroll(function(){ 　　　　if($(window.sctollTop()>150){ 　　　　 $("#scrollTop").fadeIn(1000); 　　}else{ 　　　　 $("#scrollTop").fadeOut(1000); } });　 }); 　 //返回顶部动作 　　$("#scrollTop").click(function(){ 　　　　$(body,html).animate({scrollTop:0},1000); 　　}); }); </script> 来源：博客园 作者： 链接：https://www.cnblogs.com/sjzgk/p/11611499.html

//点击导航铆钉到指定位置 goDetails ( index ) { this . current = index ; let height = Number ( this . $refs [ 'navleft' ]. offsetHeight ) // 导航的高度 let toTop = this . $refs . single [ index ]. offsetTop // index对应内容的高度 let total = index === 0 ? toTop - height - 10 : toTop - height + index - 15 　　　　　　　　　　 //减去导航的高度和margin-tbottom的高度为滚动高度 let distance = document . documentElement . scrollTop || document . body . scrollTop let step = total / 20 if ( total > distance ) { let newTotal = total - distance step = newTotal / 20 smoothDown () } else { let newTotal = distance - total step = newTotal / 20 smoothUp ()

<SCRIPT language=javascript type=text/javascript> function adv_close(){ document.getElementById("close").style.display="none"; document.getElementById("divAd").style.display="none"; } window.onload = function(){ var img1 = document.getElementById("divAd"); var top1 = img1.offsetTop; var left1 = img1.offsetLeft; var img2=document.getElementById("close"); var top2 = img2.offsetTop; var left2 = img2.offsetLeft; window.onscroll = function(){ img1.style.top = top1 + (document.documentElement.scrollTop || document.body.scrollTop) +"px"; img1.style.left = left1 + (document.documentElement.scrollLeft

LayuiAdmin 滚动条设置问题解决 今天在使用 LayuiAdmin(单页版)，发现通过： $ ( "html,body" ). animate ({ "scrollTop" : top }); 这种js代码，无法控制滚动条位置 找到官方单页版演示界面，f12，查看元素相应高度发现： 打开layuiadmin的layout.html页面 在主体内容部分，最内层的div上加上id,我们需要控制的滚动条，属于该div 在需要调节滚动条位置时，可以执行： document . getElementById ( 'scrolldiv' ). scrollTop = 100 ; //通过scrollTop设置滚动位置 位置根据自己需求而定 结束 来源：博客园 作者： 丿似锦 链接：https://www.cnblogs.com/zktww/p/11557593.html

　　解决方案: img{border:none;} 2.rgba不支持IE8 　　解决方案:可以用 opacity opacity:0.7; /* FF chrome safari opera */ filter:alpha(opacity:70); /* 用了ie滤镜,可以兼容ie */ 　但是,需要注意的是,opacity会影响里面元素的透明度 　　解决方案: display:inline-block; *display:inline; 　　解决方案:用css给body添加magin属性为0px body{margin:0;} 　　解决方案: div.content { 　　width : 400px ; //这个是错误的width(对于ie5来说是正确的），所有浏览器都读到了 　　voice-family : "\" } \""; //IE5.X/win忽略了"\"}\""后的内容 　　voice-family:inherit; 　　width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的 }　 div.content { 　　width : 300px !important ; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值 　　width(空格) /**/ : 400px ; /

本文转载于: 猿2048 网站☞ https://www.mk2048.com/blog/blog.php?id=haji2jaaaa offsetWidth / offsetHeight offsetWidth HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。 var offsetWidth = element.offsetWidth; offsetHeight HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。 通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。 对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 var offsetHeight = element.offsetHeight; offsetTop /

1.offset().top匹配元素相对于文档的偏移位置（） <body> <style type = "text/css" > body { border : 20px solid #CCC; margin : 10px ; padding : 40px ; background :# EEE ; } #test { width : 400px ; height : 200px ; padding : 40px ; background :# F60 ; border : 5px solid #888; } </style> <div id = "test" ></div> <script> var test = document . getElementById ( "test" ); test . innerHTML = "<p>Browser:" + navigator . userAgent + "</p>" + "<p>offsetWidth:" + test . offsetWidth + "</p>" + "<p>offsetHeight:" + test . offsetHeight + "</p>" + "<p>offsetLeft:" + test . offsetLeft + "</p>" + "<p>offsetTop:" + test .