上下滚动代码,html中设置某个区域手动上下滚动

1.这是效果图:

上下滚动代码,html中设置某个区域手动上下滚动

2.代码实现

手动滚动 向上
  • 0test
  • 1test
  • 2test
  • 3test
  • 4test
  • 5test
  • 6test
  • 7test
  • 8test
  • 9test
  • 10test
  • 11test
  • 12test
  • 13test
  • 14test
  • 15test
  • 16test
  • 17test
  • 18test
  • 19test
  • 20test
  • 21test
  • 22test
  • 23test
  • 24test
  • 25test
  • 26test
  • 27test
  • 28test
  • 29test
  • 30test
  • 31test
  • 32test
  • 33test
  • 34test
  • 35test
  • 36test
  • 37test
  • 38test
  • 39test
  • 40test
  • 41test
  • 42test
  • 43test
  • 44test
  • 45test
  • 46test
  • 47test
  • 48test
  • 49test
  • 50test
  • 51test
  • 52test
  • 53test
  • 54test
  • 55test
  • 56test
  • 57test
  • 58test
  • 59test
  • 60test
  • 61test
  • 62test
  • 63test
  • 64test
  • 65test
  • 66test
  • 67test
  • 68test
  • 69test
  • 70test
  • 71test
  • 72test
  • 73test
  • 74test
  • 75test
  • 76test
  • 77test
  • 78test
  • 79test
  • 80test
  • 81test
  • 82test
  • 83test
  • 84test
  • 85test
  • 86test
  • 87test
  • 88test
  • 89test
  • 90test
  • 91test
  • 92test
  • 93test
  • 94test
  • 95test
  • 96test
  • 97test
  • 98test
  • 99test

向下

3.实现的主要思路

固定div的宽度和高度,设置CSS的overflow:hidden;然后使用js代码修改div的scrollTop值就可以实现滚动了。

4.可以依据这些实现的其它功能:

自动滚动,图片滚动等功能,这是上下滚动,左右滚动的实现应该也没有什么问题了吧。

5.注意:

代码中使用了jquery,要运行测试请引入jquery.(当然你也可以基本js代码实现该功能的,试着尝试一下吧。)
欢迎拍砖
本文为作者原创 转载请注明出处
Tags: 

延伸阅读

最新评论

发表评论