前端开发人员，肯定会遇到过，局部滚动的问题。在微信上，顶部会有一个地址栏。很多时候我们做单屏的页面，是不需要这个全局滚动。但是禁用了全局滚动，往往会导致局部滚动也无法使用。
示例
这时候我们可以通过绝对定位，将这个问题解决。或者是禁用整个外层的滚动事件。
#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里面即可。
<template>
<div class="home">
<swiper class="swiper" :options="swiperOption">
<swiper-slide class="swiper_content">
<img alt="Vue logo" src="../assets/logo.png">
<img alt="Vue logo" src="../assets/logo.png">
<img alt="Vue logo" src="../assets/logo.png">
<img alt="Vue logo" src="../assets/logo.png">
<img alt="Vue logo" src="../assets/logo.png">
<img alt="Vue logo" src="../assets/logo.png">
<img alt="Vue logo" src="../assets/logo.png">
<img alt="Vue logo" src="../assets/logo.png">
<img alt="Vue logo" src="../assets/logo.png">
<img alt="Vue logo" src="../assets/logo.png">
<img alt="Vue logo" src="../assets/logo.png">
<img alt="Vue logo" src="../assets/logo.png">
</swiper-slide>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
name: 'Home',
data() {
return {
swiperOption: {
direction: "vertical",
slidesPerView: "auto",
scrollbar: {
el: ".swiper-scrollbar"
},
mousewheel: true,
autoHeight: true,
}
};
},
components: {
Swiper,
SwiperSlide
}
}
</script>
<style>
.swiper {
margin-top: 100px;
height: 400px;
background: pink;
}
.swiper_content {
height: 100%;
background: red;
}
.swiper-scrollbar {
background: orange;
border: none;
}
</style>
可以滚动的内容
内容flex自适应高度的滚动。
上面列举的滚动视图，是固定了swiper的高度。所以基本上没啥太大的问题。开发中可能会遇到，内容区域是flex:1进行自适应高度的情况。我们需要把swiper的高度撑满，以及slide也要撑满。这几个个样式是重点。
PS：遇到过滚动条黑色bar不显示，发现需要设置图片的高度，才会计算出实际的滚动高度，才会出现滚动条黑色bar。
.scroll_content {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
background: red;
}
.main_content {
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper {
height: 100%;
}
.slide_content {
height: 100%;
}
.test_img {
width: 100%;
height: 100px;
}
自适应高度的滚动
全部的代码如下
<template>
<div class="home">
<div class="head">head content</div>
<div class="scroll_content">
<div class="main_content">
<swiper class="swiper" :options="swiperOption">
<swiper-slide class="slide_content">
<div>
<div>scroll head</div>
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<img class="test_img" alt="Vue logo" src="../assets/logo.png">
<div>scroll foot</div>
</div>
</swiper-slide>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</div>
</div>
<div class="foot">foot content</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
name: 'Home',
data() {
return {
swiperOption: {
direction: "vertical",
slidesPerView: "auto",
freeMode: true,
scrollbar: {
el: ".swiper-scrollbar"
},
mousewheel: true,
autoHeight: true,
setWrapperSize: true
}
};
},
components: {
Swiper,
SwiperSlide
}
}
</script>
<style >
.home {
height: 100%;
display: flex;
flex-direction: column;
}
.head {
width: 100%;
height: 100px;
background: orange;
}
.foot{
width: 100%;
height: 50px;
background: orange;
}
.scroll_content {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
background: red;
}
.main_content {
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper {
height: 100%;
}
.slide_content {
height: 100%;
}
.test_img {
width: 100%;
height: 100px;
}
</style>
自定义滚动条的颜色
在上面的代码设置成功后，可以修改如下两个样式。可以修改滚动条的颜色。
.swiper-scrollbar {
background: black;
}
.swiper-scrollbar-drag {
background: blue;
}
真机测试效果
网友评论