<!-- 结构 -->
<div id="scroll">
<ul id="content">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<!-- 样式 -->
<style>
html,body
{
width: 100%;
height: 100%;
}
*
{
margin : 0;
padding: 0;
list-style: none;
}
#scroll
{
width: 500px;
height: 500px;
background-color: #E9E9E9;
overflow-y:auto;
}
#content
{
width: 400px;
height: 1000px;
}
li
{
width: 100%;
height: 200px;
background-color: #999;
line-height: 200px;
text-align: center;
font-size: 50px;
}
</style>
<!-- 行为 -->
<script>
function scroll(id)
{
/**
* 当前滚动的百分比
*/
var value = 0;
/**
* 滚动容器
*/
var node = document.getElementById(id);
node.addEventListener('scroll',onEvent);
/**
* 侦听滚动
*/
function onEvent(e)
{
value = node.scrollTop/parseInt(getComputedStyle(node).getPropertyValue("height"));
}
/**
* 设置滚动位置
*/
function moveTo(n)
{
node.scrollTop = parseInt(getComputedStyle(node).getPropertyValue("height"))*n
}
return{
value :value,
moveTo:moveTo
}
}
var s = scroll('scroll');
s.moveTo(0.5);
</script>
滚动(原生)
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 前端入坑纪 03 让假期来得更猛烈些吧!今天假期第一天,来个新闻滚动! 今天总感觉直接切换过来太突兀,想想还是这样...
- 原生 1.function getScrollTop() { var scrollTop = 0; if (doc...
- RollingLayout(仿[淘宝头条]) 这是一个可以让自己子视图滚动起来的控件,支持子条目自定义、滚动方向、...