js滚动条平滑移动示例代码
本文实例为大家分享了js滚动条平滑移动相关代码，供大家参考，具体内容如下
html页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../Scripts/JavaScript9.js"></script>
<link href="../Content/StyleSheet9.css" rel="stylesheet" />
<script src="../Scripts/cxc.js"></script>
<meta charset="utf-8" />
</head>
<body>
<input type="button" id="bt" value="滑动滚动条" />
<div id="back">
</div>
<div id="container">
<div id="main">
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
<div class="d">
<p>如果有人说自己得到了真理，对不起，请恕鄙人无法相信。原因就不多谈了，这种拿真理吹牛逼的行为</p>
</div>
</div>
</div>
</body>
</html>
js页
var body, back, container, main,bt; //dom
window.onload = function () {
domload();
dominit();
events();
};
var domload = function () {
body = document.body;
back = $("back");
container = $("container");
main = $("main");
bt = $("bt");
};
var dominit = function () {
setH(back, screenH);
setH(container, screenH);
setH(main, screenW);
};
var events = function () {
AddEvent(bt, EventsType[0], function () {
var speed = 10;
var min = 0,max = 449;
var scrolldown = function () {
min += speed;
if (min < max) {
container.scrollTop = min;
setTimeout(scrolldown, 4);
}
};
setTimeout(scrolldown, 100);
});
};
css页
* {
margin:0px;
padding:0px;
}
#back {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
z-index: 1;
background-image: url('../Images/psbg/bg7.png');
}
#container{
position:absolute;
width:100%;
top:0px;
left:0px;
z-index:100;
overflow:auto;
}
#main{
position:absolute;
width:100%;
top:0px;
left:0px;
}
.d{
margin-top:50px;
}
#bt{
position:absolute;
top:0;
right:50px;
z-index:200;
}
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关推荐
-
JS模拟简易滚动条效果代码(附demo源码)
本文实例讲述了JS模拟简易滚动条效果的方法.分享给大家供大家参考,具体如下: 使用Js模拟滚动条.简易模式,类似手机上常见的滚动条. 效果如下: Js代码如下: var scrollMoveObj = null, scrollPageY = 0, scrollY = 0; var scrollDivList = new Array(); // obj需要添加滚动条的对象 w滚动条宽度 className滚动条样式名称 // obj元素 必须指定高度,并设置overflow:hidden; //
-
JS实现的页面自定义滚动条效果
本文实例讲述了JS实现的页面自定义滚动条效果.分享给大家供大家参考,具体如下: 这里演示网页上用的滚动条效果,是一个自定义的滚动条代码,除了上下两个箭头以外,滚动条和一般的浏览器基本差不多,鼠标滚轮滚动,滚动条滚动.html结构很简单,mainBox是外层div,content是内容,滚动条div是js动态生成的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-zdy-scroll-style-codes/ 具体代码如下: <!D
-
原生JavaScript实现滚动条效果
本文实例讲解原生JavaScript实现滚动条效果的相关代码,分享给大家供大家参考,具体内容如下 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根据滑动条块移动的百分比算出滚动区域的滚动程度,用marginLeft进行滚动,具体的写在注释里. 整体弄成了一个对象,防止各种乱七八糟的数据污染全局变量.另外,对象内部调用的函数也都写到了对象构造函数的里面,由于对象作用域链的原理,外部无法进行调用,防止不小心在外部调用. <!DOCTYPE html> <html> <
-
javascript jscroll模拟html元素滚动条
主流浏览器默认为html元素提供的滚动条不美观,而且前端开发人员想对其通过css进行统一样式的美化也是不可实现的.比如ie可以通过样式来实现简单的美化.Webkit内核浏览器可以控制滚动条的显示效果,firefox则不允许用户为滚动条定义样式.但是对于追求友好的用户体验的前端开发人员,是不会被这些浏览器的不一致行为所阻止的.我们可以自己通过标准的html元素模拟来实现自定义的滚动条. 这里是自己在工作不太忙的时候写出来了一个用户可以自定义的滚动条jscroll,以下简称jscroll.jscro
-
JS去除iframe滚动条的方法
本文实例讲述了JS去除iframe滚动条的方法.分享给大家供大家参考.具体如下: 下面的代码可以通过修改scrolling来去除iframe的滚动条 <!DOCTYPE html> <html> <head> <script> function removeScroll() { document.getElementById("myframe").scrolling="no"; } </script> &l
-
js模拟滚动条(横向竖向)
JS: 复制代码 代码如下: (function(win){ var doc = win.document,db = doc.body; var mousewheel = 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);}; skyScroll
-
javascript自定义滚动条实现代码
在工作中经常会遇到内容会超出固定的一个范围,超出的内容一般会使用到滚动条来滚动显示. 但是用浏览器默认的滚动条经常被产品经理鄙视,可是用css却改变不了滚动条的样式,还好,有万能的js ^_^~~ 网上有各种各样的插件,但最顺手的还是自己写的,还可以一边撸一边当学习,自己动手丰衣足食 (*^__^*) 其中这三个问题深深地困扰我: 1.滚动条高度 2.每次点击向上.向下按钮的时候滚动条应该移动多少距离 3.每拖动1px滚动条,页面需要移动多少? 整个的框架大概是长这样的: 先来看看第一个问题.
-
jQuery iScroll.js 移动端滚动条美化插件第1/5页
官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够
-
js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 <style type="text/css"> #top_div{ position:fixed; bottom:80px; rig
-
原生js实现模拟滚动条
当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观. 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了.不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是本文的动机,本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条. 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动 2.鼠标可以拖动滚动条并让界面滚动 3.页面resize时,滚动条根据页面尺寸变化,仍然可以工作
-
基于JavaScript实现div层跟随滚动条滑动
在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置 效果展示如下所示: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavScript页面悬浮框- 何问起</title><base target="_blank" /> <
-
javascript模拟滚动条实现代码
其实这样代码产生些了冗余.......不如单独写个Slider类 做为第一个版本还是保存起来 有时间的话 试着单独的写个Slider类 #container { height:200px;_height:198px;width:385px;border:1px solid #CCCCCC; } #container #content{ height:200px;width:370px;float:left;overflow:hidden; } #container #content div{ m