- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个按钮,您单击它会出现一个 div。如果你从 iPhone 向下滚动,你会发现它没有像它应该的那样平滑滚动。由于某种原因,它正在失去这种行为,我不知道为什么。
HTML
<button id="page1">Hey</button>
<div class="page1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sunt nemo, unde, nisi quisquam minus blanditiis rerum harum obcaecati, dolore perspiciatis? Ad nemo aperiam cumque a delectus facilis tempora architecto?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui laboriosam minus praesentium excepturi cumque culpa quibusdam, maiores odit cupiditate natus, possimus, libero repellendus sed doloribus animi eos cum dolorum at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis et hic tenetur velit iste dignissimos est suscipit ducimus facilis, quibusdam dicta iure quidem beatae quisquam sit quasi harum, provident nostrum at illum. Quisquam accusamus autem id dolorem harum aspernatur est impedit amet, asperiores praesentium, vitae molestiae repellendus natus velit libero ipsam, qui assumenda pariatur nulla dicta ea voluptatum. Dolorem eos officia, et nostrum numquam quasi hic corrupti fugit commodi beatae aliquid minima, vel dolores maiores ex! Quas soluta nemo quod, natus quo tenetur odio, repellendus iure amet fuga! Odit temporibus debitis voluptate blanditiis, veniam delectus minima dolores, commodi quas laborum nobis dolorem placeat ea, officia magnam totam fuga corporis cumque. Quos asperiores veritatis quo! Quo dolorum officiis temporibus repudiandae aliquam esse, ex expedita sed sequi corporis voluptatum ullam accusamus laboriosam quae, ducimus ea qui quia! Quis nostrum, distinctio maxime. Similique in assumenda ipsum officia incidunt rem ratione velit harum dolore labore id aperiam quaerat magnam iste ipsam, minima, rerum consequuntur earum modi molestiae dolorum optio temporibus! Adipisci optio ex, fugiat nostrum sint, sunt at. Reprehenderit autem mollitia earum, ipsa porro, tempora tenetur impedit omnis unde iure, alias vitae illo quod ab assumenda magnam molestias atque provident voluptatem laboriosam quae! Optio quisquam corporis beatae iure, natus, cumque porro, ullam dolorem illum odit quia itaque ut molestias voluptas. Architecto animi ratione, ad accusamus commodi fugit nemo laborum similique illum suscipit deleniti, sed deserunt? Quis nam quasi qui ab vel dignissimos vitae in, aspernatur soluta aliquam explicabo magni alias tempore, molestias facilis ducimus aut inventore neque animi hic. Soluta officiis exercitationem iure magnam earum facere provident, alias delectus explicabo quibusdam tempora amet aperiam, unde, vitae! Dolorem neque, commodi harum libero officiis explicabo perspiciatis ullam. Quisquam, nostrum illo cum hic eaque! Iste ut omnis ab accusantium eaque quaerat dolorum, nulla eius rerum est ipsa. Nostrum asperiores esse porro nam, sint minus ullam. Enim porro eveniet harum, ducimus veritatis eius natus non quo eaque ut repudiandae hic sunt dolores quibusdam maxime fugiat fugit distinctio! Inventore alias commodi perferendis minus sint ipsum officia quaerat aperiam sapiente in ratione, accusantium nobis eum et temporibus cum accusamus consectetur doloribus illum? Odio quisquam placeat deleniti. Ducimus accusantium at esse autem architecto incidunt omnis earum, ipsam dignissimos, dolorem ex quibusdam! Repellendus expedita unde, ullam, placeat, aut officia doloremque mollitia impedit quidem sequi maxime. Cumque sit eaque repellendus perferendis, accusamus deserunt iusto error quod magni, quo vero unde molestiae corporis suscipit?</p>
</div>
CSS
.page1 {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
overflow:auto;
background:#039;
color:#fff;
padding:40px;
}
.noscrolling {
overflow:hidden;
}
button {
margin:30px;
}
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
var button_id = $(this).attr('id');
$('.'+button_id).fadeIn();
$('body').addClass('noscrolling');
});
});
</script>
最佳答案
尝试添加此 css。
.page1 {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
关于javascript - 对于固定在 iphone 上的位置,CSS 溢出自动无法平滑滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57787615/
我有一个 div(蓝色框),它在父元素(红色框)内的页面上绝对定位,我需要将 overflow-y 设置为隐藏,以便它强制 Y 轴上的溢出内容切掉了,但我希望任何溢出-x 的内容都可见。 HTML:
请参阅以下帖子以获取突出显示我的问题和可能的解决方案的图片: CSS overflow-y:visible, overflow-x:scroll 但是,当您实际移动滚动条时,此策略会中断。在建议的实现
我在搜索中看到过几个类似的问题,但要么没有正确回答问题,要么没有给出答案。所以,我再问一次。 .parent { overflow-y:scroll; overflow-x:visible; wid
我读过这个CSS overflow-x hidden and overflow-y visible (以及很多其他帖子)但我无法在我的具体情况下使用它。 我正在使用 slick-slider并想添加下
我有以下 Spark 作业,试图将所有内容保留在内存中: val myOutRDD = myInRDD.flatMap { fp => val tuple2List: ListBuffer[(St
我有疑问 两个16位的值加上最大值,16位机会不会溢出? 我会详细说明 unsigned short a; unsigned short b; unsigned long c; c=(unsigne
我有这个 HTML 和 CSS,但“溢出:隐藏”标签在 Firefox 中不起作用。这让我感到难过...有人知道为什么它不起作用吗?是因为A标签不支持overflow标签吗? #page_sideba
我正在开发一个程序,用于在 C++ 中分解非常大的数字(20 位或更多),并且正在使用 GMP 来处理溢出问题。我的程序对于大约 10 位或更少的数字运行良好,但是当我向它抛出一个 15 位数字时,它
我创建了一个 Canvas ,并在其中放置了一个StackPanel。 StackPanel是水平的,它接受缩略图图像的列表。 Canvas 具有固定的大小。当我放置的缩略图多于Canvas宽度不能容
当 g_array_append_val() 时会发生什么或 GLib 中的其他附加/前置函数之一,使 GArray 的长度大于 guint (unsigned int) 所能容纳的长度? 文档对此没
overflow-x:hidden 和 overflow:hidden; 有什么区别? 我所知道的是overflow-x:hidden;禁用水平滚动,但当我使用它时,它不仅仅适用于 Firefox,所
我们正在运行 Solr 来索引大量数据,但遇到了一个非常有趣的问题,我无法在任何地方找到任何帮助。 似乎 Solr 使用带符号的 32 位整数来计算索引中当前的文档数。我们刚刚达到了这个数字,我们的
这是我的查询: 从相似性中选择 COUNT(*),其中 T1Similarity = 0 或 T2Similarity = 0 结果如下: Msg 8115, Level 16, State 2, L
int main(void) { char x1 = 0x81; char x2 = 0x1; int a, b; a = x1
我有一个 div,其中的内容通过查询的 append() 定期附加到它。随着内容越来越长,最终会溢出div。我不希望在溢出时出现滚动条,但仍然让内容向上滚动以显示下面的新内容。 这可能吗?当我使用 o
我为 UITextField 创建了一个简单的子类,它按预期工作。我遇到的唯一问题是当文本值变得太大时,它会溢出到清除按钮中。 我似乎无法找到如何仅更改文本的右侧以具有一些填充而不与清除按钮相交的方法
我想要一个包括下拉菜单的粘性导航栏。但是,当我将鼠标悬停在它上面时,下拉菜单没有显示。 如果我删除 overflow: hidden;在无序列表中,当我向下滚动时,导航栏设法保持在顶部,但是导航栏是不
我正在研究一些按钮。我想要一个翻转状态,我在一个 div 的图像中有这个,溢出:隐藏以隐藏不活动的状态。它有时有效,但有时看起来像这样: 最奇怪的是,当我尝试使用 Chrome Web Inspect
基本上,我正在尝试创建一个六边形形状,它内部有一个圆圈,圆圈的多余部分应该被隐藏。演示:https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=110
这似乎是一个相当常见且不那么奇特的用例,但我以前没有遇到过。我设置了一支笔,但无法在那里复制它,我正在努力找出原因。 Demo Pen 左侧边栏有一个用于元素列表的自定义滚动窗口,但是虽然设置 ove
我是一名优秀的程序员,十分优秀!