开发微信小程序时,有时设置页面样式,需要用到头部固定,内容滚动,下面看看怎么做的吧!
##方法一:
1:固定元素
需要固定的元素盒子设置样式:
.box{
position: fixed;
top: 0;
width: 100%;
}
2:隐藏滚动条
父元素设置:
.fatherBox{
width: 100vw;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
滚动条所在的盒元素设置:
.songBox::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
##方法二:
1.需要固定的元素
.box{
height:50px
}
2.需要滚动的元素
.rollBox{
height:calc(100% - 50px);//这里50px就是固定元素的高度
overflow-y:auto;
}