相关疑难解决方法(0)

仅在不在视图中时滚动到元素 - jQuery

我知道有几次这样的变化; 我已经浏览了一段时间,但要么我做错了,要么我找不到我需要的东西.

我有一个嵌套注释的结构,几乎和Facebook Comments插件一样,每当reply点击时,一个带有textarea的小表单和一个按钮出现在注释的底部.

同样,行为与Facebook Comments插件相同,我想在滚动新添加textarea到视图时实现相同的功能.

我已经尝试了scrollTo插件,它运行顺畅但是,即使我手动滚动到页面的最底部,滚动动画也将始终重置滚动位置并从顶部开始.

为了记录,这就是我调用scrollTo的方式:

$.scrollTo($('#addReply_1'), 800);
Run Code Online (Sandbox Code Playgroud)

其中addReply_1div包含表单.我已经大步滚动到表单本身和表单textarea.结果相同.

有没有办法滚动到元素只有它尚未可见?

我已经尝试过在SO上提供的许多解决方案,比如使用jQuery滚动到一个元素,但似乎都没有按照需要行事; 甚至滚动到具有jQuery的特定元素在滚动后检查元素是否可见显示相同的"跳跃"行为.


更新:在线演示以显示行为

我上传了一个html演示页面,显示了我抱怨的行为:http://www.wouldbebetter.com/demo/comment-demo.htm

只需滚动到页面底部,然后单击任何Reply链接即可查看我所指的"跳跃"滚动.

请注意,此演示使用scrollintoview@Robert Koritnik的答案插件,但如果我使用ScrollTo,行为也是一样的.

html jquery scroll

34
推荐指数
5
解决办法
3万
查看次数

当键盘打开时,移动 Safari 上 html 外部有空白

我在移动 Safari 上的 JavaScript 库中有一个非常奇怪的错误,我尝试用一​​个简单的示例来重现该错误:

我有基本的 css 和 html:

html, 
body {
    margin: 0;
    padding: 0;
    font-family: monospace;
}
body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}
#term {
    background: black;
    color: #ccc;
    height: 100%;
}
h1 {
    margin: 0;
    font-weight: normal;
}
Run Code Online (Sandbox Code Playgroud)

html

    ...
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <div id="term" contenteditable>
    <h1>HELLO Mobile</h1>
    ...
Run Code Online (Sandbox Code Playgroud)

当我在移动 Safari 上打开网站并打开虚拟键盘时,我可以向下滚动到内容之外。

这是当我将鼠标悬停在 body 上时来自 BrowserStack 的屏幕截图,我无法将鼠标悬停在 html 上以突出显示它。

移动Safari

有人知道如何解决这个问题吗?它看起来像一个基本页面。 …

css mobile-safari browserstack

15
推荐指数
1
解决办法
5865
查看次数

当输入集中在移动野生动物园时,页面底部不需要填充

我在移动safari上使用textareas,当一个textarea聚焦时,视口似乎在文档下面添加了填充.在检查和选择区域时,它不会解析为元素,甚至是html节点.

textarea在屏幕上的位置或者它是否绝对位置似乎并不重要,填充在聚焦时始终存在.有时您需要向下滚动才能使其可见,但理想情况下,根本不可能使其可见.

我在下面添加了一个屏幕截图和代码示例.有一个100%宽度和高度的封面,用于显示文档的常规边界,而textarea绝对位于正文的底部.

不聚焦: 不聚焦

聚焦(箭头指向不需要的填充): 在此输入图像描述

码:

<html>
  <head>
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <style>
      html{
        background-color: gray;
      }

      body{
        width: 100%;
        margin: 0px;
      }

      #cover{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: block;
        background-color: green;
      }

      #textarea{
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100px;
        display: block;
        margin: 0px;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div id="cover">Cover</div>
    <textarea id="textarea"></textarea>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

我很感激人们的见解.谢谢.

html css safari mobile ios

8
推荐指数
1
解决办法
1872
查看次数

打开虚拟键盘时,iOS 上的 Safari 滚动到 &lt;html&gt; 元素之外

试试看:

  1. 在 iOS(设备或模拟器)上的 Safari 12 中打开此代码笔
  2. 聚焦输入。虚拟键盘应该打开。
  3. 现在一直滚动到页面底部。
  4. 您应该能够在<html>元素外滚动并看到一条与 Safari 菜单/操作栏大小相同的白色条纹,如下所示:

演示

  1. 当您关闭虚拟键盘时,条纹会消失...

这是 Safari 的错误吗?有任何解决这个问题的方法吗?

html css safari mobile-safari ios

5
推荐指数
1
解决办法
371
查看次数

标签 统计

css ×3

html ×3

ios ×2

mobile-safari ×2

safari ×2

browserstack ×1

jquery ×1

mobile ×1

scroll ×1