JS控制DIV层实现平滑滚动的滚动条效果 - Javascript源码 - 源码园地
JS控制DIV层实现平滑滚动的滚动条效果
本例是用JavaScript控制一个DIV层实现平滑滚动，模拟实现浏览器滚动条的功能，只不过这个滚动条是用图像实现的自定义滚动条，滚动效果平滑，看上去还不错。
发布人：summer windJS实现DIV层随滚动条滚动
我的图书馆
JS实现DIV层随滚动条滚动
&SCRIPT LANGUAGE="JavaScript"&function sc1(){&document.getElementById("Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Div1").offsetHeight)/2)+"px";&document.getElementById("Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Div1").offsetWidth)/2)+"px";
document.getElementById("Div1").style.position:="absolute";
}&/SCRIPT&
window.onscroll=sc1();& //滚动条事件
&div id="Div1" class="div" style="width: 240 height:90px" align="center"&正中...&/div&
主要的代码 都是上面的了！
TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
被遗忘的天使
即使翅膀依然洁白
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(3086)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_094065',
blogTitle:'JS+DIV实现文字不间断向左滚动',
blogAbstract:'&!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\"&&html&&head&&&& &title&New Document &/title&&&& &meta name=\"Generator\" content=\"EditPlus\"&&&& &meta name=\"Author\" content=\"\"&&&& &meta name=\"Keywords\" content=\"\"&&&& &meta name=\"Description\" content=\"\"&',
blogTag:'文字向左滚动,js',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:3,
publishTime:2,
permalink:'blog/static/',
commentCount:2,
mainCommentCount:2,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'被遗忘的天使
即使翅膀依然洁白
\r\n死神!\r\n\r\n',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}2939人阅读
【Javascript】（7）
原创作品，允许转载，转载时请务必以超链接形式标明文章
、作者信息和本人声明。否则将追究法律责任。
作者： 地址：
js代码如下：
&!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& &
&title&无标题页&/title&
.header_wrap {
background: none repeat scroll 0 0 #488FCE;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
width: 100%;
z-index: 10;
&body style=&height:1500px&&
&header class=&header_wrap&&
&div class=&nav&&
&li class=&&&&a href=&http://www.phpwind.net/index.php?m=bbs&c=forumlist&&首页&/a&&/li&
&li class=&current&&&a href=&http://www.phpwind.net/index.php?m=bbs&&新帖&/a&&/li&
&li class=&&&&a href=&http://www.phpwind.net/index.php?m=like&c=like&&喜欢&/a&&/li&
&li class=&&&&a href=&http://www.phpwind.net/index.php?m=tag&&话题&/a&&/li&
&li class=&&&&a href=&/& target=&_blank&&云平台&/a&&/li&
&li class=&&&&a href=&/index.php?m=downloads&a=downloadsphpwind& target=&_blank&&下载&/a&&/li&
&!--右边--&
&div id=&divRight&&
&style type=&text/css&&
#divMsgInfo{
height:300
font-size:9
&script type=&text/javascript&&
var lastScrollY=0;
function heartBeat(){
diffY=document.documentElement.scrollT
percent=0.1*(diffY-lastScrollY);
if(percent&0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById(&divMsgInfo&).style.top=parseInt(document.getElementById(&divMsgInfo&).style.top)+percent+&px&;
lastScrollY=lastScrollY+
var timeright = window.setInterval(&heartBeat()&,1);
&div id=&divMsgInfo&
runat=&server& style=& right:10 top:120&&
&img src =&left.gif& /&
&div style=&float: color:White&&&a onclick=&clearInterval(timeright);document.getElementById('divRight').innerHTML = ''& style=&color:W cursor:pointer&&关闭&/a&&/div&
&!--左边--&
&div id=&divLeftFloat&&
&style type=&text/css&&
#divMsgLeftInfo{
height:318
font-size:9
&script type=&text/javascript&&
var lastScrollYLeft=0;
function heartBeatLeft(){
diffYLeft=document.documentElement.scrollT
percent=0.1*(diffYLeft-lastScrollYLeft);
if(percent&0)
percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById(&divMsgLeftInfo&).style.top=parseInt(document.getElementById(&divMsgLeftInfo&).style.top)+percent+&px&;
lastScrollYLeft=lastScrollYLeft+
var timeleft = window.setInterval(&heartBeatLeft()&,1);
&div id=&divMsgLeftInfo& style=& left:10 top:120&&
&a href=&& target=&_blank&&
&img border=&0& src =&/Files/index/FloatImg/.png& /&&/a&
&div style=&float: color:White&&
&a onclick=&clearInterval(timeleft);document.getElementById('divLeftFloat').innerHTML = ''& style=&color:W cursor:pointer&&关闭&/a&
&!--底部--&
&div id=&divBottomFloat&&
&style type=&text/css&&
#divMsgBottomInfo{
/*background:#*/
height:188
font-size:9
/* border-color:#442200;*/
/* border-color:#000000;*/
&script type=&text/javascript&&
var lastScrollYBottom=0;
function heartBeatBottom(){
var isIE = document.all && window.
bodyScrollTop = document.documentElement.scrollTop || document.body.scrollT
docHeight = document.documentElement.clientHeight || document.body.clientH
docHeight = (document.body.clientHeight & document.documentElement.clientHeight)?document.documentElement.clientHeight:document.body.clientH
diffYBottom=(docHeight - parseInt(document.getElementById(&divMsgBottomInfo&).offsetHeight,10)) + parseInt(bodyScrollTop, 10);
document.getElementById(&divMsgBottomInfo&).style.top=diffYBottom+&px&;
var timebottom=window.setInterval(&heartBeatBottom()&,1);
&div id=&divMsgBottomInfo&
runat=&server& style=& right:10 top:500&&
&div style=&float: color:White&&&a onclick=&clearInterval(timebottom);document.getElementById('divBottomFloat').innerHTML = ''& style=&color:W cursor:pointer&&关闭&/a&&/div&
&img src =&/images/tmp2.jpg& style=&width:330 height:170px& /&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：475735次
积分：5279
积分：5279
排名：第4750名
原创：68篇
评论：138条
(1)(3)(1)(6)(9)(24)(2)(1)(1)(2)(6)(1)(2)(13)
共同学习，共同进步做一个js实现DIV自动滚动到底部的功能-js教程-ab蓝学网
做一个js实现DIV自动滚动到底部的功能
简介:WEB前端|学习做一个js实现DIV自动滚动到底部的功能，一个比较特殊的客户要求，在一个页面用表格显示数据，数据量不是很多，不希望使用浏览器的滚动条，只能在Div中滚动table中的数据，但是有个特殊的要求，就是...
学习做一个js实现DIV自动滚动到底部的功能，一个比较特殊的客户要求，在一个页面用表格显示数据，数据量不是很多，不希望使用浏览器的滚动条，只能在Div中滚动table中的数据，但是有个特殊的要求，就是必须将滚动条自动滚动到底部
查询了一下相关的资料，Div没有自动滚动的属性，只能模拟鼠标的滚动来现实想要的效果。&
关键的部分部分在这里：div.scrollTop = div.scrollH&
下面是具体实现的精简代码：
&div id=&divDetail& style=&overFlow-y: width:250height: 200&&&
&table style=&border:1 &&&
&tr&&td&id&/td&&td&name&/td&&td&age&/td&&td&memo&/td&&/tr&&
&tr&&td&000001&/td&&td&name1&/td&&td&24&/td&&td&memomemomemomemomemo&/td&&/tr&&
&tr&&td&000002&/td&&td&name2&/td&&td&23&/td&&td&memomemomemomemomemo&/td&&/tr&&
&tr&&td&000003&/td&&td&name3&/td&&td&23&/td&&td&memomemomemomemomemo&/td&&/tr&&
&tr&&td&000004&/td&&td&name4&/td&&td&23&/td&&td&memomemomemomemomemo&/td&&/tr&&
&tr&&td&000005&/td&&td&name5&/td&&td&23&/td&&td&memomemomemomemomemo&/td&&/tr&&
&tr&&td&000002&/td&&td&name2&/td&&td&23&/td&&td&memomemomemomemomemo&/td&&/tr&&
&tr&&td&000003&/td&&td&name3&/td&&td&23&/td&&td&memomemomemomemomemo&/td&&/tr&&
&tr&&td&000004&/td&&td&name4&/td&&td&23&/td&&td&memomemomemomemomemo&/td&&/tr&&
&tr&&td&000005&/td&&td&name5&/td&&td&23&/td&&td&memomemomemomemomemo&/td&&/tr&&
&script type=&text/javascript& defer&&
var div = document.getElementById('divDetail');&
div.scrollTop = div.scrollH&
//alert(div.scrollTop);&
&/script&&
其实，实现是很简单的但是一般很少有这种需求，期间还是走了一些弯路。
上一编：下一编：
喜欢猜你喜欢的内容
大家感兴趣的内容
1 2 3 4 5 6 7 8 9 10
最近更新的内容
1 2 3 4 5 6 7 8 9 10
本月热门的内容
1 2 3 4 5 6 7 8 9 10}