jquery 怎样获取元素相对父元素的偏移(距离)说明:父元素有滚动条的!

jquery 怎样获取元素相对父元素的偏移(距离)说明:父元素有滚动条的!,第1张

元素的顶部与父元素的顶部(实际的顶部,不是滚动后的顶部)的距离是 offsetTop,而父元素滚动后的顶部与实际顶部的距离是 scrollTop,所以只要 元素offsetTop-父元素scrollTop,就是元素与父元素滚动后实际可见的那个顶部的距离

如果使用jquery的话,可以这样写:

$(window)bind("scroll", function(){ 

        var top = $(this)scrollTop(); // 当前窗口的滚动距离

  });

如果使用原生js,可以这样写(摘自网上的):

  获取<a href=">

前置条件:

div作为盒子限制高度,并设置overflow:auto。在内容超溢出时会出现滚动条(默认Y轴)

实现滚动条滚动到指定位置有两种情况:无效果 和 有动画效果

(1)无效果--直接使用scrollTop方法

//100为高度,单位px

$('box')scrollTop(100)

(2)有效果--使用animate方法

//100为高度,单位px;300为时间,单位ms

$('box')animate({scrollTop:100},300)

是点击定位的意思

点击ID为shang的元素,回到顶部

点击ID为comt的元素,回到ID为comments的位置,就是评论的位置

点击ID为xia的元素,回到底部

1、新建一个html文件。

2、为了更好区分,会创建两个按钮标签,然后给这两个按钮标签添加不同的id。

3、引入jquery文件(注:jquery的引入路径一定要正确)。

4、创建加载完成函数,然后创建一个点击按钮获取当前id的函数。

5、保存好html文件后使用浏览器打开,然后点击按钮即可看到点击的id。

6、页面所有代码,如有不懂可把所有代码复制到新建的html文件上,然后修改引入的jquery文件即可。

 jquery在scroll()事件里面,我想判断当前滚动条横向还纵向;

我开始用全局变量记录scrollTop的值来判断的,如果前后值没有变就是横向滚动了,

但是页面里有多个滚动条,就要多个全局变量来控制,该怎么判断呢?

scroll jquery 区分横向纵向滚动条

解决方法:

each一次设置选择器选中对象的scrollLeft/scrollTop就行了,然后绑定scroll事件,触发的时候获取scrollLeft/scrollTop和初始化的scrollLeft/scrollTop对比判断是横向还是纵向,同时更新对象存储的scrollLeft/scrollTop

<style>

c{height:120px;width:120px;overflow:auto;border:solid 1px black;margin-bottom:5px;}

</style>

<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>

<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>

<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>

<div class="c">111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111<br>1111111111111111111</div>

<script src="/js/jqueryjs"></script>

<script>

$('div')each(function(){$(this)data('slt',{sl:thisscrollLeft,st:thisscrollTop});})scroll(function(){

var sl=thisscrollLeft,st=thisscrollTop,d=$(this)data('slt');

if(sl!=dsl)alert('横向滚动');

if(st!=dst)alert('纵向滚动');

$(this)data('slt',{sl:sl,st:st});///

})

</script>

最近流行的 sogo云输入法, QQ云输入法,都用到了bookmarklet技术。

这篇文章主要介绍了jQuery中even选择器的定义和用法,较为详细的分析了event选择器的语法结构与具体用法,并以一个设置偶数行为蓝色字体的例子总结了其用法与功能特点,需要的朋友可以参考下

晚上有插件可以实现"jquery tab",但有点复杂了,我想写个最简单的,来实现"jquery tab"。而事实上确实很简练

这篇文章主要介绍了JQuery样式 *** 作、click事件以及索引值-选项卡应用,结合实例形式分析了jQuery动态修改css样式、事件响应以及选项卡相关 *** 作技巧,需要的朋友可以参考下

jQuery在遵循W3C规范的情况下,对事件的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断

主要是为了往后的项目中方便实现这类型的功能,在之前做问卷调查那个应用中,就用到这个来显示结果,但当时开发时并不用是插件的,一大堆代码,看也烦,用起来很麻烦

jquery动态添加option选项,还有动态删除的方法,大家参考使用吧

qTip2是一个灰常强大且精致的jQuery提示信息插件,是qTip的第2版,也是一个全新的版本,提供了丰富的功能及漂亮的外观,非常易于使用

$(document)scrollTop() 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离

$(document)scrollLeft() 这是获取水平滚动条的距离

看明白了吗??

你要获取顶端 只需要获取到scrollTop()==0的时候 就是顶端了

要获取底端 只要获取scrollTop()>=$(document)height()-$(window)height() 就可以知道已经滚动到底端了

$(document)height() //是获取整个页面的高度

$(window)height() //是获取当前 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的 根据英文应该也能理解吧

其实你可以自己做个实验就知道了

$(document)scroll(function(){

$("#lb")text($(document)scrollTop());

})

<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->

以上就是关于jquery 怎样获取元素相对父元素的偏移(距离)说明:父元素有滚动条的!全部的内容,包括:jquery 怎样获取元素相对父元素的偏移(距离)说明:父元素有滚动条的!、JS 判断鼠标滚轮滑动距离、如何通过JQuery将DIV的滚动条滚动到指定的位置等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9760092.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存