解决overflow:scroll在移动端上下滑动，左右不滑动的问题

最新推荐文章于 2024-09-11 15:52:24 发布
最新推荐文章于 2024-09-11 15:52:24 发布
阅读量806 收藏 5
点赞数 10
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sb1784591708/article/details/135817452
版权
本文介绍了如何在移动端CSS中实现overflow:scroll时，只让元素在水平方向上滚动，而避免垂直滚动。方法包括使用overflow:auto;overflow-y:hidden;以及touch-action:pan-x;来控制滑动行为，减少用户体验上的卡顿。
摘要由CSDN通过智能技术生成

解决overflow:scroll在移动端上下滑动，左右不滑动的问题

CSS中"overflow:scroll"可不可以只左右滚动，上下不滚动

①在需要滚动的父元素下：
overflow: auto;
overflow-y: hidden;

②禁止y轴滚动，允许X轴滚动（不建议，整个元素不能滚动页面了，给用户造成卡顿的现象）
touch-action: pan-x;

努力吧！挺自己
关注
移动端解决左右滑动的纯css布局
管乐明的博客
05-29 442
移动端解决左右滑动的纯css布局 <!DOCTYPE html> <html> <head> <title>纯css实现左右滑动</title> <style type="text/css"> ul,li{ list-style: none;; } .slide-box{ margin-top:200px;
html页面滑动不流畅,解决页面使用overflow:scroll在移动端iOS系统上滑动出现卡顿的问题...
weixin_35975406的博客
06-03 1571
对某个div或模块使用了overflow:scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。通过一个早上的爬虫搜索和与前端开发高手的技术探讨得知以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling:touch;据说是因为这行代码启用了硬件加速特性，所以滑动很流畅。但是这个属性也会相对耗费更多内存。在...
移动端丨-webkit-overflow-scrolling:touch属性导致页面卡住
weixin_30245867的博客
12-19 1080
起因 起因 -webkit-overflow-scrolling 问题 解决方案： 方案一 方案二 思考为什么会出现这个问题 总结 故事的起因是，在一个多列表的页面上，页面在iOS11，跟iOS10中会发生页面卡住，不能进行滚动。 然后就怀疑是自己的样式写的出了问题，就一直排查定位元素的样式，怎么都找不到问题所在。 ...
用JS有效解决移动w用JS有效解决移动web浏览器中HTML元素的overflow:sceb浏览器中HTML元素的overflow:scroll滚动属性失效问题...
sfkong31893189的博客
01-15 1233
web移动平台前端UI开发工作，兼容问题超多，今儿又遇到一个。产品方要求在某固定尺寸容器内显示内容，但内容条数未知；如果条数过多，容器显示滚动条。这鸟需求按说是So easy，容器设死宽、高，CSS加属性overflow:scroll;完事！可拿设备去测的时候有趣了，Pc all browser正常，ios正常 ，android失效。泥马在android下效果与 overflow:hidden...
overflow-y:scroll下pc端鼠标可以滚轮滚动，移动端手指不能滑动的问题
最新发布
Miraitowat的博客
09-11 287
在mounted中写入以下代码即可，.wrap是需要滚动的元素。
iScroll版本
weixin_42235173的博客
06-05 295
版本 针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。 目前我们有以下版本： iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。 iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又...
解决页面使用overflow: scroll在移动端iOS系统上滑动出现卡顿的问题
weixin_34332905的博客
09-15 1430
对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。 通过一个早上的爬虫搜索和与前端开发高手的技术探讨得知以下代码可解决这种卡顿的问题： -webkit-overflow-scrolling: touch; 据说是因为这行代码启用了硬件加速特性，所以滑动很流畅。但是这个属性也会相对耗费更...
overflow: hidden scroll 在移动端失效问题
qq_33582129的博客
09-13 1万+
.drag_view_div{ width: 100%; height: 100%; background: orangered; overflow-y: scroll; overflow: hidden scroll; position: relative; } 添加 overflow-y: scroll 之后就一切正常了  ...
移动端微信浏览器使用overflow：scroll属性实现横向滚动没效果
华山派developer的博客
06-07 1881
在写公众号网页时候，如果菜单过多的话，要实现左右滚动。然后列表内容实现上下滚动。就用了overflow-x和overflow-y的样式，结果在电脑浏览器测试时候完全没问题，但打包上传后，在微信里看上下是可以滚动的，左右完全没效果。在手机其他浏览器里正常没问题。 我是参考了这篇说在苹果浏览器中overflow不起作用的文章解决的，但实际上我的代码只是在微信浏览器上没效果，反而在safari浏览器里没问题。 解决方法： A：是父容器，加overflow样式的 C：是子容器，是具体显示需要滚动的内容。 因为需要它
解决页面使用overflow: scroll在iOS上滑动卡顿的问题1
08-03
标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上，当HTML元素使用CSS属性`overflow: scroll`时，滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现，使得开发者...
移动端webapp支持overflow
12-20
移动版游戏器不支持overflow:auto，即多余内容隐藏，并能通过手指拉动来滚动内容。目前有很多模拟这种效果的js库，如iScroll。但经项目测试，iscroll在很多浏览器中有明显的性能问题。根据isSCROLL改写的
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
12-09
当你希望一个元素在内容超过其容器宽度或高度时，仅显示垂直滚动条（即上下滚动），而不是同时显示水平滚动条，你可以通过设置特定的 `overflow` 属性值来实现这一效果。 默认情况下，`overflow:scroll` 会同时启用...
overflow:scroll 移动端失效
07-20
2. 浏览器不支持滚动：在某些移动端浏览器中，特别是一些老旧的浏览器，可能不支持 overflow:scroll 属性。 解决方法：可以使用 Javascript 或者专门的滚动插件来实现滚动效果，或者尝试使用其他浏览器测试是否支持...
css overflow: scroll 去滚动条后，低端手机有兼容问题，可以这样
会飞的程序猿
10-15 514
// 去除滑动条，但是低端机有兼容性问题，可以最外层加个div，样式如：.css-jc .overflow::-webkit-scrollbar { display:none; } .css-jc { height: 1.55rem; padding: .2rem .4rem; overflow: hidden; } .css-main { overflow: scroll; font-size: 0; white-spac.
CSS中"overflow:scroll"可不可以只上下滚动，左右不滚动
热门推荐
shao.bing的专栏
10-12 1万+
CSS中"overflow:scroll"默认是左右，上下都滚动 如何设置成：当长度超出DIV长度的时候，只有上下滚动，左右无论超出多长都不滚动，也不会出现下面的滚动杆？ 如果左右没有超出内容时，用overflow:auto; 如果左右有超出内容，用overflow-x: hidden; 不过IE本身也是有问题的： 在设置Frame时，有一属性是scrolling="ye
移动端overflow失效问题
moerduo0的博客
10-08 342
html{ position: fixed; height: 100%; width: 100%; } body{ position: fixed; height: 100%; width: 100%; }
探索Overscroll：为移动Web带来丝滑滚动体验
gitblog_00085的博客
05-23 371
探索Overscroll：为移动Web带来丝滑滚动体验 去发现同类优质开源项目:https://gitcode.com/ 项目简介 Overscroll v1.7.7 是一款基于jQuery的插件和polyfill，旨在为桌面浏览器模拟移动Safari中的overflow-scrolling效果。这个项目由Jonathan Azoff于2014年创建，适用于最新版本的jQuery，提供了一种在非i...
关于 overflow 滚动条(滑动条)配置，简单使用的案例和案例代码
youyudehan的博客
01-19 2846
简单了解关于滚动条(滑动条)的样式配置，了解其配置的注意事项，完成实现简单的样式配置实例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值