html page to add a scroll bar on the left part of the slide menu and content

html + css + jquery

 Source address: https://gitee.com/migloo/sliderdrawer

Ideas:

　　1, by the method jquery animate achieve slipping menu menu slide

　　2, menu Menu relative setting, which defaults to the left of the page is not visible region

　　3, by clicking on the event, call animate, will slide into the slide-out menu

Style is as follows:

Specifies a fixed size region of the display pattern is as follows:

                 

code show as below:

 

body {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #FFEBCD;
}

body>div {
    width: 360px;
    height: 640px;
    border: 3px groove blanchedalmond;
    border-radius: 8px;
    background: #f1f1f1;
    padding: 5px;
    overflow: hidden;
}

.page {
    width: 500px;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    left: -140px;
}

.content {
    height: 100%;
    width: 360px;
    display: flex;
    flex-direction: column;
}

.content>img {
    margin-top: 15px;
    margin-left: 10px;
    cursor: pointer;
    height: 26px;
    width: 32px;
}

.content>div {
    flex-grow: 1;
    overflow: auto;
    padding: 5px;
    font-size: 2em;
    -webkit-overflow-scrolling: touch;    
}

.menu {
    height: 100%;
    width: 120px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
}

.menu>div {
    margin: 5px 0 10px 5px;
｝

 

 

设置自动适应全部网页空间的样子如下：

      

 

 

 

 

        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
            }

            .page {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            .container {
                position: relative;
                left: -200px;
                width: calc(100% + 200px);
                height: 100%;
                display: flex;
                flex-direction: row;
            }

            .menu {
                width: 200px;
                height: 100%;
                background: linear-gradient(white, black);
            }

            .scroll {
                flex-grow:1;
                height: 100%;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
            }
            .content {
                width: 100%;
                height: 300%;
                background: linear-gradient(black, white);
            }
        </style>