div ios 无法滚动_div滚动导致ios键盘无法输入 - CSDN
  • iosdiv滚动不流畅

    2019-09-07 11:31:32
    开发中碰到在IOSdiv滚动滚动不流畅,百度it发现只要在css加个“-webkit-overflow-scrolling: touch;” ,在IOS上就能流畅的滚来滚去~~ .css{ overflow:auto;/* winphone8和android4+ */ -webkit-o...

    开发中碰到在IOS下div的滚动条滚动不流畅,百度it发现只要在css加个“-webkit-overflow-scrolling: touch;” ,在IOS上就能流畅的滚来滚去~~

    .css{
    overflow:auto;/* winphone8和android4+ */
    -webkit-overflow-scrolling: touch; /* ios5+ */
    }
    

    转载于:https://my.oschina.net/xjw129xjt/blog/685668

    展开全文
  • ios监听滚动问题

    2019-11-25 11:43:37
    最近项目首页改版增加一个动效,简单地说就是当滚动滚动到一定位置,出现两个div。 安卓一切都正常,和预想的一样通过 window.addEventListener(‘scroll’, () => {});效果还算不错。但是到了ios发现,有很...

    最近项目首页改版增加一个动效,简单地说就是当滚动条滚动到一定位置,出现两个div。
    安卓一切都正常,和预想的一样通过 window.addEventListener(‘scroll’, () => {});效果还算不错。但是到了ios发现,有很严重的延时,不流畅。一开始以为是有延时,后来发现并不是延时。
    1,ios 监听滚动,为了减小开销,滚动结束才会触发事件,滚动过程中不会实时监听触发。
    2,网上有说 用监听touchmove 替代 监听scroll,但是调试的时候发现touchmove的触发频率很低,视觉效果上还是会有一个延时。
    3,后来找了些资料说是 用div内部的滚动(overflow:scroll)代替页面整体的滚动。这种方法的确可以在ios上解决上面的问题,但又引发了一个新的问题,就是ios的页面滑动会变的非常卡,没有惯性。然后又在网上找资料,找到了这个属性-webkit-overflow-scrolling。这个属性控制元素在移动设备上是否使用滚动回弹效果.当值设为touch,会有回弹效果,设为auto,手指离开滚动立刻结束。于是我在页面里设置了这个属性,果然有了效果。。。。。但是又引发了问题,一些fixed不起作用了等。
    4,后来想到禁用滚动条,采用touch+transform来模拟滚动。最后是采用的better-scroll插件解决的这个问题,完美解决,下篇文章讲一下自己运用better-scroll遇到的一些问题。

    展开全文
  • 在解决iframe在ios无法滚动的bug中,需要在iframe外面包裹一层div,如下:<div class="scroll-wrapper"> <iframe src=""></iframe> </div&...

    在解决iframe在ios无法滚动的bug中,需要在iframe外面包裹一层div,如下:

    <div class="scroll-wrapper">
     <iframe src=""></iframe>
    </div>

    然后设置scroll-wrapper的样式,给scroll-wrapper添加-webkit-overflow-scrolling: touch;overflow-y: scroll

    让外部的div进行滚动,然后保持iframe宽高100%。

    .iframeDiv{
        -webkit-overflow-scrolling: touch;
        overflow: scroll;
        iframe{
          width: 100%;
          height: 100%;
        }
      }

    展开全文
  • 最近几天在写一个滚动加载更多数据的插件(Scrollload),为局部滚动写demo时,遇到了很多局部滚动的坑,在这里分享一下这些坑的解决方案。以下的坑只针对ios。 约定 把产生滚动条的元素称之为视窗 全局滚动滚动条...
        

    起因

    最近几天在写一个滚动加载更多数据的插件(Scrollload),为局部滚动写demo时,遇到了很多局部滚动的坑,在这里分享一下这些坑的解决方案。以下的坑只针对ios。

    约定

    把产生滚动条的元素称之为视窗

    全局滚动:滚动条在body或者body父级元素上。

    局部滚动:滚动条在body里的子孙元素上。

    局部滚动优势

    1. 每个局部滚动拥有自己的滚动条,这是全局滚动所不能取代的。最典型的是列子如局部滚动,全局滚动。不难发现全局滚动不同的tab之间共享一个滚动条,也就是说其中一个tab滚动了,另一个tab也会跟着滚动。

    2. 可以解决input fixed定位失效问题。

    3. 全局滚动有出界情况,出界就是滑到最顶端和最底端后继续滑。这样会出现一个很恶心的效果。局部滚动虽然也会有这个情况,但是能修复,全局滚动至少我不会修。

    图片描述

    坑(一)

    ios浏览器局部滚动默认没有弹性滚动的效果。解决方法是为body或者视窗加-webkit-overflow-scrolling: touch。其实加这两个地方都一样,虽然在文档中并没有说该属性有继承性的,不过我在safari下测试出来是有继承性的。该属性具体说明看这里

    坑(二)

    问题

    先看一下视频效果:没用ScrollFix

    ios局部滚动的出界情况,当你的滚动条在最顶端的时候,你会发现此时你的列表不再滚动而是产生全局滚动了。其实这个确实应该是这样的。如果此时你的视窗占了比整个window还要大,就会一直在视窗里滚动,你还让不让用户看其他内容了。但视窗的滚动条在最顶端的时候的时候下滑又迅速上滑你会发现还是在做全局滚动。这个也应该是这样的,全局滚动还没停下来不可能做局部滚动吧。同理当你滚动条在最下面的时候也会出现这样的状况。但有时候,你就不会想以上的效果。

    解决方案

    其实解决方案很简单,既然知道了问题是滚动条在最顶端和最底端的时候才会出现的,那么你只要在touchstart的时候判断scrollTop是否为这两个值,如果是就加1或者减1。这里有一个别人已经实现的库ScrollFix。视频效果:用了ScrollFix。贴一下核心代码

    var ScrollFix = function(elem) {
        var startY, startTopScroll;
        elem.addEventListener('touchstart', function(event){
            startY = event.touches[0].pageY;
            startTopScroll = elem.scrollTop;
            //当滚动条在最顶部的时候
            if(startTopScroll <= 0)
                elem.scrollTop = 1;
            //当滚动条在最底部的时候
            if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
                elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
        }, false);
    };

    但是这个库一定要谨慎用。因为他监听了touchstart事件,这个事件会使滚动滞后(在这里并不明显),passive event listeners。当然你不能用文章里的解决方法,否则如果你快速滑动,由于touchstart事件的监听函数还没执行到就已经开始滚动了所以可能还是会发生上面的情况,ScrollFix这个库就无效了。

    坑(三)

    还是先看一下视频效果: 有问题的视频

    这个坑就是你的内容不满视窗一个屏幕的时候,你向上滑动你会发现整个视窗都动了,也就成了全局滚动。这个现象是正常的,内容都不满一屏当然不需要滚动啊,甚至连滚动条都没产生。

    解决方案

    理由也说了,内容不足一个屏幕产生的现象,那么让内容时刻保持在一屏之上不就可以了。这里我写了一个库,LocalScrollFix。贴一下核心代码

        update() {
          //当内容超过一屏的时候isArrived为true
            if (this.isArrived) {
                return
            }
          //每次调用update方法时候都去更新fixDom的paddingTop值
            const fixDomPaddingTop = this.computerFixDomPaddingTop()
            
            if (fixDomPaddingTop >= 0) {
                  //只有当计算后的值大于0才要更新
                this.fixDom.style.paddingTop = `${fixDomPaddingTop + 2}px`
            } else {
              //当计算后的值小于0的时候,也就是原来的内容就超过一屏幕了。arrived方法中会把fixDom移除。
                this.arrived()
            }
        }
        //计算fixDom所需要的paddingTop值
        computerFixDomPaddingTop() {
              //fixDom指的是append到最底部的dom。win指的是视窗
            const {fixDom, win} = this
            //一开始想内容的高度+paddingTop==数创的高度。因为直接求内容的高度其实并不简单。
            //所以稍微变通了以下,让窗口的top值减去fixDom的top值其实就是fixDom的paddingTop值
            //在把视窗的borderBottomWidth和视窗的paddingBottom考虑进去
            const fixDomTop = fixDom.getBoundingClientRect().top
            const winBottom = win.getBoundingClientRect().bottom
            const {paddingBottom: winPaddingBottom, borderBottomWidth: winBorderBottomWidth}= window.getComputedStyle(win, null)
            return winBottom - parseFloat(winPaddingBottom) - parseFloat(winBorderBottomWidth) - fixDomTop
        }

    大概就是在视窗内append一个元素,当你调用update方法的时候就去更新这个元素的paddingTop值来使视窗的内容超过一屏。

    最佳实践

    ios下可以用局部滚动替代全局滚动,安卓用全局滚动(老的安卓手机在局部滚动上貌似有严重的性能问题)。可能很多人会担心这样比较麻烦,其实仔细思考一下并没有增加多少代码。可以参考最佳实践,源码

    顺便说一下,如果你使用Scrollload来作为滚动到底部加载的插件,那么坑二就只需要把配置useScrollFix设置为true,坑三只需要把配置useLocalScrollFix设置为true。

    展开全文
  • &lt;style type="text/css"&gt; .scrolldiv{ height: 85%; overflow: hidden; overflow-y: scroll; } .scrolldiv::-webkit-scrollbar-track-piece { background-color: #FFF;....s...
  • 最近做的项目在手机端使用的时候踩了个坑,自己埋头研究了挺久才明白问题的源头,现在写出来给大家分享一下这里说的坑指的是在IOS手机端打开页面以后内部控件的局部滚动效果无法使用的问题,这个情况也只在IOS的手机...
  • IOS 的弹性滚动

    2019-06-26 02:12:17
    所谓弹性滚动就是指在翻动长页面手指离开时,有由慢到块,由快到慢的过度。  安卓平台上的大多数浏览器都默认了该行为  ios当前还只对<body>下的 overflow 默认产生弹性滚动效果    前一阵子做了...
  • 第2个,不固定大小,其大小要用第3个div把个撑开,但是这个div必需要有滚动条, 第3个,固定大小与第1个div保持一致200*200 先上代码再解释: <!DOCTYPE html> <html> <head> <title&...
  • ios iframe 滚动For the longest time, developers were frustrated by elements with overflownot being scrollable within the page of iOS Safari. For my blog it was particularly frustrating because I displ...
  • 处理方式:通过查找才发现在ios下iframe的滚动兼容确实存在问题,网上搜集到处理方式是:在iframe的外层嵌套一个div,设置div滑动: iframe的高度可以通过js进行动态计算赋值。设置样式-webkit-overflow-s...
  • 我现在做了一个html的网页得禁止浏览器上网页滚动我用这个css样式  "overflow-x":"hidden", "overflow-y":"hidden" 在android上好用,但是在ios上不好用,ios怎么能禁止滚动条???
  • https://www.chengrang.com/ios-scrollbar.html 我是用这个成功的 前提 认真阅读fullpage的api http://fullpage.81hu.com/ 如果你觉得我帮到你了,买个肥宅快乐水,怎么样?哈哈哈哈哈哈 ...
  • 需求:页面在各种手机端可以正常横向滚动 问题:(以下所有效果均针对ios系统下的,安卓是不存在这个问题的) 1、第一次用基础css实现滚动:overflow:scroll;效果:可以滑动,但是页面滚动起来非常卡,没有回弹...
  • 先说说这个bug的场景 .container{ ...这种容器内的滚动ios上面处理的情况是类似于 -webkit-overflow-scrolling:auto; 什么意思? 就是滑动的时候,当手离开屏幕的那一刻,滚动立即停止(fr...
  • IOS div上下滑动效果

    2019-10-08 15:45:07
    内容放在divdiv加样式:width: 100%;height: 100%;z-index: 70;overflow: auto; 转载于:https://www.cnblogs.com/daochong/p/10484571.html
  • HTML代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalab...
  • 找不到原作者链接了,提供参考 ...div> <divref="panelContent"class="panelScrolllabelScroll"@touchmove="touchMove"@touchstart="touchStart"> </div> </div> </template...
  • 关于IOS中,子元素滚动,阻止父元素滚动 目前我使用的方式就是 对于父元素进行fixed定位 设置width: 100%; height: 100%; position: fixed;top:0;left:0;
1 2 3 4 5 ... 20
收藏数 7,849
精华内容 3,139
关键字:

div ios 无法滚动