<script type="text/javascript">
windowonscroll=function(){
var a = documentdocumentElementscrollTop==0 documentbodyclientHeight : documentdocumentElementclientHeight;
var b = documentdocumentElementscrollTop==0 documentbodyscrollTop : documentdocumentElementscrollTop;
var c = documentdocumentElementscrollTop==0 documentbodyscrollHeight : documentdocumentElementscrollHeight;
if(a+b==c){
showmore();
}
}
</script>依靠css 将页面
documentdocumentElementstyleoverflow='hidden';
documentbodystyleoverflow='hidden';//手机版设置这个。
如果设置了如上，页面的滚动条将会消失，此时鼠标滚轮失效。我说说逻辑吧，如果写代码的话稍微繁琐点，我觉得这样是可以的：整个页面的高度是可以用js获取的，滚动条的当前高度也是可以用js获取的，那就意味着body的滚动条有没有到底部是完全可以通过js获取的，然后，div的滚动也是可以获取的，其实在页面上实现切换div不停的滚动就是焦点的问题，当你body的滚动到底之后，将焦点用js控制到div上，继续滚动，div的滚动就会实现了你不妨试试监听手机的滑动事件，但由于你是网页的切换，如果在浏览器中则整合页面都变了，那么意味着事件的监听要在新的页面中重新添加监听，所以要实现你的效果，建议使用iframe，在页面上设置监听，在iframe中实现展现网页
具体的写着太麻烦，还是你自己实现吧
js的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。
touchstart在触摸开始时触发事件
touchend在触摸结束时触发事件
touchmove这个事件比较奇怪，按道理在触摸到过程中不断激发这个事件才对，但是在我的 Android 15 中，在 touchstart 激发后激发一次，然后剩余的都和 touchend 差不多同时激发。
这三个事件都都有一个 timeStamp 的属性，查看 timeStamp 属性，可以看到顺序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend。
下面是一段代码实例：
documentgetElementsByTagName_r('body')[0]addEventListener('touchstart', function (e) {
nStartY = etargetTouches[0]pageY;
nStartX = etargetTouches[0]pageX;
});
documentgetElementsByTagName_r('body')[0]addEventListener('touchend', function (e) {
nChangY = echangedTouches[0]pageY;
nChangX = echangedTouches[0]pageX;
PS:1touch事件跟click事件是不会被同时触发的。现在的移动设备做的比较好，已经把这个问题完美的避免掉了。
2注意触摸的开始和结束位置的位移大小。如果位移小过小应该不做任何动作。<HTML>
<HEAD>
<!-- 滚动区域坐标大小定位-->
<STYLE type=text/css>
#divContainer {
CLIP: rect(0px 294px 20px 0px); HEIGHT: 20px; LEFT: 0px; OVERFLOW: hidden; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 294px
}
#divContent {
LEFT: 0px; POSITION: absolute; TOP: 0px
}
</STYLE>
<SCRIPT language=JavaScript>
// 滚动开始
function verifyCompatibleBrowser(){
thisver=navigatorappVersion
thisdom=documentgetElementById1:0
thisie5=(thisverindexOf("MSIE 5")>-1 && thisdom)1:0;
thisie4=(documentall && !thisdom)1:0;
thisns5=(thisdom && parseInt(thisver) >= 5) 1:0;
thisns4=(documentlayers && !thisdom)1:0;
thisbw=(thisie5 || thisie4 || thisns4 || thisns5)
return this
}
bw=new verifyCompatibleBrowser()
var speed=0
var loop, timer
function ConstructObject(obj,nest){
nest=(!nest) '':'document'+nest+'';
thisel=bwdomdocumentgetElementById(obj):bwie4documentall[obj]:bwns4eval(nest+'document'+obj):0;
thiscss=bwdomdocumentgetElementById(obj)style:bwie4documentall[obj]style:bwns4eval(nest+'document'+obj):0;
//内容宽度
thisscrollWidth=bwns4thiscssdocumentwidth:thiseloffsetWidth;
//显示区域宽度
thisclipWidth=bwns4thiscssclipwidth:thiseloffsetWidth;
thisleft=MoveAreaLeft;
thisright=MoveAreaRight;
thisMoveArea=MoveArea; thisx; thisy;
thisobj = obj + "Object";
eval(thisobj + "=this");
return this;
}
function MoveArea(x,y){
thisx=x;thisy=y
thiscssleft=thisx
thiscsstop=thisy
}
function MoveAreaRight(move){
//alert("thisscrollWidth="+thisscrollWidth+" objContainerclipWidth="+objContainerclipWidth+"\n"+" objContainerclipWidth-thisscrollWidth="+(objContainerclipWidth-thisscrollWidth)+"\n"+"thisx="+thisx);
documentgetElementById("previous")styledisplay = "block";
documentgetElementById("previousq")styledisplay = "block";
if(thisx>objContainerclipWidth-thisscrollWidth){
thisMoveArea(thisx-move,0)
if(loop) setTimeout(thisobj+"right("+move+")",speed)
}
else{
documentgetElementById("next")styledisplay = "none";
documentgetElementById("nextq")styledisplay = "none";
}
}
function MoveAreaLeft(move){
documentgetElementById("next")styledisplay = "block";
documentgetElementById("nextq")styledisplay = "block";
if(thisx<0){
thisMoveArea(thisx-move,0)
if(loop) setTimeout(thisobj+"left("+move+")",speed)
}
else{
documentgetElementById("previous")styledisplay = "none";
documentgetElementById("previousq")styledisplay = "none";
}
}
//滚动方法
function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScrollerright(speed)
else objScrollerleft(speed)
}
}
//停止滚动方法
function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}
//初始化
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScrollerMoveArea(0,0)
objContainercssvisibility='visible'
initialised=true;
if(objScrollerscrollWidth>objContainerclipWidth){
documentgetElementById("previous")styledisplay = "none";
documentgetElementById("next")styledisplay = "block";
documentgetElementById("previousq")styledisplay = "none";
documentgetElementById("nextq")styledisplay = "block";
}
}
// 滚动结束
</SCRIPT>
</HEAD>
<BODY onload=InitialiseScrollableArea()>
<TABLE border=0 cellPadding=0 cellSpacing=0 height=300 width=360>
<TBODY>
<TR>
<TD background=ckhfiles/a_r1_c2jpg>
<!--滚动区域开始-->
<DIV id=divContainer style="LEFT: 50px; TOP: 50px; VISIBILITY: visible">
<DIV id=divContent>
<nobr>
但一天过去了我始终没有找到合适的配色方案但一天过去了但一天过去了我始终没有找到合适的配色方案但一天过去了但一天过去了我始终没有找到合适的配色方案但一天过去了但一天过去了我始终没有找到合适的配色方案但一天过去了
</nobr>
</DIV>
</DIV>
<!--滚动区域结束 -->
</TD>
</TR>
<!--滚动按钮开始 -->
<tr>
<td id=starttd>
<DIV id="previousq">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(-200)>
快进左
</A>
</DIV>
<br><br>
<DIV id="previous">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(-3)>
向左
</A>
</DIV>
</td>
<td>
<DIV id="next">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(3)>
向右
</A>
</DIV>
<br><br>
<DIV id="nextq">
<A href="javascript:;" onmouseout=CeaseScroll() onmouseover=PerformScroll(200)>
快进右
</A>
</DIV>
</td>
</tr>
<!--滚动按钮结束 -->
</TBODY>
</TABLE>
</BODY>
</HTML>页面加载完成事件JQuery是
$(function() {
这是页面加载完成后会执行的代码
}）
页面下滑代码
$('html,body')animate({scrollTop:100px},500);
100px为从顶部开始向下滑的距离 500为下滑时间 单位为毫秒 可以控制下滑速度时间越短下滑速度越快
两者结合 即可实现你说的页面加载后向下滑动一定距离
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）