Implementation of fixed head and fixed left first column on mobile End (demo in Vue)

Recently moved to make a report, need to scroll left and right, fixed the left part; scroll up and down to fix the head part.

The code is simply implemented in Vue

The main ideas are:

A. Scroll in the left part to modify the scrollbar height in the right section in real time

B. The head and Content sections are set to a fixed height, and the scrollbar is generated when the Content section height is greater than the set height

C. The left and right parts also set a fixed width, set the fixed width on the right, the width of the window is set to the left, minus the width of the side, and when the width is greater than the width of the setting, scroll bars are created.

Expansion ideas:

A. Monitoring of the left and right (x) scroll bars can trigger events (for example, loading the next batch of data)

B. Monitoring the upper and lower (y) scroll bar to the bottom edge, you can trigger an event (for example, loading the next page of data)

......

can also monitor the height of the left and right scroll bar is consistent, modified to the same (to prevent different browser compatibility issues)

As follows:

The code is as follows:

<template> <div class= "Outermost-layer" > <div class= "left" > <div class= "Left-hea D ": style=" {height: ' ${headheight}px '} ">I'm the left head .</div> <div:style= "{height: ' ${bodyheight}px '}" class= "Left-body" id= "Leftbodyid" onscroll= "Rightbo  Dyid.scrolltop = This.scrolltop;console.log (rightbodyid.scrolltop); Console.log (this.scrolltop) "> <div V- for= "I In" style= "height:20px" >"{{i}}" left B</div> </div> </div> <div class= "right" > <div class= "right- Head ": style=" {height: ' ${headheight}px '} ">I'm the right head .</div> <div:style= "{height: ' ${bodyheight}px '}" class= "Right-body" id= "Rightbodyid" onscroll= "Leftbo Dyid.scrolltop = This.scrolltop;console.log (leftbodyid.scrolltop); Console.log (this.scrolltop) "> <div V- for= "I In" style= "height:20px" > <span V for= "N in 5" >"{{i}}" right "{{n}}"body</span> </div> </div> </div> & lt;/div></template><!--here to prevent scrolling to the top, the overall upward offset, the bottom appears blank--><style>#vux_view_box_body {padding:0px; }</style><script>Exportdefault{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-lock; }. 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 listens to the left scroll bar position, maintains the high consistency*/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>

Implementation of fixed head and fixed left first column on mobile End (demo in Vue)