滚动时背景固定不动

屏幕滚动-背景固定

/* 父容器自身滚动 */
.bac {
    height: 100%;
    background: url(./imgs/main-bg.jpg) center top no-repeat;
    background-size: 100% auto;
    
    /* 背景不动【只支持ios】*/
    background-attachment: fixed;
    /* 滚动流畅 */
    -webkit-overflow-scrolling: touch;
}

/* 父容器自身滚动 */
/* 背景渐变层 */
.bg-color {
        box-sizing: border-box;
        background-image: linear-gradient(90deg, #FB2F58 0%, #FB684E 100%);
        z-index: -1;

        width: 100%;
        min-height: 100vh;

        /* 定位渐变层之上的背景层 */
        &:before {
            content: '';
            position: fixed;
            z-index: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: url(./imgs/main-bg-long.jpg) center top no-repeat;
            background-size: 100% auto;
            background-attachment: fixed;
        }
        /* 滚动内容 */
        .main-wrap {
            box-sizing: border-box;
            position: relative;

            /* width: 100%;
            min-height: 100vh; */
        }
    }
}

/* 父容器不滚动 */
.bac {
    min-height: 100vh;
    height: 100%;
    background: url(./imgs/main-bg.jpg) center top no-repeat;
    background-size: 100% auto;
    
    /* 滚动子元素 */
    .main {
        box-sizing: border-box;
        display: -webkit-flex; /* Safari */
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    
        min-width: 100%;
        max-height: 100vh;
        padding: 0 40px;
        overflow: auto;/* 必须写上 */
    }

}