关于移动端h5页面不能滑动问题的解决办法

页面不能滑动无非就是css和js两个方面的问题


有的人说如果我写很多个p标签不写任何样式看能不能滑动,如果能滑动说明是样式的原因,要是也不能滑动那就应该是js的原因,是有一定的道理的,但是先别忘了看一下你的html或body是不是加了height:100%;overflow:hidden;

1.下面分先说css的问题,主要排查overflow:hidden;

检查也有一定的顺序,检查超出高度的标签是否用了overflow:hidden;最好先检查html或body是不是加了height:100%;overflow:hidden;然后再看包裹在最外边的元素是否加了overflow:hidden;


2.再说下js方面的问题,主要是有在touchstart、touchmove或touchend等事件中的阻止默认事件的原因

例如:$("#myCarousel").on("touchstart", function (e) {

                     e.preventDefault();   

                     startX = e.originalEvent.changedTouches[0].pageX,
                    startY = e.originalEvent.changedTouches[0].pageY;

          });

这种代码其中e.preventDefault();会阻止掉默认的滚动行为。



  • 21
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
好的,下面是一个简单的移动端 H5 新闻页的代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>移动端H5新闻页</title> <style> /* 样式表 */ body { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; } .container { max-width: 600px; margin: 0 auto; padding: 16px; } .headline { font-size: 24px; font-weight: bold; margin-bottom: 16px; } .author { font-size: 12px; color: #999; margin-bottom: 8px; } .date { font-size: 12px; color: #999; margin-bottom: 16px; } .image { width: 100%; margin-bottom: 16px; } .text { text-align: justify; } .source { font-size: 12px; color: #999; margin-top: 16px; text-align: center; } </style> </head> <body> <div class="container"> <!-- 新闻头部 --> <h1 class="headline">这里是新闻标题</h1> <div class="author">作者:某某某</div> <div class="date">发布时间:2023-02-27</div> <!-- 新闻图片 --> <img class="image" src="https://picsum.photos/600/400" alt="新闻配图"> <!-- 新闻正文 --> <div class="text"> <p>这里是新闻正文。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non mi mauris. Fusce rutrum orci sit amet felis luctus elementum. Nullam sodales auctor est, eget posuere lorem interdum sed. Vivamus pellentesque venenatis dolor, non suscipit velit. Vestibulum in odio nec tortor fringilla ultrices. Fusce nec lacus ultricies, eleifend arcu vitae, maximus diam. Aenean sit amet pharetra nulla. Proin a arcu mauris. Sed dictum mauris libero, eu rhoncus mi accumsan eu. Integer iaculis, nisi sit amet ultrices efficitur, magna orci consequat enim, eu interdum eros mauris at metus.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ut bibendum metus. Duis a ipsum id nunc ultrices malesuada vel quis massa. Sed rhoncus lacinia tempor. Ut tempor efficitur tellus ac rhoncus. Nullam fermentum, velit et blandit pulvinar, arcu sapien aliquet risus, nec fermentum dolor arcu sed odio. In hac habitasse platea dictumst. Suspendisse euismod faucibus ultrices. Sed efficitur lorem ac tristique suscipit.

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值