盒子的页面弹动

1·先设置一个外套盒子,让里面盒子用来定位
2。再套一个盒子,用来拖拽,拖拽他使内容弹动
3,最后套一个盒子装填内容


image.png
而这个效果要写在页面资源全部加载完成之后,因为如果写在前面,元素没有加载完,高度没有加载完等,会报错
//onload为页面加载完之后生效
widdow.onload = function () {
  //给body添加一个快速点击事件
  FastClick.attach(document.body);
 var bscroll = new BScroll('.bs-wrap',{
  scrollY: true, //设置为纵向
  probeType:2;  //函数节流  一共3个时间段1,2,3
});

//重新计算  better-scroll, 当dom结构发生变化的时候务必要调用确保滚动的效果正常
bscroll.refresh();
btn.onclick = function () {
//滚动到某个元素
  //元素
  //时长
  //相对于目标元素的X轴偏移量   true: 中心位置
  //相对于目标元素的Y轴偏移量   true: 中心位置
bscroll.scrollToElement('li:nth-of-type(70)',1000,true,true);

// bscroll.destroy(); //运行一次后销毁
}
};

你可能感兴趣的:(盒子的页面弹动)