兼容IOS android 页面滑动的CSS设置

最新推荐文章于 2022-11-09 19:09:16 发布
最新推荐文章于 2022-11-09 19:09:16 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： H5/Mini-Program
转载请邮件联系我([email protected])，以取得授权，谢谢！https://yeshen.org
本文链接：https://blog.csdn.net/yeshennet/article/details/51222947
版权

 

<style type="text/css">
#scroller {
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    width: 100%;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
}

@media all and (-webkit-transform-3d) {
    #scroller {
        overflow-y: scroll;
        overflow-x: hidden;
    }
}
</style>

2019.3.19更新：

昨晚突然被问iOS和Android navigation的适配方案。（因为iOS的webview上面有一个navigation bar，导致可视范围有一点偏差。）还好我之前写过这篇博客，代码留了下来了。回家后自己开了电脑，试了一下是可以的。这里贴上代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>YESHEN</title>
    <style type="text/css">
    body {
        margin: 0px;
    }

    #title {
        height: 50px;
        background-color: blue;
        line-height: 50px;
        font-size: 30px;
        color: white;
    }

    #scroller {
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        position: absolute;
        width: 100%;
        top: 50px;
        bottom: 0px;
        right: 0px;
        left: 0px;
    }

    @media all and (-webkit-transform-3d) {
        #scroller {
            overflow-y: scroll;
            overflow-x: hidden;
        }
    }
    </style>
</head>

<body>
    <div id="title">
        2019
    </div>
    <div id="scroller">
        <br/>.<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>.<br/>
    </div>
</body>
</html>

 

预览效果大概是这样的

 

 

 

 

雨声不在
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 苹果滑动,使用CSS的类似Apple的滚动条
weixin_36251916的博客
08-04 726
小编典典苹果正在使用以下CSS怪物：::-webkit-scrollbar {width: 15px;height: 15px;}::-webkit-scrollbar-corner {background-image: url(http://i.stack.imgur.com/FguQn.png?corner.png);background-repeat: no-repeat;}::-webki...
Android webview实现网页轮播
weixuan_的博客
05-31 117
Android webview实现网页轮播
学习总结——通过css设置上下滑出，左右滑出动画效果
u012439689的博客
04-07 1万+
【背景】小程序需求中涉及了一个actionsheet半屏菜单，和一个滚动时候需要隐藏一半的icon，所以要求添加从底部滑出，从右侧滑出的动画效果。需要从底部滑出的半屏菜单是带黑色遮罩的模态弹窗页面，需要从右侧滑出的是悬浮的icon，我们使用了uniapp的框架，所以模板部分写法和vue类似 【关键字】css的animation，我是文档的搬运工CSS animation 属性 【底部滑出】 模板部分——一般的模态窗会直接设置显示隐藏，但是需要底部滑出的动画效果，内容区域不能直接通过控制dom显示隐藏来
IOS系统iphone6系列机型，CSS滚动穿透失效问题
Jensonhui's Blog
11-09 661
IOS，iphone6，滚动穿透失效问题及解决方案！！！
Android实现IOS相机滑动控件
09-01
主要为大家详细介绍了Android实现IOS相机滑动控件的相关资料，感兴趣的小伙伴们可以参考一下
弹框后禁止遮罩层后面页面滚动（兼容ios和android）.zip
08-20
layer弹框后滑动遮罩层部分会滚动后面的列表页，这是目前个人使用的最好的解决方案，兼容ios和android
CSS3模拟IOS滑动开关效果
09-24
主要为大家详细介绍了CSS3模拟IOS滑动开关效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android的仿IOS滑动删除
05-05
android的仿IOS的列表的滑动删除，eclipse版本。zip里有apk，可以先安装看下效果。
微信浏览器弹出框滑动时页面跟着滑动的实现代码（兼容Android和IOS端）
01-04
在做微信开发的时候遇到这个问题：微信浏览器弹出框滑动时页面跟着滑动。 我觉得这个问题用的是下面这几行代码： var $body = $('body'), dialogIsInView = !1,//当前是不是对话框 lastContentContainerScrollTop =...
-webkit-overflow-scrolling解决移动端iOS滚动卡顿现象
杨梦飞
03-07 1万+
css3中-webkit-overflow-scrolling使用方法 -webkit-overflow-scrolling: touch; //有回弹效果 -webkit-overflow-scrolling: auto; //滑到哪停到哪 实现滚动回弹效果的页面布局 (实战) html &lt;div class="containBox n...
【兼容性】ios上设置overflow: scroll不滚动bug
生如夏花 炫至茶靡
10-13 2万+
背景 目前遇到这么一个问题：我有一个可以向下展开的下来菜单，菜单初始高度大于300px左右，没有超过手机屏幕高度，当展开的时候如果超过手机屏幕高度时让父元素出现滚动条滚动，就是说内容的高度是动态的。 描述 此前我通过js动态获取屏幕高度，并设置为父元素的max-height。然后设置父元素overflow-y: scroll; 起初，我大概的代码布局如下： &lt;div className...
解决IOS中的超出滑动问题
Lucky_Q的博客
03-08 2619
项目中遇到的一个小bug, 折磨了整整一下午 遇到的问题就是: 整体可以超出部分左右滑动,但是表体同样需要可以超出部分上下滑动,但是表头不能跟着上下滑动. 在安卓上没有任何问题, 可是在IOS上客户就反应了, 在整体左右滑动的时候, 手指放在表体上只能上下滑动, 左右滑动的功能无法实现, 想要左右滑动必须在表头上左右滑动才能实现 下面粘一下html结构和css样式: &lt;div class=...
禁止ios浏览器页面上下滚动 (橡皮筋效果)
热门推荐
qq_40717869的博客
08-16 2万+
在ios任何版本的浏览器（包括ios微信内置的浏览器），滚动页面的时候会出现整个页面上下滚动的效果（百度说是橡皮筋效果），虽然不耽误使用，但是让人心烦，所以要禁止掉这个行为。 有两种方法可以解决这个问题：（推荐使用第二种方法） 1.用fixed定位来解决 解决思路：这个就是把html,body设置width: 100%; height: 100%; position: fixed;top:0...
纯css实现移动端横向滑动列表
zzzz1553110890的博客
12-15 1380
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scal
css解决ios上滑动卡顿
掘墓者的博客
07-23 1427
网上看了很多ios样式卡顿的解决方法， 最多的就是-webkit-overflow-scrolling: touch; 但是 如果加上这个属性会把固定的元素 一起滑动 解决方法： body{ overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; } 再将 需要滑动的元素加上下面几个属性 ...
cordova上下拖动页面出现黑色区域问题
yipanbo的专栏
04-11 2886
转载的，写的太好了，忍不住转载了。 原地址是：http://my.oschina.net/jack088/blog/392523 ----问题：cordova创建的应用，上下拖动页面的时候，会有黑色的区域。起初，我以为是dojo/mobile的问题，找了半天。后来我慢慢确定是cordova的问题，网上找了下，还真找到答案了。在此记录下。 ----解决办法： 修改
手机页面禁止滚动（兼容IOS和Android）
junjun222222的专栏
11-19 5192
最近在做一个微信页面，菜单显示的时候要出一个遮罩层，并且页面不能滑动，一开始代码如下： var flag=0; document.addEventListener('touchmove', function (event) { 　　 //监听滚动事件 if(flag==1){ event.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) } }); 手...
h5实现文件下载，兼容ios、android
最新发布
06-09
要实现文件下载，可以使用 HTML5 中的 `a` 标签和 `download` 属性。该属性指定了要下载的文件的名称，当用户点击链接时，文件将被下载到本地计算机或移动设备上。 以下是一个例子，展示如何使用 `a` 标签和 `download` 属性来下载文件： ```html <a href="/path/to/file.pdf" download="file.pdf">Download PDF</a> ``` 在上面的例子中，`href` 属性指定了要下载的文件的 URL，`download` 属性指定了文件的名称。当用户点击链接时，浏览器将开始下载文件并将其保存为 "file.pdf"。 注意，如果要下载的文件是动态生成的，你需要确保在服务器端设置正确的 MIME 类型。否则，浏览器可能无法正确地处理文件。 此外，如果要确保在 iOS 和 Android 上兼容，最好在页面的头部添加以下标记： ```html <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> ``` 这将确保页面正确地缩放并适应移动设备的屏幕大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值