草庐IT

scroll-lock

全部标签

html - 使用 Overflow-y :scroll 将 child 拖出容器

我有一个容器,里面有一个列表。可以拖动列表项,用鼠标移动。容器可滚动:overflow-y:scroll;通过设置此属性,Chrome会自动将overflow-x属性设置为“auto”。如果我设置overflow-x:visible它会被Chrome忽略。如果我设置overflow-x:hidden那么显然该元素被裁剪了。当我将列表项拖到容器的左边缘或上边缘之外时,它会被裁剪到容器的边缘。如果我将它拖出右侧或底部边缘,容器会滚动以容纳它。我希望该元素能够在不被裁剪且不触发滚动的情况下拖出容器。鉴于必须将容器设置为overflow-y:scroll并且这反过来会强制Chrome设置ove

javascript - 在使用 JavaScript 滚动时响应地动画页面元素 [编辑 : Parallax Scrolling]

我敢肯定这在过去已经被提出来了;但是我有一个学期不知所措。在此webpage对于Square,用户滚动浏览标题为“在Square,不同学科协作设计精美简单的解决方案”的部分,然后动画会在页面上该特定点的右侧激活。当用户向后滚动时,图像会恢复,依此类推。他们是如何实现这一目标的?2013年8月:自从我问这个问题以来已经九个月了,视差滚动也差不多顺其自然了。我附上了几个链接,以便进一步阅读这个主题,从如何实现它到为什么要避免它。视差滚动示例:http://en.wikipedia.org/wiki/Parallax_scrollinghttp://www.awwwards.com/20-b

javascript - 带有 jquery ui 可排序问题的 jquery slim scroll

您好,我有一种情况,我正在使用jqueryslimscrollplugin和jquerysortable。问题是当我将元素从一个列表项拖到另一个列表项时,右侧的滚动条不会随之移动,所以如果我必须将列表拖放到最后一个列表项区域,除非我使用鼠标滚轮。那么当我将元素从一个列表区域拖到另一个列表区域时,如何绑定(bind)滚动条位置。下面是代码-$(function(){$("ul.droptrue").sortable({revert:'invalid',connectWith:"ul"});$("#sortable1,#sortable2,#sortable3").disableSelec

javascript - BXSlider 4 在移动设备上全屏 : How to keep native vertical page scroll (up, 向下)但保持水平触摸功能(左、右)?

以下片段应该可以很好地说明问题:(function($){$('.bxslider').each(function(){varbxid=$(this).attr("data-bxid");varbx=$(this).bxSlider({auto:false,autoStart:false});});})(jQuery);/*Styles*/#before,#after{width:350px;height:350px;background-color:#ccf;}/*BXSlider*/.bx-wrapper{position:relative;margin-bottom:60px;p

javascript - 是否可以编写一个可以处理后退按钮的 "Infinite Scroll"javascript?

转到这里:http://www.infinite-scroll.com/玩无限卷轴。请注意,您不能单击链接然后单击“返回”。当您这样做时它会出现故障。所以,我打算自己写无限卷轴。当用户到达底部时,加载AJAX调用。然后执行JQuery将结果“追加”到div。然后,在这些元素上调用我的其他函数。(我在javascript中设置了所有这些元素的背景图片)。这行得通吗?如果我这样做...我能处理后退按钮吗? 最佳答案 我在我从事的元素中考虑过同样的事情。我想到的一个选项是允许后退按钮返回到单击链接的位置(就像正常浏览一样)。首先,您需要记

javascript - $(window).resize() 在 safari : why it works also if scroll window (but doesn't resize)?

我注意到,在我的iphone5上使用safari$(window).resize()它的工作方式很奇怪......我有这个代码:$(document).ready(function(){$(window).resize(function(){avviaChart();initialize();if($('#time').is(':checked')){$("#time").removeAttr('checked');$("#Time").css('border','2pxsolid#ffffff');}});});此代码仅在窗口大小发生变化时才有效....与其他浏览器一起工作非常好,但

html - 如何强制 Safari 重新绘制位置 :fixed elements on scroll?

我在桌面和移动设备上使用Safari时遇到问题,它在用户滚动时重新绘制position:fixed元素的速度非常慢。safari难以处理的具有position:fixed的元素是#intro和.portfolio-item.expanded-content的页脚元素。滚动上的#intro不一定要重新绘制到正确的z-index(它应该在用户滚动时位于其他元素后面)。移动设备上的页脚元素不会停留在iOSSafari滚动内容上方的固定位置。在iOSsafari上滚动时出现锯齿状(然而,iOSchrome是流畅的,一切都按预期工作)。我做了一个fiddle,去掉了所有的图像、字体和JS,你瞧,

html - pos :relative & overflow-y:scroll 内的固定位置 div

我希望在带有overflow-y:scroll的div中有一个固定位置的div,这意味着我希望div保持原位,而其余内容正常滚动。而且我不知道出了什么问题,有人可以帮忙吗?提前致谢....foo{position:relative;display:block;width:100%;height:300px;overflow-y:scroll;}.bar{position:fixed;top:0;right:0;}这是HTML............ 最佳答案 当您将position:fixed应用于元素时,您是在相对于窗口本身而不是

javascript - 如何在溢出 : scroll? 的 div 上设置 x 和 y 滚动位置

如果我有以下标记:-.outerDiv{width:500px;overflow:scroll;}.innerDiv{width:1000px;}我如何(最有可能使用JavaScript)设置该滚动条的x和y位置? 最佳答案 您可以使用scrollLeft和scrollTop属性。例如:document.getElementById("yourScrollElementId").scrollTop=100或者您可以使用jquery方法使其更容易和动画化。 关于javascript-如何在

jquery - CSS/HTML : how to make something become absolute positioned once you scroll by it

我是CSS和HTML的新手,我正在尝试学习如何在页面上滚动时使某些内容成为绝对定位。这是我的意思的一个例子:http://fab.com/help/(您不需要帐户即可滚动)。向下滚动时,顶部的黑色菜单栏消失,带有“我们如何帮助您”的白色菜单栏变为绝对定位。我创建了一个具有类似菜单系统的示例,http://jsfiddle.net/jkdbP/但我不知道从哪里开始让它在滚动后成为绝对定位,非常感谢任何见解! 最佳答案 请参阅此jsFiddle:http://jsfiddle.net/jkdbP/2/varmenuTop=$('.men