我知道有几次这样的变化; 我已经浏览了一段时间,但要么我做错了,要么我找不到我需要的东西.
我有一个嵌套注释的结构,几乎和Facebook Comments插件一样,每当reply点击时,一个带有textarea的小表单和一个按钮出现在注释的底部.
同样,行为与Facebook Comments插件相同,我想在滚动新添加textarea到视图时实现相同的功能.
我已经尝试了scrollTo插件,它运行顺畅但是,即使我手动滚动到页面的最底部,滚动动画也将始终重置滚动位置并从顶部开始.
为了记录,这就是我调用scrollTo的方式:
$.scrollTo($('#addReply_1'), 800);
Run Code Online (Sandbox Code Playgroud)
其中addReply_1在div包含表单.我已经大步滚动到表单本身和表单textarea.结果相同.
有没有办法滚动到元素只有它尚未可见?
我已经尝试过在SO上提供的许多解决方案,比如使用jQuery滚动到一个元素,但似乎都没有按照需要行事; 甚至滚动到具有jQuery的特定元素或在滚动后检查元素是否可见显示相同的"跳跃"行为.
更新:在线演示以显示行为
我上传了一个html演示页面,显示了我抱怨的行为:http://www.wouldbebetter.com/demo/comment-demo.htm
只需滚动到页面底部,然后单击任何Reply链接即可查看我所指的"跳跃"滚动.
请注意,此演示使用scrollintoview@Robert Koritnik的答案插件,但如果我使用ScrollTo,行为也是一样的.
我在移动 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上使用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>元素外滚动并看到一条与 Safari 菜单/操作栏大小相同的白色条纹,如下所示:这是 Safari 的错误吗?有任何解决这个问题的方法吗?