最近移动端做一份报表,需要左右滚动时,固定左边部分;上下滚动时,固定头部部分。

代码在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>

移动端固定头部和固定左边第一列的实现方案(Vue中实现demo)的更多相关文章

  1. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

  2. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

  3. 使用css固定table第一列

    .table{width:100%;overflow-x: scroll;background-color:#7c95b5;} .fixedTable{width:160%;text-align: c ...

  4. Midnight.js – 实现奇妙的固定头部切换效果

    Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换 ...

  5. css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏

    最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...

  6. easyui datagrid 表头固定(垂直滚动条)、列固定(水平滚动条)

    easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...

  7. css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style

    css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...

  8. MATLAB:一个K×M的矩阵,第一列是1,其它都是0,从最后一行开始,每循环一次,最后一行的1往右边移一位,移动到末尾后溢出,重新回到最左边,同时上一行的1往右边移一位

    问题:一个K×M的矩阵,第一列是1,其它都是0,从最后一行开始,每循环一次,最后一行的1往右边移一位,移动到末尾后溢出,重新回到最左边,同时上一行的1往右边移一位.上一行溢出时,上上一行的1移动一位, ...

  9. 一、简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏

    一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. MySQl的group by 与排序

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtoAAAFLCAIAAABnXrwfAAAgAElEQVR4nO2dT29jvZHu+WHnW8xqdl ...

  2. leetcode 849. Maximize Distance to Closest Person

    In a row of seats, 1 represents a person sitting in that seat, and 0 represents that the seat is emp ...

  3. day6-面向对象进阶篇

    在面向对象基础篇中,我们讲述了面向对象的很多基础知识,但也有很多限于篇幅并没有涉及到,这里通过进阶篇来完善补充.本篇将详细介绍Python 类的成员.成员修饰符. 一. python类的成员 以下内容 ...

  4. 11g手动打补丁

    在两个节点上,分别以oracle用户执行,停止资源  节点一: srvctl stop home -o /app/oracle/11g -s /home/oracle/s1 -n 11grac75 节 ...

  5. RMAN中format的参数

    (转自:http://blog.chinaunix.net/uid-23079711-id-2554290.html) format 的替换变量,注意大小写! 1.     %d --数据库的db_n ...

  6. 【zznu-2060】 Minsum Plus(最小正子段和)

    题目描述 题意简单到令人发指! 序列A由N个整数组成,从中选出一个连续的子序列,使得这个子序列的和为正数,且和为所有和大于零的子序列中的最小值. 将这个值输出,若无解,输出no solution. 输 ...

  7. maven_01_简介及安装

    一.简介 Maven主要服务于基于Java平台的项目构建.依赖管理和项目信息管理 何为构建 除了编写源代码,我们每天有相当一部分时间花在了编译.运行单元测试.生成文档.打包和部署等烦琐且不起眼的工作上 ...

  8. asp下去除数组中重复的项的方法

    <%Function MoveR(Rstr) Dim i,SpStr SpStr = Split(Rstr,",") For i = 0 To Ubound(Spstr) I ...

  9. APUE学习笔记——8.1-8.4 进程基础

    进程ID 1 进程id是唯一的.(不会有进程id一样的两个进程) 2进程id是可复用的,一个进程销毁后,它的id号可以被新的进程使用.但是Unix采用了延迟复用的算法,也就是进程   销毁后它的id不 ...

  10. Linux系统在启动过程中内核文件丢失的解决方法

    在/boot目录下有两个重要的文件,分别是: vmlinuz-3.10.0-123.el7.x86_64         内核文件 initamfs-3.10.0-123.el7.x86_64.img ...