草庐IT

滚动动画

全部标签

javascript - 水平滚动时如何防止浏览器在历史记录中后退/前进?

如何使用JQuery或NativeJS禁用现代浏览器在水平滚动时向后或向前移动的默认功能?这通常发生在使用触控板和滚动到可滚动div的结尾或开头时。 最佳答案 history.pushState(null,null,location.href);window.onpopstate=function(event){history.go(1);};演示:http://jsfiddle.net/DerekL/RgDBQ/show/除非您向后退按钮发送垃圾邮件或按住后退按钮并选择上一个条目,否则您将无法返回到之前的网页。注意:onpopst

javascript - JQuery 帮助 - 动画背景颜色

使用JQuery,我想做的是创建一个函数,当我调用该函数时,它会将我的“#page”DIV的背景颜色从CSS定义的背景颜色淡化为黄色,然后恢复为原始CSS背景#page的颜色。关于如何使用JQuery执行此操作的任何想法?我知道JQuery具有“动画”和“突出显示”功能。“突出显示”似乎是合适的选项,但我不确定。谢谢 最佳答案 仅仅为了这个特性加载jqueryUI是相当繁重的,但是如果你无论如何都在使用它,你想要的效果是“突出显示”http://docs.jquery.com/UI/Effects/Highlight$("div")

javascript - D3.js 动画旋转

当我尝试使用D3.js库正确执行旋转动画时遇到问题。问题与我想要旋转元素的点有关。这是我制作的fiddle来展示我的意思(慢动作):http://jsfiddle.net/74mCb/问题的根源似乎在这里:.attr("transform","rotate(-60,150,130)");然后我像这样旋转它:.attr("transform","rotate(40150,130)");我希望针头保持在原位(成为旋转中心),有人可以解释一下我做错了什么吗?谢谢! 最佳答案 这有点难以掌握(我自己并不完全理解)但是D3需要一些帮助来了解如

javascript - 将滚动事件附加到带有 body on() 绑定(bind)的 div 失败

我在滚动事件上遇到了一些问题。我正在尝试将事件附加/绑定(bind)到特定的div,我正在使用$('body').on()来做这件事,因为排序时会重新加载内容,因此会失去绑定(bind)。这不起作用,事件没有被触发:$('body').on('scroll','div.dxgvHSDC+div',function(){}另一方面,这是可行的:$('body').on('mousewheelDOMMouseScroll','div.dxgvHSDC+div',function(){}还有这个:$('div.dxgvHSDC+div').on('scroll',function(){}有什

javascript - 根据窗口中的元素位置,向下滚动时淡入,向上滚动时淡出

我试图让一系列元素在窗口中完全可见时在向下滚动时逐渐淡入。如果我继续向下滚动,则不希望它们淡出,但如果我向上滚动,则希望它们淡出。这是我找到的最接近的jsfiddle。http://jsfiddle.net/tcloninger/e5qaD/$(document).ready(function(){/*Everytimethewindowisscrolled...*/$(window).scroll(function(){/*Checkthelocationofeachdesiredelement*/$('.hideme').each(function(i){varbottom_of_

javascript - 防止 Internet Explorer 11 中的过度滚动

我有一个网站有在它上面可以垂直滚动。这很好用。我也隐藏了滚动条,这也很好用。CSS本质上是.scrollable{overflow-y:scroll;-ms-overflow-style:none;}不过,我目前在InternetExplorer11和Windows7触摸屏上遇到了问题。当用户点击滚动条的顶部或底部时,窗口会反弹(即出现过度滚动)。虽然这对大多数用户来说只是一种烦恼,但这是在信息亭全屏运行,因此overscoll允许桌面窥视(不仅仅是浏览器背景)。我一直未能找到解决方案。touch-action(前缀和不),例如html,body,.scrollable{-ms-tou

javascript - OS X 滚动条样式更改时是否会触发浏览器事件?

OSXLion及更高版本允许用户打开/关闭iOS风格的float滚动条-通过系统偏好设置手动或插入鼠标。基于WebKit的浏览器(也许还有Opera?)会立即切换它们的滚动条样式-发生这种情况时是否会触发一个事件?(仅WebKit就可以)一些注意事项:当用户切换滚动条样式时,OSX会触发NSPreferredScrollerStyleDidChangeNotificationWebKit似乎没有订阅此事件(grep时没有命中)。我怀疑WebKit正在通过NSViewBoundsDidChangeNotification事件处理此问题(我假设该事件会为ScrollView的内容View触

javascript - Shadow DOM 中的 Angular 1.x ngAnimate 不注册动画时间或添加进入/离开类

我已经尝试了几个小时的解决方案-SO中的所有重复项似乎都不适合我因为他们大多建议尝试不同版本的ng-animate/angular或在相关类中添加过渡/动画,以便ngAnimate可以正确处理它们的时间。我的问题是所有这一切都有效,而且我的所有属性都在正确的位置-但现在我正在迁移我们的Chrome扩展程序以在ShadowDOM封装下工作。注意事项:ShadowDOM可能是罪魁祸首,但我不确定为什么或如何修复它。它也可能无关紧要或只在实际问题中发挥次要作用(这可能是由于ShadowDOM+angular中的DOM处理不当)我在扩展注入(inject)的生命周期后期手动引导我的应用程序,因

javascript - 当光标位于屏幕的顶部或底部边缘时,如何使用 JQuery/Javascript 向下滚动页面?

简单,我只是想拥有它,所以当用户拖动一个项目并且他们到达视口(viewport)的最底部或顶部时(10px左右),页面(大约3000像素长)轻轻向下或向上滚动,直到他们将光标(因此被拖动的项目)移出该区域。项目是一个li标签,它使用jquery使列表项目可拖动。具体来说:../jquery-ui-1.8.14.custom.min.jshttp://code.jquery.com/jquery-1.6.2.min.js我目前使用window.scrollBy(x=0,y=3)滚动页面并具有以下变量:e.pageY...提供页面上光标的绝对Y坐标(不相对于屏幕)$.scrollTop()

javascript - 如何防止 iFrame 操作导致外部页面滚动到它

首先,我知道有很多关于这种现象的问题,但目前给出的解决方法都无法解决我遇到的情况。环境:我的代码位于我无法控制的页面内的外部iFrame中。它的大小适合我的所有内容,因此我的iFrame内不会发生滚动。相反,外部页面可以上下滚动以查看其内容。问题:我有一个内部iFrame,其中包含我无法控制的第三方广告。如果内部iFrame运行以下任何Javascript命令,外部页面将向下滚动所有内容以显示内部iFrame:模糊并聚焦其中的一个元素window.location.href或document.location.hash到其中的anchor。scrollIntoView在其中的一个元素上