编辑推荐

体验更好的底部banner

阿凡达2018-07-13 09:14

某日，产品拿着壕6过来说：‘wap的底部滚动栏会滚到底部会向上滚，体验不好呀。’然后我默默拿出抽屉的。。。

正文：

一般的wap页面滚动区域定义在body，底部是推广用的banner浮层，结构如下：

body
    section1
    section2
    section3
    section...
    banner.fixed

iOS 5.0 之后定义了scroll元素： -webkit-overflow-scrolling。

Constants

auto

One finger scrolling without momentum.

touch

Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms).

默认值是auto，设置成touch的时候会产生一个层叠上下文。因为body会本身滚动就会有拉伸的效果，所以只要将滚动区域设置到body的子元素上，body定高，就可以让fixed到底部的banner永远停留在底部。

改进结构如下：

body
    scroll
       section1
       section2
       section3
       section...
   banner.fixed

扫一扫看效果：http://jsbin.com/cihafo