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

1. 先说css,主要排查 overflow:hidden;

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

解决方法:改为 overflow:auto;

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(); 会阻止掉默认的滚动行为。

  • 6
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
想要实现在H5页面上添加上下滚动的字幕效果,可以使用CSSJavaScript来完成。下面提供一种简单的方法,通过CSS的动画和JavaScript的定时器来实现。 首先,在HTML中添加一个div标签来承载字幕内容,例如: ``` <div id="scrolling-text">这里是滚动字幕</div> ``` 然后,在CSS中设置字幕的样式和动画效果,例如: ```css #scrolling-text { position: absolute; top: 0; animation: scroll 10s infinite linear; } @keyframes scroll { from { transform: translateY(0%); } to { transform: translateY(-100%); } } ``` 上述代码中,设置了字幕框的位置为绝对定位,并通过`transform`属性实现上下滚动的效果,`animation`属性定义了滚动动画的持续时间和循环次数。 接下来,在JavaScript中添加定时器,以控制字幕内容的更新,例如: ```javascript var textArray = ["这里是滚动字幕1", "这里是滚动字幕2", "这里是滚动字幕3"]; var currentIndex = 0; var scrollingText = document.getElementById("scrolling-text"); function updateText() { scrollingText.textContent = textArray[currentIndex]; currentIndex = (currentIndex + 1) % textArray.length; } setInterval(updateText, 5000); ``` 上述代码中,`textArray`数组存储了要展示的多个滚动字幕内容,`currentIndex`变量用于跟踪当前展示的字幕,`scrollingText`变量获取HTML中的字幕容器,`updateText`函数用于更新字幕内容,通过`textContent`属性将新的字幕文本赋值给容器,并且通过定时器每隔5秒调用一次`updateText`函数更新字幕内容。 通过以上的HTMLCSSJavaScript代码,就可以实现H5页面上的上下滚动字幕效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值