当前位置: 代码迷 >> Web前端 >> 判断滚动条已经滚动毕竟部 方法收集
  详细解决方案

判断滚动条已经滚动毕竟部 方法收集

热度:395   发布时间:2012-10-27 10:42:26.0
判断滚动条已经滚动到底部 方法收集

1.window.onscroll=function()
{
//alert(document.body.clientHeight +" " + document.documentElement.clientHeight +"\n"+document.documentElement.scrollTop +" "+document.body.scrollTop);
if(Math.abs(document.body.clientHeight - document.documentElement.clientHeight) <= (document.documentElement.scrollTop || document.body.scrollTop)){
alert("滚到底部");
}
}

?

2.

<! 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 >
???
< title ></ title >
???
< script src ="../demo/jquery-1.3.2.min.js" type ="text/javascript" ></ script >
</ head >
< body style ="height:2800px;" >
*DIV开始固定在一个位置,当下拉条下拉的高度超过这个DIV 1px的时候,这个DIV变浮动*
< div id ="top" style ="position:fixed; top:50px; left:50px;" >
???
</ div >
< div id ="pan" style ="width:160px; height:300px; border:dashed 1px black; position:absolute; right:0px; top:300px;" >
???
</ div >
< script type ="text/javascript" >
??? $(document).ready(
function () {
??????? window.onscroll
= function () {
???????????
var t = $(document).scrollTop();
??????????? document.getElementById(
" top " ).innerHTML = t;

???????????
if (t > 301 ) {
???????????????
// 当滚动条下拉到一定位置(301)时,怎么怎么地。。。。???????????????
??????????????? $( " #pan " ).css({ " position " : " fixed " , " top " : " 0 " });
??????????? }
???????????
else {
??????????????? $(
" #pan " ).css({ " position " : " absolute " , " top " : " 300 " });
??????????? }

??????? }
??? });
</ script >
</ body >
</ html >

?

3.原理:做一个监听用的JS,监听对象为页面页面的所在位置,如果下标记和页面大小的高相等,就出发时间。

以上是基本原理。

< script >
???
if ( true ){
??????? jQuery(
function (){
??????????
var m = window.location.search.match( / p=(\d+) / );
??????????
var curPage = m ? parseInt(m[ 1 ]) : 1 ;
??????????
var loading = false ;

?????????? jQuery(
" #content " ).scroll( function (){
??????????????
if ( curPage >= 1 && ! loading && this .scrollHeight -
??????????????????????
this .scrollTop - this .offsetHeight < this .offsetHeight ) {
?????????????????? loading
= true ;
??????????????????
if (( 25 * curPage) < 79346 ) {
??????????????????????? DWRUtil.setValue(
" scrollStats " , 25 * (curPage + 1 ) + " of " + 79346 );
??????????????????? }
else {
??????????????????????? DWRUtil.setValue(
" scrollStats " , 79346 ); } $( " progressIndicator " ).style.display = " block " ;
?????????????????? jQuery.ajax({
?????????????????????? type:
" GET " ,
?????????????????????? dataType:
" html " ,
?????????????????????? url: window.location
+ (window.location.search != '' ? " & " : " ? " ) + " type=html&p= " + ( ++ curPage ),
?????????????????????? success:
function ( html ){
?????????????????????????? html
= jQuery.trim( html );

??????????????????????????
if ( html ) {
?????????????????????????????? jQuery(
" #content-inner " ).append( html );
??????????????????????????????
// ???????????????????????????? }
?????????????????????????? } else
?????????????????????????????? curPage
= 0 ;
?????????????????????? },
?????????????????????? complete:
function (){
?????????????????????????? loading
= false ;
// ???????????????????????? alert(window.location.pathname + (window.location.search != '' ? ""+ window.location.search +"&" : "?") + "p=" + ( curPage ))
?????????????????????????? pageTracker._trackPageview(window.location.pathname + (window.location.search != '' ? "" + window.location.search + " & " : " ? " ) + " p= " + ( curPage ));
?????????????????????????? _qacct
= " p-ebK_XdQH1HeLo " ; quantserve();
?????????????????????????? $(
" progressIndicator " ).style.display = " none " ;
?????????????????????? }
?????????????????? });
?????????????? }
?????????? });
??????? });
??? }
</ script >

  相关解决方案