关键词：
最近移动端做一份报表，需要左右滚动时，固定左边部分；上下滚动时，固定头部部分。
代码在Vue中简单实现
主要思路是:
a.左边部分滚动，实时修改右边部分的滚动条高度
b.头部和内容部分都设置固定高度，当内容部分内容高度大于设置的高度时，产生滚动条
c.左右部分也设置固定宽度，左边设置固定宽度，右边设置成窗口的宽度减去左边部分的宽度，当右边部分的宽度大于设置的宽度时产生滚动条
扩展思路：
a.监控左右（x）滚动条滚动到右边边缘时，可以触发事件(如：加载下一批数据)
b.监控上下（y）滚动条滚动到下边边缘时，可以触发事件(如：加载下一页数据)
……
还可以定时器监控左右的滚动条高度是否一致，修改成一致（防止不同浏览器的兼容问题）
效果图如下：
代码如下：
<template>
<div class="outermost-layer">
<div class="left">
<div class="left-head" :style="{height: `${headHeight}px`}">
我是左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}}」左b
</div>
</div>
</div>
<div class="right">
<div class="right-head" :style="{height: `${headHeight}px`}">
我是右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>
<!--这里可以防止滚动到顶部时，整体往上偏移，底部出现空白-->
<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;*/
/*左边设置滚动条，系统监听左边的滚动条位置，保持高度一致*/
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>
vue2，vue3移动端实现表格固定和首列固定(代码片段)
...了，上个月业务繁忙，事情比较多，最近在做移动端中发现了一个好玩的事情，那就是移动端中实现表格，固定列有哪些方法：1.position:sticky粘性布局，这个属性也可以实现行和列的固定，在pc端上... 查看详情
具有固定标题和固定第一列的动态 HTML 表
】具有固定标题和固定第一列的动态HTML表【英文标题】：DynamicHTMLTablewithFixedHeaderandFixedFirstcolumn【发布时间】：2014-02-2208:00:37【问题描述】：我正在动态创建一个html表格并填写其内容。之后，我将完整的HTML添加到我的aspx页面上... 查看详情
vue中实现table的首行首列固定
参考技术A移动端需要表格展示数据时，需要滑动表格实现展示更多数据的目的，固定表格的首行和首列可在查看数据时更加直观。首先将表格分成左右两部分，左边第一列在上下滑动是header部分需要固定；右边第一行在左右滑... 查看详情
antd-vue表格，固定左边第一列，设置滚动，有滚动条，第一列被隐藏(代码片段)
解决办法style里不要scoped，可以单独再加个style宽度为固定的宽度，我这里是200，和你在columns设置的宽度一样就行.ant-table-fixed-columns-in-bodydisplay:inline-block;width:200px; 查看详情
在纯 CSS 上具有固定标题和固定列的表
...方案都使用Javascript或jQuery来设置scrollTop/scrollLeft，但它在移动浏览器上运行不顺畅，所以我正在寻找一个纯CSS 查看详情
vue移动端开发列表左边固定右边可以左右滑动上下滑动同步？
参考技术A可以请采纳 查看详情
移动端尾部和头部固定
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie 查看详情
具有固定标题和固定列的 HTML 表格？ [关闭]
】具有固定标题和固定列的HTML表格？[关闭]【英文标题】：HTMLtablewithfixedheadersandafixedcolumn?[closed]【发布时间】：2010-10-1514:44:44【问题描述】：是否有CSS/JavaScript技术来显示一个长的HTML表格，以便列标题在屏幕上保持固定，第一... 查看详情
css让表格第一列和第一行固定
用css让表格左右移动滚动条的时候第一列固定，上下移动滚动条的时候第一行固定。并且浏览器兼容，麻烦提供全网页代码。参考技术A给你提供个思路：第一行为一行多列的表格；第一列为一列多行的表格；剩下就是一个表格... 查看详情
实现固定表头和表列的table组件
...比较多时，为了查看方便，希望能在纵向滚动时固定表头，在横向滚动时在左边或右边固定特定表列，这是原生不支持的。目录实际效果设计思路普通表格固定表头固定表列同时固定表头和表列实际效果table同时... 查看详情
滚动表格固定表头和左边栏
...， 在该标签内再复制两个绝对定位的表格，一个作为固定头部，一个作为固定左边栏， 再在该标签内添加一个放在左上角的标签，宽高与第一个td相同 当表格滚动的时候固定头部和左边栏的表格也跟着同步滚动（通... 查看详情
css样式表中如何设置table的第一列的宽度是固定值。页面中有很多table纵向排列
...;。3、浏览器运行index.html页面，此时表格第一列的宽度被固定在65像素。参考技术A需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html。2、在index.html中的第1个<td>标签... 查看详情
实现固定表头和表列的table组件
...比较多时，为了查看方便，希望能在纵向滚动时固定表头，在横向滚动时在左边或右边固定特定表列，这是原生不支持的。目录实际效果设计思路普通表格固定表头固定表列同时固定表头和表列实际效果table同时... 查看详情
生成固定一列的 Python 数组
】生成固定一列的Python数组【英文标题】：GeneratePythonArraywithoneColumnFixed【发布时间】：2021-07-3106:09:30【问题描述】：我正在尝试在Python中生成一个5列数组，其中每行中的第一个数字保持固定为0.2，但每行中接下来的4个数字会有... 查看详情
如何将垂直滚动条添加到始终固定第一列的表中(代码片段)
...造了一张桌子;每当用户水平滚动时，它的第一列将始终固定。但是现在我还面临另一个问题，即如果记录太多，用户必须到页面末尾水平滚动。是否可以仅使用CSS进行垂直滚动？这是我的代码：<style>.rowdisplay:flex;flex-wrap:wrap... 查看详情
实现移动端顶部与底部固定，内容区优化的效果
实现顶部与底部固定的效果十分容易，且很多人都会选择用这个方式，就是顶部position:fixed，底部也position:fixed。实现的效果就像下面两张图，container区域是布满整个屏幕的，且滚动条也是滚动在整个屏幕中，调内容区时只能调... 查看详情
为另一列的每个值添加具有固定值的列 Redshift
】为另一列的每个值添加具有固定值的列Redshift【英文标题】：addcolumnwithfixedvaluesforeachvalueofanothercolumnRedshift【发布时间】：2020-06-1909:58:33【问题描述】：我有下表]1想为每个用户添加日期范围如何实现：如果这可以通过Redshift中... 查看详情
vue项目中h5移动端中通过flex布局实现首尾固定，中间滚动（借鉴）
html中<divclass="flexLayoutr"><divclass="div_head"></div><divclass="div_content">中间区域</div><divclass="div_foot"></div></div>css中*margin:0;padding:0;.flexLayoutdisplay:flex;display:-webkit-flex;min-height:100vh;flex-direction:column;.div_head... 查看详情