打印

[原创]继续发.半完美模拟滚动条simScroll...完美ing

mudoo [楼主]

经典木头

高级会员

帖子: 438
体力: 562
威望: 4
当前: 福建泉州
离线: 1 天

专长 网页设计,前端制作,JS

1^# 大中小发表于 2008-5-22 22:26

- 上下按钮滚动，支持切换快速模式
- 滚动区域翻页滚动，支持切换快速模式
- 鼠标滚轮支持
- 同步滚动支持

因为字数限制...我把内容都去掉了...自己在代码框里加些字测试吧~~`/

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>simScroll</title>
<script language="JavaScript" type="text/javascript"> 

</script>
<script language="javascript" type="text/javascript">

</script>
<script language="javascript" type="text/javascript">

</script> 
<style type="text/css">

</style>
</head>
<body>
<div class="case">
	<div class="title"><a href="#" class="r">Top</a>simScroll&nbsp;调用方法</div>
	<div class="b">simScroll({ScrollFor, ScrollObj, SyncObjs});</div>
	<ul class="info gray">
		<li><span class="key">ScrollFor：</span><span class="type">Object</span>滚动对象</li>
		<li><span class="key">ScrollObj：</span><span class="type">Object</span>滚动条实例</li>
		<li><span class="key">SyncObjs：</span><span class="type">Array</span>同步滚动对象(支持绑定多个对象)</li>
	</ul>
</div>
<div class="case">
	<div class="title"><a href="#" class="r">Top</a>simScroll&nbsp;功能说明</div>
	- 上下按钮滚动，支持切换快速模式<br />
	- 滚动区域翻页滚动，支持切换快速模式<br />
	- 鼠标滚轮支持<br />
	- 同步滚动支持&nbsp;&nbsp;&nbsp;<a href="#3" class="b u light">演示</a>
</div>
<div class="case">
	<div class="title"><a href="#" class="r">Top</a><a name="1" ></a>simScroll 演示&nbsp;-&nbsp;正常模式</div>
	<div id="simTestContent" class="simScrollCont">
		这里放内容
	</div>
	<div id="simScrollTest" class="simScroll">
		<div tag="simUp" class="simScrollUp"></div>
		<div tag="simArea" class="simScrollDragArea"><div tag="simDrag" class="simScrollDrag"></div></div>
		<div tag="simDown" class="simScrollDown"></div>
	</div>
</div>
<div class="case">
	<div class="title"><a href="#" class="r">Top</a><a name="2" ></a>simScroll 演示&nbsp;-&nbsp;没有上下按钮</div>
	<div id="simTestContent2" class="simScrollCont">
		这里放内容
	</div>
	<div id="simScrollTest2" class="simScroll">
		<div tag="simArea" class="simScrollDragArea"><div tag="simDrag" class="simScrollDrag"></div></div>
	</div>
</div>
<div class="case">
	<div class="title"><a href="#" class="r">Top</a><a name="3" ></a>simScroll 演示&nbsp;-&nbsp;绑定同步滚动</div>
	<div id="simTestContent3" class="simScrollCont" style="width: 350px; height: 250px">
		这里放内容
	</div>
	<div id="simScrollTest3" class="simScroll">
		<div tag="simUp" class="simScrollUp"></div>
		<div tag="simArea" class="simScrollDragArea"><div tag="simDrag" class="simScrollDrag"></div></div>
		<div tag="simDown" class="simScrollDown"></div>
	</div>
	<div style="float: left; width: 50px; height: 200px; line-height: 200px; text-align: center"><==></div>
	<div id="simTestContent4" class="simScrollCont" style="width: 350px; height: 250px">
		这里放内容
	</div>
	<div id="simScrollTest4" class="simScroll">
		<div tag="simUp" class="simScrollUp"></div>
		<div tag="simArea" class="simScrollDragArea"><div tag="simDrag" class="simScrollDrag"></div></div>
		<div tag="simDown" class="simScrollDown"></div>
	</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

源文件在这里：simScroll.7z

[ 本帖最后由 mudoo 于 2008-5-23 18:38 编辑 ]

本帖最近评分记录

xling 威望 +2 很好。。。 2008-5-23 14:27

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

CNwander

浩波

中级会员

帖子: 459
体力: 271
威望: 1
当前: 北京海淀区

专长 UI,JS,UE

2^# 大中小发表于 2008-5-22 23:04

确实写得很不错，四分一点也不为过

ps: 好像没有srollTo的方法？
另，with还是少用为好.

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

mudoo [楼主]

经典木头

高级会员

帖子: 438
体力: 562
威望: 4
当前: 福建泉州
离线: 1 天

专长 网页设计,前端制作,JS

3^# 大中小发表于 2008-5-22 23:11

回复 CNwander 在 3# 的帖子

1. scrollTo有试过.不支持div...so.换了.
2. 为啥要少用with?
貌似以前做的东西.很多都用上了.
偶去查查.

貌似说的是效率问题...
下次更新把它给去了.

[ 本帖最后由 mudoo 于 2008-5-22 23:15 编辑 ]

TOP

activeTechPros 共享IT行业薪资信息 | 《疯狂的程序员》劲爆上市

lijunet

新手上路

帖子: 15
体力: 25
威望: 0
当前: 四川自贡
离线: 2 天

4^# 大中小发表于 2008-5-23 00:12

LZ发的东西都不错哦

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

imyuanb

中级会员

帖子: 125
体力: 219
威望: 0
当前: 湖南娄底
离线: 5 天

5^# 大中小发表于 2008-5-23 00:51

只能不错的说，学习ing

Home:www.ahunk.cn

TOP

tangl198710

啸天皇帝

银牌会员

帖子: 508
体力: 1118
威望: 0
当前: 四川成都
离线: 2 天

专长 PHP,MySQL,MSSQL

6^# 大中小发表于 2008-5-23 07:40

学习一下。我觉得颜色弄得还不错。

TOP

lotusky

在大连

金牌会员

帖子: 2962
体力: 3346
威望: 0
当前: 辽宁大连

专长 网页设计,UE,网站运营

7^# 大中小发表于 2008-5-23 08:15

正需要,谢谢楼主,另外能给个横向滚动的么?谢谢!

不再迷茫!

TOP

shaohua162001

荷西

高级会员

帖子: 1296
体力: 809
威望: 1
当前: 北京海淀区

专长 UI,前端制作

8^# 大中小发表于 2008-5-23 09:08

就两个字：完美

舍得是一种境界

TOP

gzkay

初级会员

帖子: 34
体力: 58
威望: 0
离线: 11 天

9^# 大中小发表于 2008-5-23 09:35

好东西..但是flexcroll更加完美..只需一个class就可以自动加上滚动条了..

TOP

bigheadlyf

初级会员

帖子: 82
体力: 166
威望: 0
当前: 广东惠州
离线: 5 天

专长 网页设计,前端制作,JS

10^# 大中小发表于 2008-5-23 10:41

比较精致～但设置margin后，会乱掉........

大头 --- bigik.cn

TOP

tzboy

ItEasy

荣誉管理团队

帖子: 659
体力: 2418
威望: 8
当前: 云南玉溪
离线: 1 天

11^# 大中小发表于 2008-5-23 11:09

好的就不多说了，提点意见：
1.楼上的也提到了。就是横向的滚动条．
2.作为一个ui来说．创建滚动条是否考虑在内部class内部生成？这个可以传不同的css样式进去进行设置．或者说现在的方式保留．提供parseFromHTML方法对现有方式进行构造，同时兼容class内部创建simscroll．封装ui的目的不是使用越简单越好么？适应多种使用情况．
3.如果有了第2点。那么是不是在offsetheight＝scrollheight的情况下不应该出现滚动条？
4.私有属性我觉得用_可以接受．公共的属性个人觉得用_不是很舒服．

您的代码我也没有很仔细看．原来我模拟window的时候也单独封装过一个scrollbar．不过后来种种原因，也没有继续完善．期待您完善的作品．

[ 本帖最后由 tzboy 于 2008-5-23 11:13 编辑 ]

mooui
codeplus - v4

TOP

fishcynn

龙江曦月

中级会员

帖子: 230
体力: 460
威望: 0
当前: 福建泉州
离线: 10 天

专长 网页设计,前端制作,ASP

12^# 大中小发表于 2008-5-23 11:26

支持muddo...........

TOP

andylau123

新手上路

帖子: 93
体力: 0
威望: 0
离线: 178 天

13^# 大中小发表于 2008-5-23 11:55

学习一下。我觉得颜色弄得还不错。

TOP

jie51886

初级会员

帖子: 67
体力: 84
威望: 0
当前: 北京海淀区
离线: 5 天

专长 前端制作

14^# 大中小发表于 2008-5-23 12:43

支持一下！

TOP

mudoo [楼主]

经典木头

高级会员

帖子: 438
体力: 562
威望: 4
当前: 福建泉州
离线: 1 天

专长 网页设计,前端制作,JS

15^# 大中小发表于 2008-5-23 13:00

引用:

原帖由 tzboy 于 2008-5-23 11:09 发表
好的就不多说了，提点意见：
1.楼上的也提到了。就是横向的滚动条．
2.作为一个ui来说．创建滚动条是否考虑在内部class内部生成？这个可以传不同的css样式进去进行设置．或者说现在的方式保留．提供parseFromHTML方 ...

谢谢大大的建议.接下来的完善.会跟着您的领导路线走的.~`.
1.横向滚动条的话.因为个人不喜欢横向滚动条...觉得太没体验性.就没考虑进去了.(接下来会完善的)
2.打算采用第二种建议.可多种方式.适应多种使用情况.
3.完全同意...之前为了实现功能.这点都没想到...
4.纯属个人习惯...这个就难改了.

TOP

mudoo [楼主]

经典木头

高级会员

帖子: 438
体力: 562
威望: 4
当前: 福建泉州
离线: 1 天

专长 网页设计,前端制作,JS

16^# 大中小发表于 2008-5-23 13:09

引用:

原帖由 fishcynn 于 2008-5-23 11:26 发表
支持muddo...........

名字打错了...是mudoo.

TOP

togoog

天使共舞

银牌会员

帖子: 488
体力: 1016
威望: 0
当前: 北京海淀区
离线: 1 天

专长 网页设计,ASP,搜索

17^# 大中小发表于 2008-5-23 14:51

楼主真是高手啊，下载收藏了，谢谢。

www.daming2004.com警告伱~

TOP

ascii

初级会员

帖子: 312
体力: 194
威望: 0
当前: 福建厦门

专长 PHP,.NET,C#

18^# 大中小发表于 2008-5-23 15:00

I'm 入门者, 支持一下
快出修正版

css&js入门

TOP

tzboy

ItEasy

荣誉管理团队

帖子: 659
体力: 2418
威望: 8
当前: 云南玉溪
离线: 1 天

19^# 大中小发表于 2008-5-23 18:03

对了。今天忘了一些问题．
就是当容器大小改变的时候，是否也考虑重新计算滚动条的高度或者宽度？
比如说．我用了您的scrollbar替换了textarea的滚动条．那么我在不断增加内容的时候的滚动条是不是应该做出相应的变化？
再比如说我用到模拟的window上．window改变尺寸的时候也需要重新计算．

如果scrollbar作为一个底层class的运用的话．是不是该提供一个这样的接口？
我觉得也没必要在内部判断内容的增加，只是需要提供一个重新计算高度或者宽度的方法。这样使用起来我可以在外部判断从而调用scrollbar的这个方法．

mooui
codeplus - v4

TOP

mudoo [楼主]

经典木头

高级会员

帖子: 438
体力: 562
威望: 4
当前: 福建泉州
离线: 1 天

专长 网页设计,前端制作,JS

20^# 大中小发表于 2008-5-23 18:43

引用:

原帖由 tzboy 于 2008-5-23 18:03 发表
对了。今天忘了一些问题．
就是当容器大小改变的时候，是否也考虑重新计算滚动条的高度或者宽度？
比如说．我用了您的scrollbar替换了textarea的滚动条．那么我在不断增加内容的时候的滚动条是不是应该做出相应的变 ...

嗯.当时我也考虑过.当内容发生变化时.重新计算高度.
可我没你考虑的那么多.根本没想过要用在textarea跟window上.
这个就排最后了.等你早上提的那些都搞定了再说.

TOP

minmiss

初级会员

帖子: 89
体力: 180
威望: 0
当前: 四川眉山
离线: 1 天

专长 前端制作,PHP,ASP

21^# 大中小发表于 2008-8-12 10:10

不错，

实用

www.minchao.cn

TOP

tianyess

初级会员

帖子: 30
体力: 66
威望: 0
离线: 20 天

22^# 大中小发表于 2008-8-19 23:45

请问如何根据页面中的内容高度来动态决定div中的滚动条是否显示？？？

哪位高人能给活稍改一下啊，挺需要这个的

TOP

weiweiok

初级会员

帖子: 66
体力: 122
威望: 0
离线: 16 天

23^# 大中小发表于 2008-8-20 09:52

支持，效果不错，代码是不是有点复杂了。。

TOP

tianyess

初级会员

帖子: 30
体力: 66
威望: 0
离线: 20 天

24^# 大中小发表于 2008-8-27 10:05

期待完美的版本出来，等待ing...

TOP