自定义popup组件遇到的坑

2019独角兽企业重金招聘Python工程师标准>>>

popup组件类似于对话框，需要覆盖在页面之上，一般自带遮罩

遇到的坑主要有popup弹出的时候，滚动popup会导致页面也跟着滚动（如果页面高度超过屏幕）。

原因是移动端的body标签自带滚动条，在popup上面滑动的时候，会触发body的滑动，需要禁止body标签的滚动属性

禁止body滚动属性，需要同时注意body的高度，默认改成100%，html的高度也如此，

既然body的滚动被禁止，只能设置popup的父布局允许滚动，注意设置滚动属性需要同时设置高度为100%

一下是一些关键标签的css属性

html{height: 100%;}
body{overflow: hidden;height: 100%;}


.h_100 {//popup的父组件
    height: 100%;
    overflow: auto;}

popup的内容区也允许滚动，此时需要给内容区所在的div设置滚动属性

popup如果带有title，同时title不允许跟着内容区一起滚动，该如何设计呢？

参考思路：可以设置title的position为fixed，这样可以固定title在内容区的位置，

title一下的div区域可以设置一个padding-top，高度为title的高度，运用障眼法达到效果

popup元素的css属性

.popup {
  height: 100%;//popup默认高度占满全屏，否则content部分的高度计算出问题，100也保证遮罩完全遮住窗体
  &-header {
    position: fixed;//header设置成固定位置
  }
  &-body {
    padding-top: 46px;//防止header挡住内容
  }
  &-content {
    position: fixed;
    bottom: 0;//结合fix，整个popup固定在底部
    width: 100%;
    max-height: 60%;
    z-index: 100;//结合fix，层级必须高于父级页面
    background: #f6f6f6;
    overflow: auto;//允许popup滑动，如果内容区填充的内容超过最大高度（屏幕60%），滚动可以生效
  }
}

html

 

转载于:https://my.oschina.net/carbenson/blog/3043041