滚动信息条的两种展示方法

  • 无间歇 直接滚动
  • 间歇式滚动

HTML

1
2
3
4
<div id="recoder_con">
<div id="recoder_ul1"></div>
<div id="recoder_ul2"></div>
</div>

CSS

1
2
3
4
5
6
7
8
.recoder-con{
display: inline-block;
width: 584px; //指定宽度
height: 280px; //指定高度
overflow: scroll;
overflow-x: hidden;
overflow-y: hidden;
}

无间歇JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function  prizeScroll(listNum) {
var speed = 65,
wap = document.getElementById("recoder_con"),
ul1 = document.getElementById("recoder_ul1"),
ul2 = document.getElementById("recoder_ul2");

ul2.innerHTML = ul1.innerHTML;
var leftHeight;

if (listNum > 4) {
leftHeight = 0;
} else if (listNum == 4) {
leftHeight = 33;
}

function Marquee2() {
if (ul2.offsetTop - wap.scrollTop <= leftHeight) {
wap.scrollTop -= ul1.offsetHeight;
} else {
wap.scrollTop++;
}
}
var MyMar2 = setInterval(function () {
Marquee2();
}, speed);

}
prizeScroll(4)

有间歇JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var wap = $('#recoder_con'),
ul1Html = $('#recoder_ul1').html(),
ul2 = $('#recoder_ul2');

var speed = 50,
listNum = 4,
delay = 1000,
liHeight = 21,
time,
scrollTop = 0;

ul2.html(ul1Html);

function startScroll() {
time = setInterval("scrollUp()", speed);
wap.scrollTop(scrollTop++);
}
function scrollUp(){
if(scrollTop % liHeight == 0){
clearInterval(time);
setTimeout(startScroll,delay);
}else{
wap.scrollTop(scrollTop++);
if(scrollTop >= (listNum -1) * liHeight){
scrollTop = 0;
wap.scrollTop(scrollTop);
}
}
}
setTimeout('startScroll()',delay);

解决IOS滑动不畅问题

[TOC]
@(welcome)[前端菜鸟|掘金中]

  • 在编写移动端页面时,遇到一个很奇怪的问题,IOS向来滑动通畅,体验度明显甩开安卓十条街,但是在添加了上拉刷新下拉加载加载的插件后,IOS瞬间滑动不畅,慢成一坨.
  • 那赶脚就像,拖着汽车往前走的老哞…
  • 起初以为是插件底层的滑动事件影响了IOS,去掉插件之后,依然卡顿如初,what?!
  • 仔细对比之后,终于找到罪魁祸首,竟然是两行熟悉到不行的css
1
2
3
4
body,html{
height: 100%;
overflow: auto;
}

通过查找,终于找到了解决问题的方法

1
-webkit-overflow-scrolling: touch;

这个属性只兼容移动版 Safari iOS 5.0+,而且它有两个值

1
2
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开,滚动会立即停止 */

####auto

  • 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。

####touch

  • 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

``将这行代码放到我的根标签后,我的小苹果又再次欢快的跑起来了!正当我高兴的时候,又发现了一个问题,我写的固定定位导航条随着苹果的告诉滑动,出现了鬼畜情况!

``也就是说,我需要将我的固定定位排除在滑动之外!

``上代码

1
2
3
4
5
6
7
8
9
body,html{
height: 100%;
overflow: auto;
}
.scroll{
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

要滚动的部分给父元素加上class类scroll,需要注意的是设置的两个overflow形成了两个滚动条,很容易造成滚动问题,建议在苹果浏览器下调试好。

博主原创文