Implementation scheme of fixed header and fixed first column on the left side of the mobile terminal (demo is implemented in Vue)

When making a report on the mobile terminal recently, when scrolling left and right, the left part is fixed; when scrolling up and down, the head part is fixed.

Simple implementation of code in Vue

The main idea is:

a. The left part is scrolled, and the height of the scroll bar on the right part is modified in real time

b. Both the header and the content part are set with a fixed height. When the content height of the content part is greater than the set height, a scroll bar is generated

c. The left and right parts are also set to a fixed width, the left is set to a fixed width, and the right is set to the width of the window minus the width of the left part. When the width of the right part is greater than the set width, a scroll bar is generated

Expansion ideas:

a. When monitoring the left and right (x) scroll bars scroll to the right edge, events can be triggered (such as: loading the next batch of data)

b. When monitoring the upper and lower (y) scroll bars scroll to the lower edge, events can be triggered (eg: loading the next page of data)

……

You can also monitor whether the height of the left and right scroll bars is consistent with the timer, and modify it to be consistent (to prevent compatibility problems between different browsers)

 

The effect diagram is as follows:

 

code show as below:

<template>
    <div class="outermost-layer">
        <div class="left">
            <div class="left-head" :style="{height: `${headHeight}px`}">
                I am left head
            </div>
            <div  :style="{height: `${bodyHeight}px`}" class="left-body"  id="leftBodyId" onscroll="rightBodyId.scrollTop = this.scrollTop;console.log(rightBodyId.scrollTop);console.log(this.scrollTop)">
                <div v-for="i in 40" style="height: 20px">
                    "{{I}}" left b
                </div>
            </div>
        </div>
        <div class="right">
            <div class="right-head" :style="{height: `${headHeight}px`}">
                I am right head
            </div>
            <div  :style="{height: `${bodyHeight}px`}" class="right-body" id="rightBodyId" onscroll="leftBodyId.scrollTop = this.scrollTop;console.log(leftBodyId.scrollTop);console.log(this.scrollTop)">
                <div v-for="i in 40" style="height: 20px">
                    <span v-for="n in 5">「{{i}}」右「{{n}}」body</span>
                </div>
            </div>
        </div>
    </div>

</template>

<!--This can prevent scrolling to the top, the overall offset is upward, and the bottom is blank-->
<style>
    #vux_view_box_body{
        padding:0px;
    }
</style>

<script>
    export default {
        name: "home",
        data(){
            return {
                headHeight: 50,
                bodyHeight: window.innerHeight - 50 ,
            }
        },
        methods:{

        }
    }
</script>

<style scoped>
    .outermost-layer {
        background-color: white;
        padding: 0px;
    }
    .left{
        width: 100px;
        height: 100%;
        background-color: orange;
        float: left;
        display: inline-block;
    }
    .left-head{
        width: 100%;
        /*height: 30px;*/
        clear: both;
    }
    .left-body{
        background-color: olive;
        clear: both;
        /* height: 617px; */ 
        /* Set the scroll bar on the left, the system monitors the position of the scroll bar on the left and keeps the same height */ 
        overflow - y: scroll;
    }
    .right{
        width: calc(100% - 100px);
        height: 100%;
        float: left;
        overflow-x: scroll;
        display: inline-block;
    }
    .right-head{
        background-color: greenyellow;
        /*height: 30px;*/
        z-index: 10;
        clear: both;
    }
    .right-body{
        width: 1400px;
        /*height: 617px;*/
        clear: both;
        overflow: auto;
    }

</style>