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

代码在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. os模块、文件压缩 、匹配文件后缀名:fnmatch glob

    一.os模块 os模块:是python是系统交互的模块 import os # 0平台信息的一些操作 python是夸平台的,所以内部兼容了不同的平台 1. os.name # 操作系统 nt是win ...

  2. IHTMLDocument2 TO IWebBrowser2

    if(NULL != pIHTMLDocument2) { IHTMLWindow2* pIHTMLWindow2 = NULL; hr = pIHTMLDocument2->get_paren ...

  3. Java复习6异常处理

    Java复习6.异常处理 20131005 前言: Java中的异常处理机制是非常强大的,相比C++ 来说,更加系统.但是我们开发人员没有很好的使用这一点.一些小的程序是没有什么问题的,但是对于大型项 ...

  4. 如何解决虚拟机中的ubuntu系统方向键与退格键不能正常使用的问题

    问题描述: 在虚拟机中安装了ubuntu系统,打开vi,当vi进入insert模式后,后退键(backspace)不能删除字符,上下左右键也对应了W,S,A,D. 解决办法: cp /etc/vim/ ...

  5. shell的初步介绍

    linux下Shell介绍 概述:每个人在成功登陆LIUX后,系统会出现不同的提示符号,例如$,~,#等,然后你就可以开始输入你需要的命令,若是命令正确,系统就会一句命令的要求来执行,知道注销系统位置 ...

  6. LINUX系统下的shell命令---grep、sed、awk

    1)grep文本过滤命令 1.grep基本认识 (Global  search  regular expression and  print  out the  line全局搜索研究正则表达时并显示出 ...

  7. 个人Blog小程序开发完毕

    今天忙了一天,算是把这个小程序弄好了,包括小程序前端页面.接口对接.后台系统.服务器架 设.域名备案.证书安装(现在阿里云的免费证书怎么审核要这么久啊,到现在还在审核中) 先上截图: 这个背景图片的替 ...

  8. easyUI---分页插件

    设置 //分页组件 $('#detailLayer .detailPag').pagination({ pageNumber: 1, pageSize: 10, total: result.Total ...

  9. windows 10 安装 sql 2005 安装失败

    windows 10 安装 sql 2005 安装失败 网上的方法记录: 安装中无法启动需要先用sp4的补丁文件sqlos.dll,sqlservr.exe 替换D:\Program Files (x ...

  10. JS实现浏览器打印、打印预览

    1.JS实现打印的方式方式一:window.print()window.print();会弹出打印对话框,打印的是window.document.body.innerHTML中的内容,下面是从网上摘到 ...