js滚动条
来源:互联网 发布:淘宝网抢拍软件付费 编辑:程序博客网 时间:2024/05/03 10:19
js滚动条
在页面中,滚动条效果是及其常见的效果,如何用JS自制滚动条效果呢,例如在苹果商城。
当我们用鼠标滑动时 内容区域会随着改变。
在例如:当版块内容文字很多时,人们往往会跳过阅读,这是我们完全伪装,给用户一种错觉,这版块内容很少,请你慢慢滑动观看,就像大话江湖里面小沈阳说的那样:“我喜欢看图片的,一看字我就头晕"。其实就是因为某版块内容太多,首先就给用户一种阅读压力,信息量太大,我们就是用一个简单的滚动条效果,让用户自己来选择观看,将内容区域高度设置小一些,给用户一种错觉,就一点,很快就看完了。
废话太多,先上一个图吧。
具体如何实现呢?
其实步骤很简单,就是一个拖拽的加强版
先弄个最简单的
上带代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>自定义滚动条</title>
<style type="text/css">
body,div,strong{padding:0;margin:0;}
</style>
<script type="text/javascript">
window.onload=function()
{