精华内容
下载资源
问答
  • 安卓5版本手机上的H5网页无法滚动。...执行这段代码导致的滚动失效,当时为什么这么写呢,有些忘了,以后这块代码想起来之后,要加上注释。 安卓滚动问题一般需要先想到touch的问题。一点一点排查。定位原因。 ...

    安卓5版本手机上的H5网页无法滚动。

    原来是我在vue生命周期mounted的时候执行了以下代码

    document.body.addEventListener('touchmove', e => {
        e.preventDefault();
    });
    

    执行这段代码导致的滚动失效,当时为什么这么写呢,有些忘了,以后这块代码想起来之后,要加上注释。

    安卓滚动问题一般需要先想到touch的问题。一点一点排查。定位原因。

    展开全文
  • 遇到的问题: 函数成功执行,代码也没问题,但是页面就是没有实现滚动 js代码如下: scrollToBottom() { //滚动 var topPublicity = this.$refs.topPublicity; window.setTimeout(() => { Math.animation...

    记录遇到的问题

    场景:想要页面点击出触发函数实现页面的滚动
    遇到的问题: 函数成功执行,代码也没问题,但是页面就是没有实现滚动
    js代码如下

    scrollToBottom() {
              //滚动
                var topPublicity = this.$refs.topPublicity;
    
                window.setTimeout(() => {
                    Math.animation(document.documentElement.scrollTop || document.body.scrollTop,  this.$refs.intro.offsetTop - 224 , 'Cubic.easeOut', function(value) {
                        topPublicity.scrollTo( 0, value)
                    });
                }, 100)
    
            },
    

    解释:
    我是利用ref来获取页面元素

    问题原因:
    滚动的对象找错了,虽然是在topPublicity这个页面上滚动,但是在他的外层还有一个父元素main,相当于是main才是容器,而topPublicitys是里面的内容,我们最终是要容器进行页面滚动

    修改代码:

    var topPublicity = this.$refs.topPublicity.parentElement;
    
    
    展开全文
  • 建议先看这篇文章 (-webkit-overflow-scrolling:touch) 下面 说一下点击其他区域,再在...在一个可上下滑动的区域,滚动条在最上面再向上滑动或滚动条在最下面再向下滑,松手后立即滑动滚动区域,滚动出现bug ...

    建议先看这篇文章   (-webkit-overflow-scrolling:touch)

    下面 说一下点击其他区域,再在滚动区域滑动,滚动条无法滚动 这个bug

    问题复现:

    由非滚动区域向滚动区域滑动,再迅速滑动滚动区域,此时滚动会出现bug

    在一个可上下滑动的区域,滚动条在最上面再向上滑动或滚动条在最下面再向下滑,松手后立即滑动滚动区域,滚动出现bug

                                              

                     正常                                                        复现问题1                                                   复现问题2

     

    成因:

    滚到尽头继续滚动,分为两种情况,两个对象.

    1. 由其他位置滚到尽头,乘势继续滚动,全局滚动与局部滚动均有一个橡皮筋弹动效果.
    2. 完全静止在尽头后,继续向尽头滚动,全局滚动有橡皮筋弹动.
    局部滚动则是禁止继续滚动.

    而问题在于,局部滚动虽然禁止了滚动,但依然计算橡皮筋弹动效果的时间.而在此期间,由于禁止滚动,那么在一个动效时间内,是完全无法滚动的.

     

    下面是解决后的代码,想重现问题可以去掉监听事件 (react编写,原生或者vue版可以私...)

    测试使用ios版本为13如有小伙伴在低版本看不到橡皮筋效果请在类“content”上加-webkit-overflow-scrolling:touch属性.

    import React from 'react' 
    
    export default class extends React.Component {
        componentDidMount() {
            //去除ios滚动回弹
            let startY = 0;
            const touchStart = (e) => {
                try {
                    let touch = e.touches[0],
                        y     = Number(touch.pageY);
                    startY = y;
                } catch (e) {
                    alert(e);
                }
            };
            let ele = document.querySelector('.content');
            const touchMove = (e) => {
                let point = e.touches[0];
                if (ele.contains(e.target)) {
                    if (ele.scrollTop === 0 && point.clientY > startY) {
                        e.preventDefault();
                    } else if (ele.scrollTop === ele.scrollHeight - ele.offsetHeight && point.clientY < startY) {
                        e.preventDefault()
                    }
                } else {
                    e.preventDefault();
                }
            };
            document.addEventListener('touchstart', touchStart);
            document.addEventListener('touchmove', touchMove, { passive: false });
        }
    
        render(){
            const contentStyle = {
                width: '100vw',
                height: '85vh',
                position: 'absolute',
                top: 0,
                bottom: '15vh',
                overflowY: 'scroll',
                background: 'burlywood',
            };
            const footerStyle = {
                width: '100%',
                height: '15vh',
                position: 'absolute',
                bottom: 0,
                background: 'gray',
                zIndex: 2
            };
            return (
                <div className="scroll-test" style={{height: '100vh'}}>
                    <div style={{overflow: "hidden"}}>
                        <div className="content" style={contentStyle}>
                            {[1,3,3,4,5,67,9,8].map((value, index, array) => <div style={{height: '20vh'}} key={index}>{value}</div>)}
                        </div>
                    </div>
                    <div className="footer" style={footerStyle}>super</div>
                </div>
            )
        }
    }
    
    展开全文
  • <p><img alt="" height="541" src="https://img-ask.csdnimg.cn/upload/1616477952025.png" width="615" /></p>
  • 页面滚动时没有问题的。 一开始以为是android版本的兼容性问题,后来又查了很多资料说是echarts的问题。最后经过我两天的研究,在渲染echarts的div元素外面再包一层div标签。并设置样式为style=".

    项目背景:Angular7 + echarts 4.8.0 开发的web项目。有一个全是由各种图表组成的页面,在android10系统的手机上访问页面时,发现滑动界面不能正常的向下滚动,只有滑动非图表区域的地方,才能滚动。但是在pc端和ios系统的手机,以及android5.1系统的手机上。页面滚动时没有问题的。

     一开始以为是android版本的兼容性问题,后来又查了很多资料说是echarts的问题。最后经过我两天的研究,在渲染echarts的div元素外面再包一层div标签。并设置样式为style="overflow:auto",在移动端就能正常滚动了!

    <div style="width: 100%;height: 100%;overflow: auto;position: relative;">
      <div class="chart-container" echarts #echartDom>
      </div>
    </div>

    我自己还封装了一个组件,也不能滚动。解决方案同上。

    总结:应该是div的原因:和echarts应该没有关系。

    展开全文
  • mui框架搭建的APP页面区域滚动失效

    千次阅读 2018-11-17 08:09:04
    最近被 mui 框架搞得有点晕,mui 框架的上拉加载和下拉刷新 使得当前区域的滚动行为失效。这是我摸索出来的一种解决方法,如果有更好的方式的话,请不吝赐教! 只要记住: ①position 要设置为 absolute,其实它...
  • js滚动失效

    千次阅读 2016-06-08 12:00:21
    js脚本中的滚动事件失效应该是样式表里面有绝对定位,导致无法触发页面滚动事件。
  • vue+elementui项目,列表页面滚动加载数据 产生问题 当页面缩放时会导致初始化滚动条页面不存在,无法滚动加载数据 解决方法 当不存在滚动条时利用滚轮事件代替滚动条事件,滚动条出现恢复滚动事件(这里需要恢复...
  • <div><p>在做一个模板和图片合成的...但是偶现出现了页面滚动失效的情况,无法滚动。 是否有解决方案或者可以规避的方案? 谢谢~~</p><p>该提问来源于开源项目:xyxiao001/vue-cropper</p></div>
  • Ant Design React 遇到打开二级弹框引起的页面滚动失效,使用的是ModalForm。 原因:在打开弹框的时候会给body标签上加style=“width: calc(100% - 15px); overflow: hidden;”,隐藏标签的滚动条,关闭弹框会清除...
  • 当用户滚动页面后,原本绑定在fixed定位的元素上的 touchstart 事件会时常失效! 注意,是时常,而且是滚动后 这就让我百思不得其解,来分析分析这个bug 首先我要检查我的代码,看是不是我的代码的错误 ...
  • 背景:最近因早期项目中反映出很多页面在ipad以及苹果手机中出现无法滑动的问题,所以开始去排查代码中的问题,经过重重测试最后定位到iframe的问题。 处理方式:通过查找才发现在ios下iframe的滚动兼容确实存在...
  • 当我们想要禁止页面滚动时,设置下面的属性,即可生效: // 设置 fixed 布局 document.body.style.position = 'fixed'; document.body.style.height = '100%'; document.body.style.width = '100%.
  • <div class="container" id=...问题是:页面container滚动的时候footer 会随着页面移动,停止滚动了,footer才会回到底部。只有在原生APP里打开是这样,web浏览器打开没有这问题。请大神指点下怎么解决???
  • 第一次遇到position:fixed失效的原因是父元素设置了transfrom属性,导致该元素下的子元素position:fiexed失效,解决办法是父元素去掉transfrom属性 今天再一次遇到position:fixed失效,原因却不是transfrom,找了...
  • <div><p>当使用 v-touch:swipeleft, v-touch:swiperight 绑定了事件,原生的页面滚动失效了</p><p>该提问来源于开源项目:vuejs/vue-touch</p></div>
  • 完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动失效问题
  • 进入页面之后,需要页面滚动到指定的标签位置,但是如下设置之后,并没有什么效果 document.body.scrollTop=(0,300) 解决方案: let htmlDom = document.documentElement; htmlDom.scrollTo(0,300) 问题解决...
  • 之前在效仿做去哪网儿移动端的vue项目的时候有个使用better-scroll的环节,第一次使用的时候还是可以滚动的,刷新页面后却发现滚动失效了,寻找了好多方法,最终发现原因 先说解决方法:我按照视频的讲解,在生命...
  • 3.是的话代表点击的事件源为需要滑动的元素,判断其滑动的最高点和最低点加一个限制就ok了,类似碰壁反弹(手动改变scrollTop会导致页面有闪动现象) function handleScroll () { var ios = navigator....
  • <div class="scroll-wrapper"> ...局部滚动开启弹性滚动! body{ overflow: scroll; -webkit-overflow-scrolling: touch;   }   转载于:https://www.cnblogs.com/lidongfeng/p/4895527.html
  • 需求加了一个左右滑动的功能,但在加完之后发现页面不能上下滚动了。>头秃< 查资料发现,有个属性可以轻松解决此问题: 在需要操作的区域加上 touch-action:'pan-y' touch-action 属性:指定某个给定的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 403
精华内容 161
关键字:

页面滚动失效