
现今的 chrome 浏览器,为了实现丝滑顺畅地滑动,活动时间直接执行而不再检测默认事件,这使得无法用 epreventDafult() 来阻止默认事件。
现在需要添加 {passive: false} 配置
$(document)addEventListener( 'scroll', fun, {passive: false} ) 把事件被动监听设置为 false 之后,就可以正常阻止默认事件了。
为了手动地使页面平滑滚动到某个高度,需要使用 $animate({scrollTop: val}) 。由于不同浏览器间的差异,绑定 scrollTop 的 DOM 元素是不一样的,比如
为了解决这个差异,我们需要把 animate 同时绑定在两个节点上。 $('html, body')animate()
$()position() ———— 基于父元素,从自身的外边框为点。
$()offset() ———— 基于父元素,从自身内容为点。
$(window)height()width() ———— 获取窗口宽高。
因为使用的是监听 touchstar 和 touchend 方法,所以该方法只适用于移动端。
主要的思路就是监听“触摸开始”和“触摸结束”两个事件,分别获取事件当前的触摸点坐标和文档滚动的值,进行对比判断“触摸是否有滑动”以及“文档是否有滚动(到底)”,来执行需要的方法。下面说说几个注意点:
js获取游戏控件方法如下:
//获取坐标位置
function getpos(e) {
var t=eoffsetTop;
var l=eoffsetLeft;
var height=eoffsetHeight;
while(e=eoffsetParent) {
t+=eoffsetTop;
l+=eoffsetLeft;
假设 obj 为某个 HTML 控件。
objoffsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
objoffsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
objoffsetWidth 指 obj 控件自身的宽度,整型,单位像素。
objoffsetHeight 指 obj 控件自身的高度,整型,单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。
“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,styletop 也是可以的,二者的区别是:
一、offsetTop 返回的是数字,而 styletop 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 styletop 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 styletop 返回的是空字符串。
offsetLeft 与 styleleft、offsetWidth 与 stylewidth、offsetHeight 与 styleheight 也是同样道理。
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中,FireFox差异如下:
IE60、FF106+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE50/55:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
scrolltop好像只针对IE系列的浏览器才有效
如果是新版的IE10以上的版本试着点击设置工具->“兼容性视图设置”将当前浏览的站点加入兼容列表试试 如果不行
以下方法,不一定都要用,可以一个一个去试。有时,仅第一个就管用了。
一 关闭浏览器,打开新版本360安全卫士的“系统修复”,扫描后,再点“一键修复” 。
再用360急救箱(360安全卫士的“功能大全”里有。若未安装360安全卫士,也可单另安装急救箱。)按步骤 *** 作:先“开始急救”;扫描完后,重启;再点“系统修复” (可以全选)――“立即修复”。 接着,点“DLL文件恢复”,添加系统检测时所得知丢失的DLL文件,再点“立即修复’。“修复网络”视情况而决定是否修复。完后,应重启。
二用360安全卫士的“清理插件”进行扫描,扫除恶意插件后,进行清理。完后应重启。
三用windows清理助手(从网上下载)。扫描后(若扫出东西,都勾并清理),再用故障修复(全选),然后在桌面点鼠标右键刷新。安全模式下效果好。
四用金山急救箱勾上“扩展扫描”,点扫描后,如果出现可以修复的项目,全选后,点“立即处理”,完后重启。
也可下载使用可牛系统急救箱。
强调------1修复中,杀软或360有提示时,请点允许。 *** 作中如提示重启就重启下电脑。2效果不好时,看“注意”中的三点。 3 完后,效果不好的话,也可考虑系统还原一下(选好还原点)。
祝你成功 !
提问者评价
谢了
先来一张名气很大的图
看着实在是好晕,于是各种整理后手动画了一个:
发现主要分为几部分:
当定位时,position的移动的距离,
scrollHeight:文档总高度,可滚动总高度(包含元素本身,内外边距,边框)
scrollWidth:文档总宽度,可滚动总宽度(包含元素本身,内外边距,边框)
scrollTop:相对于滚动条顶部的偏移,指滚动条顶端与当前滚动条位置的距离
scrollLeft:相当于滚动与左端的偏移
clientHeight:可视区域高度(不包含边框,滚动条)
clientWidth:可视区域宽度
clientTop:内容区域相对于整个元素的左上角,当有边距时为边距的厚度,无边距时可以为0
clientLeft:内容区域相对于整个区域的左上角,有边距时为边距的宽度,可以为0
offsetHeight:获取自身元素(包含边距,滚动条)
offsetWidth:获取自身元素(包含边距,滚动条)
offsetTop:相对于最近定位祖元素的偏移,(祖元素必须是position,relative,absloute,fixed)
offsetLeft:同offsetTop
返回第一个祖定位元素,若父级元素无定位返回body,若父级元素已经定位返回相对应父级对应元素。
scrolltop是jQuery中的一个方法,它可以设置 <div> 元素中滚动条的垂直偏移量,基本的用法是:
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。
工具原料:jQuery、编辑器、浏览器
1、在一个有内容的div中是吸纳设置滚动条的偏移量和获取偏移量的值,代码如下:
<html><head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<script type="text/javascript">
$(document)ready(function(){
$("btn1")click(function(){
$("div")scrollTop(100);
});
$("btn2")click(function(){
alert($("div")scrollTop()+" px");
});
});
</script>
</head>
<body>
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text
</div>
<button class="btn1">把 scroll top offset 设置为 100px</button>
<br />
<button class="btn2">获得 scroll top offset</button>
</body>
</html>
2、运行的效果如下:
点击设置为100px后的效果:
点击获取值的效果:
以上就是关于难搞的滚动事件(滚动默认,scrollTop)全部的内容,包括:难搞的滚动事件(滚动默认,scrollTop)、js获取游戏控件怎么找、电脑桌面异常 关于脚本运行:“错误:无法获取未定义或null引用的属性“scrolltop””,如何破等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)