html区域滚动原理,html的局部滚动和全局滚动

前端开发人员，肯定会遇到过，局部滚动的问题。在微信上，顶部会有一个地址栏。很多时候我们做单屏的页面，是不需要这个全局滚动。但是禁用了全局滚动，往往会导致局部滚动也无法使用。

示例

这时候我们可以通过绝对定位，将这个问题解决。或者是禁用整个外层的滚动事件。

#app {

position: fixed;

left: 0px;

top: 0px;

width: 100%;

height: 100%;

}

这种方式虽然能解决，但是里面的局部滚动已经没办法滚动了。这种网上也有很多人提过方案，我这里就用最简单的解决。里面滚动用第三方组件，比如swiper比如iscroll等，这些组件已经有解决过这些问题。

添加swiper组件到项目中

由于习惯于vue的框架，因此我引入进来的是vue-awesome-swiper 具体用法和swiper还是有些小差别，可以看github的示例。

在main.js引入vue-awesome-swiper

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/css/swiper.css';

Vue.use(VueAwesomeSwiper)

在单独的vue文件里面引入swiper。把需要滚动的内容放入到swiper里面即可。