×

jquery滚动条

通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位?jquery如何让滚动条默认在最底部

admin admin 发表于2022-05-16 23:56:12 浏览138 评论0

抢沙发发表评论

通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位


这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位。
复制代码
代码如下:
var
container
=
$(’div’),
scrollTo
=
$(’#row_8’);
container.scrollTop(
scrollTo.offset().top
-
container.offset().top
+
container.scrollTop()
);
//
Or
you
can
animate
the
scrolling:
container.animate({
scrollTop:
scrollTo.offset().top
-
container.offset().top
+
container.scrollTop()
});​
不需要任何JQuery插件即可完成所需的效果,非常好用!

jquery如何让滚动条默认在最底部


使用如下代码可让滚动条默认在最底部:

$(document).ready(function(){  

$(“#submit“).click(function(){

$(“#info“).append(“admin:“+$(“#talk“).val()+“\n“);

$(“#info“).scrollTop($(“#info“).scrollHeight);

$(“#talk“).val(““);

});

});

jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。

1、可见高度:viewHeight,可以理解为打开见浏览器空白页见到的空白区域的高度。

2、内容高度:containHeight,这个就是我们关心的高度,它是内容的总高度,包括隐藏在滚动条下面的内容。

3、滚动的高度:scrollHeight,这个是滚动的高度,它是滚动条滚动了多少的意思。

代码解说:

nScrollTop + nDivHight 》= nScrollHight。

程序中,在外部div的scroll(滚动)事件中侦测和执行if判断语句,是非常消耗CPU资源的。用鼠标拖拉滚动条,只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头,事件触发的频率会低得多。所以滚动条的scroll事件要谨慎使用。-jquery滚动条


jquery怎么设置滚动条的位置


offset():

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

.offset()方法可以让我们重新设置元素的位置。这个元素的位置是相对于document对象的。如果对象原先的position样式属性是 static的话,会被改成relative来实现重定位。

position():

获取匹配元素相对父元素的偏移。

返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

/ Get *real* offsetParent
var offsetParent = this.offsetParent(),
// Get correct offsets
offset = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent.tagName) ? { top: 0, left: 0 } : offsetParent.offset();
// Subtract element margins
// note: when an element has margin: auto the offsetLeft and marginLeft
// are the same in Safari causing offset.left to incorrectly be 0
offset.top -= num( this, ’marginTop’ );
offset.left -= num( this, ’marginLeft’ );
// Add offsetParent borders
parentOffset.top += num( offsetParent, ’borderTopWidth’ );
parentOffset.left += num( offsetParent, ’borderLeftWidth’ );
// Subtract the two offsets
results = {
top: offset.top - parentOffset.top,
left: offset.left - parentOffset.left
};使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。

使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移

使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移
-jquery滚动条