开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

移动端表格的水平滚动

是指在移动设备上展示的表格内容过宽时，用户可以通过水平滚动来查看隐藏部分的内容。这种滚动方式可以提供更好的用户体验，使用户能够在有限的屏幕空间内浏览完整的表格数据。

移动端表格的水平滚动有以下几个优势：

显示完整数据：由于移动设备屏幕尺寸有限，表格内容可能会超出屏幕宽度，使用水平滚动可以确保用户能够完整地查看表格中的所有数据，而不会被截断或隐藏。
节省空间：水平滚动可以在有限的屏幕空间内展示更多的表格列，避免了表格过于拥挤，提高了可读性和可操作性。
灵活性：用户可以根据需要自由滚动表格，以便查看感兴趣的数据，而不需要整体滚动页面或缩放页面来适应表格大小。

移动端表格的水平滚动适用于许多场景，包括但不限于：

数据报表：当需要在移动设备上展示大量数据时，水平滚动可以帮助用户浏览和分析数据，提高数据可视化效果。
电子商务：在移动购物应用中，商品属性和价格等信息通常以表格形式展示，水平滚动可以确保用户能够查看完整的商品信息。
数据录入和编辑：在移动应用中，当需要填写或编辑大量表格数据时，水平滚动可以提供更好的编辑体验，确保用户能够方便地操作和修改数据。

腾讯云提供了一系列与移动端表格相关的产品和服务，包括：

腾讯云移动分析（https://cloud.tencent.com/product/ma）：提供移动应用数据分析和可视化报表功能，可以帮助开发者了解用户行为和应用性能。
腾讯云移动推送（https://cloud.tencent.com/product/tpns）：提供移动设备消息推送服务，可以用于向移动应用用户发送通知和消息。
腾讯云移动直播（https://cloud.tencent.com/product/mlvb）：提供移动端实时音视频直播服务，可以用于在移动应用中展示实时的音视频内容。

以上是关于移动端表格的水平滚动的完善且全面的答案，希望能对您有所帮助。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

移动端滚动研究

移动web滚动问题在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll...发现触发的时机区分android和ios两种情况，具体可以看下面表格: | 机型(内核) | body滚动 | 局部滚动 | | :-: | :-: | :-: | | ios | 不能实时触发 |...关于模拟滚动概念正常的滚动：我们平时使用的scroll，包括上面讲的滚动都属于正常滚动，利用浏览器自身提供的滚动条来实现滚动，底层是由浏览器内核控制。...使用rAF（requestAnimationFrame）触发滚动事件如果页面只需要兼容高版本浏览器或应用在移动端，又或者页面需要追求高精度的效果，那么可以使用浏览器的原生方法 rAF（requestAnimationFrame...timer = setTimeout(function(){ body.classList.remove('disable-hover') },500); }, false); 参考移动

3.2K2 0

移动端复杂表格表头

复杂表格表头前言最近做移动端的h5项目，要做一个可配置表头的复杂表格，网上找了很久也没什么好方法，结合网上的一些例子，在此做一了一个完整的vue版的例子。...preventDefault: false, // 阻止浏览器滑动默认行为 probeType: 3, //需要使用 iscroll-probe.js 才能生效 probeType ： 1 滚动不繁忙的时候触发...: true, //主要在上下左右滚动都生效时使用，可以向任意方向滚动。...eventPassthrough: false, //使用 IScroll 的横轴滚动时，如想使用系统立轴滚动并在横轴上生效，请开启。....rolling-table 要设置高度，不然向上滚动失效 2.固定和行与列，即：rows、cross 的position要设为relative 最终效果就如上图。

4.3K3 0

移动端局部dom实现滚动

移动端局部dom添加滑动事件源码 /** * moveTopLimit: 移动过程中，随着手指的滑动 dom的偏移量 * modifyTopLimit: 触发touchEnd的时候我们需要进行吸顶这样的一个交互...设置吸顶的范围 */ export default class TouchMove { constructor(params) { this.props = params;...== '[object String]')) { throw new Error(`${item}传参错误，请传入数字或者字符类型的数字`); }...this.moveY = event.touches[0].clientY; this.offset = (this.moveY - this.oldMoveY); // 获取dom当前滚动值

9461 0

javascript禁止移动端网页滚动

禁止网页滚动，电脑端其实只要给body加overflow: hidden;css即可，移动端测试发现谷歌可以，国产浏览器阵亡，其实我记得很久之前我遇到过这个问题，最后好像用纯css解决了，但是想不起来了...，于是乎百度搜了个js的方法，故记录下！...passive:false});//禁止页面滑动 document.removeEventListener("touchmove",mo,{passive:false});//恢复可滑动尝试给body的css...设置position: fixed;来解决问题，但是这样网页就乱了，所以最终还是用js解决了下，如果哪位大佬知道怎么文雅的用css解决这个问题，请务必留言告知，谢谢！

1.6K2 0

如何纯CSS实现标题栏、表格头水平滚动垂直不滚动

有些报表会很宽，浏览器水平放不下，需要水平滚动显示，这个可以设置overflow-y:hidden实现，很基本的实现，没什么难度。但是，如果同时希望垂直滚动的时候，表格头是固定的。此时该如何实现呢？...box{display:flex;flex-direction:column;}.top{height:30px;}.content{flex:1}但是实现代码比起：《纯CSS实现标题栏、表格头水平滚动垂直不滚动...这里有一个特别注意的地方，就是需要设置 top: 0;单独设置position: sticky; 无效。...https://codepen.io/lujun-zhou/pen/MWmGMyP如果使用绝对定位实现，这个其实没有啥好说的。...转载本站文章《如何纯CSS实现标题栏、表格头水平滚动垂直不滚动》,请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/html5/2021_0731_8650

1.6K0 0

移动端框架滚动类 iScroll5

HTML5学堂：移动端开发中，经常遇到需要模拟APP的效果header或是footer固定住，里面的内容区域实现滚动。但是对低端手机单纯使用CSS是兼容不了，需要JavaScript的支持。...本文讲解了使用iScroll5的使用方法，解决了固定高度的容器内滚动内容。...iscroll诞生的意义之所以iscroll会诞生，主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容...这个不幸的规则导致所有web-app要模拟成app的样子时，只能由一个绝对定位的header或是footer再加上一个可以内容的滚动的中间区域组成。　　...如果希望ul中的内容发生滚动，需要在外层添加一层，同时将iScroll的功能添加到最外层上。

1.2K9 0

web移动端：touchmove实现局部滚动

总结一下最近项目用到的一个功能点，具体要求如下： body中会呈现一个可滚动的长页面，在点击某个按钮的时候，会出现一个弹出框，由于弹出框的内容较长，会出现滚动条，但是要保证位于弹框下部的body在弹框滚动的时候不触发滚动事件...touchmove事件的要点主要是移动方向的判断和滑动边界的判断移动方向的判断 var replyListTop=parseInt($(".replyList").css("top")...moveEndY-startY; //向上滑动 if(moveY < 0){ } //向下滑动 else if(moveY > 0){ } }); 移动边界的判断...true:false B.向下滑动到下边界由于滚动区域是包裹在replyContainer里面的，所以滚动区域的初始top值为标题区域的高度，只要标题区域的高度 == 滚动区域的top值...{ $(".replyList").css("top",replyListTop+"px"); replyListTop= replyListTop+moveY; //判断加上移动后的位置是否越界

1.4K2 0

移动端滚动加载-----jQuery 和原生JS

判断滚动条到底部，需要用到DOM的三个属性值，使用jQuery分别是： $('body').scrollTop()为滚动条在Y轴上的滚动距离。...$(window).height()为内容可视区域的高度。 $('body').height()为内容可视区域的高度加上溢出（滚动）的距离。...从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为('body').scrollTop() +(window).height() == 1.绑定滚动监听事件 $(window).bind('scroll...Y轴上的滚动距离。...clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

22.3K1 0

【总结】1823- 移动端滚动穿透与滚动溢出解决方案

滚动穿透问题描述在移动端 WEB 开发的时候（小程序也雷同），如上录屏所示，如果页面超过一屏高度出现滚动条时，在 fixed 定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滚动，看起来好像事件穿透到下面的...问题原因能够猜想是文档（document）的滚动事件被触发了，如果能禁用滚动事件就好办了。...Step 1、监听弹窗最外层元素（popup）的 touchmove 事件并阻止默认行为来禁用所有滚动（包括弹窗内部的滚动元素）。...Step 2、释放弹窗内的滚动元素，允许其滚动：同样监听 touchmove 事件，但是阻止该滚动元素的冒泡行为（stopPropagation），使得在滚动的时候最外层元素（popup）无法接收到 touchmove...值描述 auto 默认效果，元素的滚动可以传播到祖先元素。 contain 阻止滚动链，滚动不会传播到祖先元素，但是会显示节点自身的局部效果。

5671 1

从 antDesign 来窥探移动端“滚动穿透”行为

在移动端，我们完全可以使用一种通用的解决方案来解决上述造成“滚动穿透”意外行为：无论元素是否可以滚动时，每次元素的拖拽事件触发时我们只需要进行判断：寻找当前触发 touchMove 事件 event.target...通过 useTouch 这个 hook 我们可以在移动端配合 touchstart、onTouchMove 轻松的计算出手指拖动时的方向和距离。...useScrollLock 通用解决方案上边我们了解了一个基础的 useTouch 关于拖拽位置计算的 hook 以及 getScrollParent 获取区域内最近的可滚动祖先元素的方法，接下来我们就来看看在移动端中关于阻止...上述的代码仍然是按照我们在文章开头讲述的解决思路来解决移动端滚动链接的意外行为。...为 body 添加 overflow:hidden 其实在移动端并没什么太大的实际作用，我们 touchmove 事件中的处理逻辑对于阻止意外滚动行为的发生已经完全足够了。

5332 0

解决移动端水平滚动使用justify-content显示不全问题

今天做移动端页面遇到一个坑，我需要实现的效果是这样的 ? 由于选项的个数是不一定的，如果很少的话不会有横向滚动，是需要居中的 ?...自然而然的是这么写的 .father { display:flex; justify-content: center;...flex-direction: column; align-items: center; } } 结果会发现第一个元素是展示不全的，...如果把father里的justify-content: center;换成justify-content: space-between;或者justify-content: left; 是可以的，但是当只展示两三个选项时就会间距过大...而我们需要选项过少的时候是center效果，多了则显示全并能滚动。想过对第一个选项的css单独处理，但是还要判断选项个数，其实和自己试出来的页面能展示多少个选项不滚动没区别。

2.6K2 0

js - 移动端的超出滚动功能，附带滚动条，可解决弹层中滚动穿透问题。

背景: 弹层里边有可滚动区域时，在移动端的坑我就不多说了。找了很多解决滚动穿透的方案，最终都不能完美解决。一气之下自己js撸了一个。效果图： ?...原理： 1、解决滚动穿透：通过给弹层绑定touchmove和mousewheel事件，取消默认行为实现。...2、取消默认行为后不能滚动：给需要滚动展示的区域绑定touchstart、touchmove和mousewheel事件，监听触发区域的Y值，对应修改可滚动区域的translateY值，实现滚动效果。...37 transY += moveY; 38 if (moveY > 0 && transY > 0) { 39 /* 鼠标向下移动...touchToBottom(params.scroll, params.bar); 117 } 118 }); 119 } 120 完整demo见github：移动端超出滚动效果

7.2K1 0

有意思的水平横向溢出滚动

来看看这么一种情况：我们有一个垂直方向溢出滚动的容器，以及一个水平方向溢出滚动的容器：如果使用的是非触控板（大部分用户没有触控板），而是使用鼠标来进行操作，会发现，这两个容器中，只有垂直方向溢出滚动的容器...，是可以响应鼠标滚轮的：垂直方向溢出滚动的容器，正常响应鼠标滚轮，可滚动内容水平方向溢出滚动的容器，不会响应鼠标滚轮，不可滚动内容那么，这里可能就是一个用户痛点。...那是必须的，本文就将介绍一种可能可行的技巧，在特定场景下在水平方向溢出滚动的容器，依然可以用鼠标滚轮进行滚动。旋转大法是的，既然只有垂直方向的溢出，才能响应滚轮操作。那我们不妨从这个角度入手。...要想变成水平方向的，我们只需要给容器旋转 90° 不就行了吗？...，就变成了水平的容器，图中鼠标没有在滚动条上容器的运动就是通过滚轮实现的。

2.5K1 0

highcharts移动端使用-支持vue-支持横向滚动-代码封装

100, fontFamily: 'STKaiti'}, x: 10, y: 10/* 相对于水平、垂直对齐的偏移量...*/ visible: true/* 是否显示坐标轴 */ /* 每个小刻度的线的控制设置黑色的Y轴次级刻度线...100, fontFamily: 'STKaiti'}, x: 10, y: 10/* 相对于水平、垂直对齐的偏移量...zIndex: 5 // 控制层级 }] /* 每个小刻度的线的控制...设置黑色的Y轴次级刻度线 */ // minorGridLineColor: '#C5EEFA',/*次网格线的颜色*/

2.8K2 0

【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )

一、移动端页面布局方案移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端与移动端访问的是不同的页面 , 目前的京东 / 淘宝等电商网站移动端页面采取的该方案 ; 响应式页面兼容移动端...: 开发难度较大 , PC 端与移动端访问的是相同的页面 ; 1、单独制作的移动端页面通过设备类型判断要加载的网页类型 , 一般会在域名前添加 m 打开移动端 , 如京东域名为 jd.com , 使用...m.jd.com 可以访问其移动端页面 ; 如京东商场 , 在浏览器中输入 https://www.jd.com/ 域名 , 进入的是 PC 端的网页 , 在浏览器中 , 按 F12 进入调试模式..., 选择手机设备调试 , 输入 https://www.jd.com/ 域名 , 会自动跳转到 https://m.jd.com/ 手机端页面中 , 京东后台会认为是移动设备请求页面 , 自动跳转到移动端页面...; 2、响应式页面兼容移动端响应式页面兼容移动端的原理是通过判断当前的屏幕宽度 , 改变当前的页面样式 , 适应不同的设备 ; 如果不断地缩小浏览器的窗口的宽度 , 网页会不停地自适应修改布局

3.7K4 0

Android开发实现自定义水平滚动的容器示例

本文实例讲述了Android开发实现自定义水平滚动的容器。...， for (int i = 0; i < getChildCount(); i++) { View view = getChildAt(i); //给水平方向的每个view定位 view.layout...isFinish; /** * * @param scrollX * x坐标 * @param scrollY * y坐标 * @param distanceX * X方向移动的距离...* @param distanceY * y方向移动的距离 */ public void startScroll(int scrollX, int scrollY, int distanceX...false：移动已经停止 */ public boolean computeScrollOffset() { if (isFinish) { return false; } long timePassed

7471 0

创建水平滚动的正确方式【CSS 网格布局】

，在移动端中我们一直使用横向布局。...本文，我们探讨 CSS 网格的弹性布局，它是如何帮助我们实现水平滚动的，同时处理它带来的缺陷。...但是，当采用水平滚动布局时，至少需要满足两点 UX 原则：你的设计必须在视觉上提醒他人，这是一组可以水平滚动的内容。最好的方法，就是让可滚动的内容露出一部分。用户知道什么时候滚到末尾，这很重要。...滚动的部分内容，必须在容器边缘露出来。滚动时，容器的内容必须从屏幕的边缘滑出来。容器内两个内容之间的距离要小于边缘的距离，这样容器两端都会有更大的空间（这提示用户他们已经滑到最后）。...如下：需要注意的是，容器两端的距离和周围内容的距离是匹配的（也就是整体布局要和谐）。整体布局现在，我们已经基本明白水平滚动容器的特性了。接下来，我们考虑使用 CSS Grid 网格布局来编码。

2.6K5 0

常见的移动端问题

width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 　　（部分安卓手机的UC...浏览器写完以后还是可以放大缩小）二：将页面中的字段调取本地功能；　　电话：点击拨打电话　　信息：单击这里给peun发电子邮件三：忽略页面中识别手机号的功能　　（ios上会明显有时候会把数字当成电话号码）四：忽略Android平台中对邮箱地址的识别　　//iphone的私有标签，iphone顶端状态条的样式。

8161 0

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

通过多次爬坑，发现了这些监听滚动来加载更多的组件的共同点，因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的，所以是进入页面则直接触发一次，当监听到滚动事件之后，继续加载更多，所以对于无限滚动加载不需要写首次载入列表的函数...已全部加载完成"; this.loadingComplete=true; this.loading = false; } }, 这里重要的是判断...，当当前页面为0的时候，即第一页的时候，不需要setTimeout定时器，直接请求加载，当加载更多的时候可以加个定时器。...网上找到很多mint-ui 的loadmore组件来实现上拉加载更多，由于上拉触发相应的加载更多事件，所以当进入页面的时候应该不会自动载入数据，则这里可以加一个获取第一页数据的函数。

2.6K5 0

移动端的那些坑

Andriod 针对部分浏览器非预期的缓存机制，需要服务端添加如下HTTP头信息： ?...但是这种做法会取消掉浏览器其他的默认行为，比如页面默认的滚动。。。...scroll 相关的方法，参考：https://drafts.csswg.org/csso… polyfill：https://github.com/iamdustan/… 综合问题禁止页面滑动当你需要禁止移动端页面滑动的时候...css.sm-no-scroll { height: 100%; overflow: hidden; } 但由于禁掉了touchmove事件，导致iOS下你希望滚动的部分也无法滚动了，因此对于希望滚动的部分...1、mask 2、banner 3、fixed 4、sticky 点透移动端的 click 触发顺序是touchstart->touchmove->touchend->mousedown->mousemove

1.8K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭