js window.scroll 怎么判断滚动到底部

JavaScript076

js window.scroll 怎么判断滚动到底部,第1张

若要想判断js window.scroll是否滚动到底部,需要用的三个属性值,它们分别是:

scrollTop、clientHeight和scrollHeight;

1、scrollTop为滚动条在Y轴上的滚动距离。

2、clientHeight为内容可视区域的高度。

3、scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

so,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

有两种方法。

1、通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。

示例:

<body>

//d1是外层div,带滚动条

<div id='d1' style='height:200pxwidth:100pxoverflow:autobackground:blue'>

<div style='height:500pxwidth:500pxbackground:yellow'>2222</div>

</div>

</body>

<script>

document.getElementById('d1').scrollTop=100//通过scrollTop设置滚动到100位置

document.getElementById('d1').scrollLeft=200//通过scrollTop设置滚动到200位置

</script>

2、用html锚点

如下:

<a href="#test">aaaaa</a>

<div id="test">lalallalalalala</div>

扩展资料

1、JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

(1)、是一种解释性脚本语言(代码不进行预编译)。

(2)、主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。

(3)、可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

(4)、跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

2、JavaScript脚本语言具有以下特点:

(1)、脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)、基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)、简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)、动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)、跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

参考资料:百度百科:JavaScript

让DIV的滚动条自动滚动到最底部的3种方法:

方法一:

使用锚标记要滚动到的位置,然后通过click方法模拟点击滚动到锚所在位置:

<script language="javascript1.2" type="text/javascript">

function onGetMessage(context)

{

msg.innerHTML+=context

msg_end.click()

}

</script>

<div style="width:500pxoverflow:auto">

<div id="msg" style="overflow:hiddenwidth:480px"></div>

<div><a id="msg_end" name="1" href="#1"> </a></div>

</div>

方法二:

利用DIV的scrollIntoView方法,将最底端滚动到可视位置:

language="javascript1.2"

type="text/javascript">

function onGetMessage(context)

{

msg.innerHTML+=context

msg_end.scrollIntoView()

}

</script>

<div style="width:500pxoverflow:auto">

<div id="msg" style="overflow:hiddenwidth:480px"></div>

<div id="msg_end" style="height:0px overflow:hidden"></div>

</div>

方法三:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html charset=utf-8" />

<meta name="keywords" content="滚动条, scrollbar, 页面底部, 聊天窗口, " />

<meta name="description" content="有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最 下方,如果要看到最下方的内容,就必须保证滚动条保持在最底部。" />

<title>将滚动条(scrollbar)保持在最底部的方法 - 滚动条, scrollbar, 页面底部, 聊天窗口, </title>

</head>

<body>

<div id="example">

<h3 id="example_title">将滚动条(scrollbar)保持在最底部的方法</h3>

<div id="example_main">

<!--************************************* 实例代码开始 *************************************-->

<script type="text/javascript">

function add()

{

var now = new Date()

var div = document.getElementById('scrolldIV')

div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />'

div.scrollTop = div.scrollHeight

}

</script>

<span class="notice">请点击“插入一行”按钮,插入最新信息,当出现滚动条时,滚动条将自动保持在底部。</span><br />

 

<div id="scrolldIV" style="overflow:auto height: 100px width: 400px border: 1px solid #999">

</div>

<input type="button" value="插入一行" onclick="add()">

<!--************************************* 实例代码结束 *************************************-->

</div>

</div>

</body>

</html>