×

jquery滚动条

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

admin admin 发表于2022-09-04 15:39:45 浏览195 评论0

抢沙发发表评论

本文目录

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实现将div中滚动条滚动到指定位置的方法


本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考，具体如下：
一、Js代码：
onload
=
function
()
{
//初始化
scrollToLocation();
};
function
scrollToLocation()
{
var
mainContainer
=
$(’#thisMainPanel’),
scrollToContainer
=
mainContainer.find(’.son-panel:last’);//滚动到《div
id=“thisMainPanel“》中类名为son-panel的最后一个div处
//scrollToContainer
=
mainContainer.find(’.son-panel:eq(5)’);//滚动到《div
id=“thisMainPanel“》中类名为son-panel的第六个处
//非动画效果
//mainContainer.scrollTop(
//
scrollToContainer.offset().top
-
mainContainer.offset().top
+
mainContainer.scrollTop()
//);
//动画效果
mainContainer.animate({
scrollTop:
scrollToContainer.offset().top
-
mainContainer.offset().top
+
mainContainer.scrollTop()
},
2000);//2秒滑动到指定位置
}
二、Html代码：
《div
id=“thisMainPanel“
style=“height:200px;overflow-y:
scroll;border:1px
solid
#f3f3f3;“》
《div
class=“son-panel“》我是类容区域-1《/div》
《div
class=“son-panel“》我是类容区域-2《/div》
《div
class=“son-panel“》我是类容区域-3《/div》
《div
class=“son-panel“》我是类容区域-4《/div》
《div
class=“son-panel“
style=“height:160px;“》我是类容区域-5《/div》
《div
class=“son-panel“》我是类容区域-6《/div》
《div
class=“son-panel“》我是类容区域-7《/div》
《div
class=“son-panel“》我是类容区域-8《/div》
《/div》
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jQuery
form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
-jquery滚动条

JS或者Jquery如何取得横向和纵向滚动条的最大可以滚动的值


需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的《script》标签，输入jquery代码：

$(’body’).append(’height: ’ + $(document).height() + ’《br/》’);

$(’body’).append(’width: ’ + $(document).width());

3、浏览器运行index.html页面，此时会打印出界面最大可以滚动的文档宽度和文档高度。


通过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滚动条

jquery获取滚动条高度和位置


1、jquery获取滚动条高度使用.scrollTop()方法。

2、首先我们新建一个长篇的HTML文档。

3、然后我们编辑JS脚本，使用.scroll()方法，监听网页滚动。

4、然后我们使用.scrollTop()获取垂直滚动距离。

5、然后保存文件，查看获取的垂直滚动距离即可。


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滚动条

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


jquery让滚动条滚动到最底部的方法：
在ready方法里写 $(’#content’).scrollTop( $(’#content’).scrollHeight );

利用div+jquery自定义滚动条样式的2种方法


可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条，但是大家都知道自带的不好看。接下来就是重点了，如何修改滚动条的样式呢？感兴趣的朋友可以了解下本文

最近做项目中有一个模块是用于实时监控的，左边有个菜单栏用于显示所有的设备，那当然是从数据库中动态获取的了，右边是个iframe用于显示监控画面。
本来这个功能并不复杂，左边的菜单项是利用dtree.js来实现的，可时当功能实现完成之后，却发现一个问题，就是左边菜单栏中的设备名有的会很长，会
超出了div的长度，准确说是左边iframe的宽度和长度不够。那么，这时就必须要利用滚动条了，可以设置左边菜单项div的overflow-
x:auto;overlfow-y:auto;这样就会自动生成了滚动条，但是大家都知道自带的不好看。接下来就是重点了，如何修改滚动条的样式呢？
经过从网上的不断搜索，发现有两种方法：
第一种方法：利用CSS提供的样式，一共是8种属性吧，在这里不做详细介绍，网上很多这方面的资料。
第二种方法：自己写一个新的滚动条，即不用div自带的滚动条。这样想要什么样的效果就有什么样的效果。具体实现，在网上搜了很多，可以发现基本上只有竖向滚动条，而没有横向滚动条，无奈之下，自己利用jquery写另一个滚动条，当然也借鉴了只有竖向滚动条的程序。
说
一下具体实现思路：目标div
即需要生成滚动条的div，里面嵌套了3个div，分别是用于显示内容的div_content，显示竖向滚动条的div_H,显示横向滚动条的
div_W,具体布局就是按照自带滚动条的div的布局一样，然后显示滚动条的div即div_H和div_W有各自包含了3个div，即左右箭头2个，
滚动条1个。具体代码如下：
复制代码
代码如下:
if($(_self).children(“.jscroll-c“).height()==null){
//添加内容框(div)
$(_self).wrapInner(“《div
class=’jscroll-c’
style=’top:0px;z-index:9999;zoom:1;position:relative;’》《/div》“);
//添加竖向滚动条
$(_self).append(“《div
class=’jscroll-e’
unselectable=’on’
style=’height:97.5%;top:0px;right:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;’》《div
class=’jscroll-u’
style=’position:absolute;top:0px;width:100%;right:0;background:blue;overflow:hidden’》《/div》《div
class=’jscroll-h’
unselectable=’on’
style=’background:green;position:absolute;left:0;-moz-user-select:none;border:1px
solid’》《/div》《div
class=’jscroll-d’
style=’position:absolute;bottom:0px;width:100%;left:0;background:blue;overflow:hidden’》《/div》《/div》“);
//添加横向滚动条
$(_self).append(“《div
class=’jscroll-s’
unselectable=’on’
style=’width:180px;bottom:0px;left:0;-moz-user-select:none;position:absolute;overflow:hidden;z-index:10000;’》《div
class=’jscroll-l’
style=’position:absolute;bottom:0px;height:100%;left:0;background:blue;overflow:hidden’》《/div》《div
class=’jscroll-g’
unselectable=’on’
style=’height:100%;background:green;position:absolute;left:0;-moz-user-select:none;border:1px
solid’》《/div》《div
class=’jscroll-r’
style=’position:absolute;bottom:0px;height:100%;right:0;background:blue;overflow:hidden’》《/div》《/div》“);
}
然后无非就是一些判断，div的内容是否超过了div的范围，监听事件的添加。具体代码可见我的下载资源；
-jquery滚动条

jquery如何获取元素的滚动条高度等实现代码


主要功能：
获取浏览器显示区域（可视区域）的高度
：
$(window).height();
获取浏览器显示区域（可视区域）的宽度
：
$(window).width();
获取页面的文档高度
$(document).height();
获取页面的文档宽度
：
$(document).width();
浏览器当前窗口文档body的高度：
$(document.body).height();
浏览器当前窗口文档body的宽度：
$(document.body).width();
获取滚动条到顶部的垂直高度
(即网页被卷上去的高度)
$(document).scrollTop();
获取滚动条到左边的垂直宽度
：
$(document).scrollLeft();
获取或设置元素的宽度：
$(obj).width();
获取或设置元素的高度：
$(obj).height();
某个元素的上边界到body最顶部的距离：obj.offset().top;（在元素的包含元素不含滚动条的情况下）
某个元素的左边界到body最左边的距离：obj.offset().left;（在元素的包含元素不含滚动条的情况下）
返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offset().top（在元素的包含元素含滚动条的情况下）
返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offset().left（在元素的包含元素含滚动条的情况下）
//返回当前页面高度
function
pageHeight(){
if($.browser.msie){
return
document.compatMode
==
“CSS1Compat“?
document.documentElement.clientHeight
:
document.body.clientHeight;
}else{
return
self.innerHeight;
}
};
//返回当前页面宽度
function
pageWidth(){
if($.browser.msie){
return
document.compatMode
==
“CSS1Compat“?
document.documentElement.clientWidth
:
document.body.clientWidth;
}else{
return
self.innerWidth;
}
};
以下是其它网友的补充：
获取浏览器显示区域的高度
：
$(window).height();
获取浏览器显示区域的宽度
：$(window).width();
获取页面的文档高度
：$(document).height();
获取页面的文档宽度
：$(document).width();
获取滚动条到顶部的垂直高度
：$(document).scrollTop();
获取滚动条到左边的垂直宽度
：$(document).scrollLeft();
计算元素位置和偏移量：$(id).offset();
offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含
top和left两个属性。
offset(options,
results)
options.relativeTo　　指定相对计
算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll　　是否把
滚动条计算在内，默认TRUE
options.padding　　是否把padding计算在内，默认false
options.margin
是否把margin计算在内，默认true
options.border　　是否把边框计算在内，默认true
子页面控制父页面：
parent.document.documentElement.scrollTop;
parent.document.documentElement.clientHeight;
-jquery滚动条