个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在使用ScrollStop创建一种 z 轴时间轴。它使用滚动事件来循环显示时间线内容。
代码在此处作为网站上传 http://jcwebandgraphic.com/archive2/
问题:
我使用了 mouseenter 和 mouseleave 来触发 CSS 更改 - 溢出隐藏和溢出可见，以防止在时间线 div 中滚动时在正文上滚动。
这已成功停止正文滚动，但它似乎也停止了允许我使用滚动事件在时间轴中移动的滚动停止功能。
这是因为滚动事件依赖于坐标输入，并且由于主体滚动被锁定，所以无法获取这些输入？难道是别的什么？您对这如何适用于我的元素有任何提示吗？这个元素有更好的事件监听器或滚动锁定方法吗？
代码:
<script>
// When the Window Object is loaded and a Scroll Event is initiated, The following functions will Be Fired
$(window).on('scrollstart', function() {
// Timeline Functions for Touchless Devices
// Block 1 - Scroll Locking
// Locks Body Scrolling While in Timeline
$('#timeline').on('mouseenter', function() {
$('body').css('overflow', 'hidden');
}); // Closes $(#timeline) mouseenter Function
// Rerstores Body Scrolling While Out of Timeline
$('#timeline').on('mouseleave', function() {
$('body').css('overflow', 'visible');
}); // Closes $(#timeline) mouseleave Function
// Closes Functions Block 1
// Closes Block 1 - Scroll Locking
// Block 2 - Transitions
// Reassigns jQuery Defined HTML Objects as HTML Elements (For Removal and Re-Insertion to the DOM)
var last = $('.scroll li:last-child')[0]; // Convert to HTML Element jQuery Element
var parent = last.parentElement;
// Animate to 0 Opacity
$('.scroll li:last-child').animate({opacity: '.1'});
// Animation and Re-Ordering Block
// 1 Removes Last Child From the DOM
// 2 Forces Opacity Back to 1
// 3 Re-Inserts it into the DOM at the First Child Position
// 1 Removal
parent.removeChild(last);
// 2 Opacity
last.style.opacity = 1;
// 3 Re-insertion
parent.insertBefore(last, parent.firstElementChild)
// Closes Animation and Re-Ordering Block
// Closes Block 2 - Transitions
}); //Closes $(window) Load Functions
// Required Fixes
// 1 Size / Positioning Glitch on mouseenter, mouseleave (CSS, jQuery)
// 2 Restore Scroll Transitions on mouseenter (jQuery)
// 3 Touch Device Usability for Simulated or Alternate mouseenter and mouseleave Functions
// 4 Create Function Looping if Scroll Event lasts more than ~250ms
// 5 Make #timeline Height Responsive
// Completed Fixes
// 9 Scroll Only Works on First Refresh, or Directly from File
// 8 Functions Break When Removing Unnecessary HTML Content
// 7 Body Continues to Scroll While Scrolling Through Timeline
// 6 Collapsing Parent Element on #timeline
// 5 Last Child Failing to Re-Order
// 4 Limited Scroll Area Forces Premature Animation Transition Completion
// 3 Limited Scroll Area Prevents Opacity Completion
// 2 Uncaught Exception Errors (4)
// 1 Uncaught Token Errors (2)
</script>
<body>
<!-- Timeline -->
<section id='timeline'>
<h2 class='subtitle'>Timeline</h2>
<div class='scroll'>
<li><img src='images/pa3.jpg'></li>
<li><img src='images/pa2.jpg'></li>
<li><img src='images/pa1.jpg'></li>
</div>
</section>
<!-- Closes Timeline -->
</body>
最佳答案
尝试使用 body-scroll-lock ( https://www.npmjs.com/package/body-scroll-lock )。
在 body 上设置 overflow:hidden 在 iOS 上不起作用。您需要一些 JS 逻辑才能使其在那里工作。要锁定所有设备的正文滚动，同时使目标元素仍然能够滚动，您可以使用 body-scroll-lock 执行类似的操作:
// 1. Import the functions
const bodyScrollLock = require('body-scroll-lock');
const disableBodyScroll = bodyScrollLock.disableBodyScroll;
const enableBodyScroll = bodyScrollLock.enableBodyScroll;
// 2. Get a target element (such as a modal/lightbox/flyout/nav).
const targetElement = document.querySelector("#someElementId");
// 3. ...in some event handler after showing the target element...disable body scroll
disableBodyScroll(targetElement);
// 4. ...in some event handler after hiding the target element...
enableBodyScroll(targetElement);
有关基本原理的更多详细信息，请查看 https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177 .
希望有帮助。
关于javascript - 锁定正文滚动时滚动 Div。溢出:Hidden?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46837018/
24
4
0
我想知道是否有任何方法可以调用和使用 overflow:hidden 隐藏得很好的东西。 为了阐明我的意思，在 this example我想知道“This is hidden”是div的隐藏部分。 这
如果我们有以下HTML StackOverflow 使用以下 CSS * { margin: 0; padding: 0; } #i { overflow:
我正在使用 jQuery 制作幻灯片，我有几张图片应该一次滑入一张图片。我正在使用宽度与图像宽度相同的 div:80 像素。我使用了 white-space:no-wrap 和 overflow:hi
如果我有一个样式为 overflow: hidden; 的 div，我发现有时键盘操作会导致 div 滚动。而且由于没有滚动条，所以真的没有办法让 div 回到原来的状态。除了指定样式以防止出现这种情
我有一个 UIImageView，在表格单元格中有一个自定义类，它也使用一个自定义类。 UIImageView 作为单元格自定义类的属性连接。 UIImageView 有一个调用方法的 UITapGe
我正在创建一个网站，在一个 div 中我有一个视频，但我不想在移动设备上显示这个视频，所以我使用 hidden-xs 和 hidden-sm，到目前为止一切顺利。 但是，我的问题是，当我使用这些类时，
我对 C++ 可见性属性有疑问。我已阅读 http://gcc.gnu.org/wiki/Visibility但我不太明白它是如何工作的。 我想在我拥有的一些共享库中隐藏可见性。我相信这意味着符号被隐
我通过CSS的草图创建了一个菱形，它位于一个圆圈的左上角。 我为圆圈设置了overflow: hidden。钻石怎么还能触发cursor: pointer？ 这是 project 的代码笔. html
这个问题在这里已经有了答案: Shape with a slanted side (responsive) (3 个答案) 关闭 3 年前。
在使用 Angular Material 时，我一直在看到 aria 属性。有人可以向我解释一下 aria 前缀是什么意思吗？但最重要的是我想了解的是 aria-hidden 和 hidden 属性之
我正在阅读有关 aria 使用的一些内容，并遇到了以下文档: Fourth Rule of ARIA Use 。我不清楚的一个部分是: "Applying aria-hidden to a paren
以下是我的简单导航代码。单击右上角的图标时会出现两个 div。我还在顶部使用 :before 实现了这些分区的三 Angular 形提示。对于第一个 div，我设置了 overflow:scroll
input[type=hidden] 和 visibility : hidden; 有什么区别？ 最佳答案 第一个是输入元素，第二个是CSS2中的样式。 visibility: hidden; vis
我遇到了一个奇怪的问题，似乎与浏览器相关(IE9 及更低版本与 IE11)，但想知道为什么会出现奇怪的行为。 问题描述:我使用 Spring 框架并使用其相关标签库来检索 JSP 上的数据。有一个称为
我在 viewDidLoad 中的两个 UIView 上将 hidden 属性设置为 YES。单击按钮时，它们将设置为 NO，因此将显示它们。如何在每次单击按钮时使这些属性在是/否之间切换？ 最佳答案
我正在尝试使用树状列表实现侧边栏。我希望树中的每个元素只填充一行——没有溢出，没有换行/换行。 overflow: hidden; 可能是一个很好的解决方案，但还有另一个要求 - 每行都有一个绝对 d
我想用 overflow: hidden 隐藏一个超出容器的标题: HTML: Heading CSS: div { overflow: hidden; } h1 { transfor
我对 overflow:hidden 和 body 标签有疑问。这是一个小例子 主体版本(不工作) http://jsfiddle.net/5hGSp/13/ DIV 版本(有效)
html 的“隐藏”属性是一个 bool 值，不需要设置值。仅仅存在就足够了。 “aria-hidden”属性怎么样？光有存在感就够了吗？或者它是否需要设置值“true”？ 最佳答案 aria-hid
在我的页面上，我有一个导航菜单和两个内容容器。 内容容器使用overflow:hidden 以便一次只有一个子div 显示。 我希望导航链接充当相关内容的激活器，以便在容器中滚动查看。 因此，例如，如
我是一名优秀的程序员,十分优秀！