使用/ requestAnimationFrame 更改滚动事件上的 css

2024-07-01

我想更改视口元素的背景颜色(使用overflow: scroll)

这是我的第一次尝试:http://jsfiddle.net/2YeZG/ http://jsfiddle.net/2YeZG/

正如您所看到的,在绘制新颜色之前,前一种颜色会短暂闪烁。其他人有had https://stackoverflow.com/questions/8966971/javascript-event-before-scroll-redraw相似的problems https://stackoverflow.com/questions/11346327/force-javascript-to-run-before-browser-redraw-jsfiddle-examle.

HTML5 震撼指令 http://www.html5rocks.com/en/tutorials/speed/animations/#an-example,我试图介绍requestAnimationFrame修复此问题无济于事:

http://jsfiddle.net/RETbF/ http://jsfiddle.net/RETbF/

我在这里做错了什么?


这是一个显示相同问题的更简单的示例:http://jsfiddle.net/HJ9ng/ http://jsfiddle.net/HJ9ng/


在这里提交了 Chromium 的错误:http://code.google.com/p/chromium/issues/detail?id=151880 http://code.google.com/p/chromium/issues/detail?id=151880


如果它只是背景颜色,那么为什么不将父背景颜色更改为红色,然后滚动后将其更改为粉红色呢?

我把你的CSS改成那个

#dad
{
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100px;
    height: 600px;
    background-color:red;
}​

我把你们的一些Jquery去掉,改成这样

dad.bind('scroll', function() {
    dad.css('background-color', 'pink');
});

我删除了这一行

iChild.css('backgroundColor', 'red');

但红色是重要的,但它肯定行不通http://jsfiddle.net/2YeZG/5/ http://jsfiddle.net/2YeZG/5/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用/ requestAnimationFrame 更改滚动事件上的 css 的相关文章

  • 未捕获的 NotFoundError:无法在“Node”上执行“insertBefore”:

    我有一个div另外三个里面的哪里div附加如下 状态值是通过循环 api 的结果来设置的componentWillReceiveProps 但我遇到了一个错误的问题 Uncaught NotFoundError Failed to exec
  • 媒体查询和 Bootstrap 有什么区别? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 奇怪的是 CSS3 媒体查询和 Bootstrap 之间的区别是什么 我访问过很多网站 但每个人都说 两者都是为了网站的响应能力 如果
  • MomentJS:如何将 MM/DD/YYYY 中的日期解析为 DD/MM/YYYY

    如何在澳大利亚和美国时间格式中使用 moment js 例如 07 08 2017 对于两种时间格式都有好处 但是 30 08 2017 对于 moment js 无效 但我可以有这样的 dateTime 您可以在这里检查 http jsf
  • 显示为问号的度unicode

    以下代码显示为问号而不是度数符号 var airF Math round Number MDTMOBILE RWISWeather i AirTemp u00B0 F tempTable find td eq 4 text airF var
  • Javascript:单击正文中除其中一个元素之外的任何位置

    我希望能够单击正文中除该特定元素之外的任何位置 我无法找出我所做的代码有什么问题 当我单击一个特定元素时 except inside body 我不想让它隐藏 但是当我点击body它应该隐藏 HTML
  • 删除 IE 10 兼容性视图中的蓝色边框

    如何删除或不显示每个带有图像的锚点中的边框链接 顺便说一下 浏览器设置是兼容模式 其他问题的答案不足以解决我的问题 我猜是因为它只适用于较低版本的 IE EDIT 我目前正在客户需要的地方创建自定义共享按钮 div a href img h
  • 使重复的scrollBy像jQuery的动画scrollTop一样平滑

    如何使重复的scrollBy调用更平滑 就像使用jQuery的animatescrollTop制作动画一样 目前它是跳跃的 页面在不同的滚动位置之间跳转 我怎样才能让它更顺畅 这是滚动代码 window scrollBy 0 10 scro
  • AngularJS ui-router:如何全局解析所有路由的典型数据?

    我有一个 AngularJS 服务 它与服务器通信并返回 申请表不同部分的翻译 angular module utils service Translations q http function q http translationsSer
  • 在 emberjs 中绑定子视图和集合

    我正在尝试渲染视图Team里面一个 outlet This Team视图由一个简单的Person视图 团队领导者 以及集合Person意见 团队成员 插座是通过调用设置的connectOutlet 在应用程序控制器上 虽然Person子视图
  • Jquery ui 与 Jeditable

    我正在尝试这段代码
  • Rails 通过 ajax 发出闪光通知

    长话短说 我有一个按钮 单击它时 我希望触发一个 ajax 请求 该请求获取 flash notice 并将其显示在 中的 div 中 这是我的简短观点
  • Jquery - 如何获取样式显示属性“none / block”

    有没有办法获得 style display 属性 该属性要么没有 要么有块 DIV div class Error cellphone style display block p class cellphone style display
  • Javascript 逗号列表,但最后一个有一个 and

    我正在尝试创建一个函数 它将接受单词列表 并将其转换成这样的句子 jsfiddle http jsfiddle net 0ht35rpb 107 http jsfiddle net 0ht35rpb 107 数组列表 contents 0
  • 如何将网页从一个域重定向到另一个域?

    当第一个域 网页 加载时 如何将域重定向到另一个域 纯 HTML 替代方案如下HTML 中的标签 The 0这里是页面在重定向之前必须保持打开状态的秒数 在这种情况下 一旦您加载页面 它就会立即发生 与建议的 JS 解决方案相反 这在禁用
  • 从 Firefox 扩展打开当前选项卡/窗口中的 URL

    我正在创建一个 Firefox 扩展 从菜单项打开当前选项卡中的 URL 的 javascript 是什么 例如在我的overlay xul 文件中 我有以下行
  • HTML / Javascript - 通过单击父行来展开和折叠表行(子行)

    我几天来一直在尝试解决一个问题 终于明白 如 果没有帮助 我将不会成功 我想做一件我们每天在互联网上看到的常见事情 能够单击表格行以显示更多详细信息 但这里的更多细节并不意味着文本块 而是指与父行具有相同形状的子行 以下是 HTML 表格的
  • Spring Security 登录页面

    我开发了一个使用 Spring Security 的默认登录页面的应用程序 不过我想实现我自己的登录页面 我将放置一个login html 而不是jsp 页面 我想使用 JQuery 来实现它 我检查了很多例子但无法实现 我是 Spring
  • VueJs 操作内联模板并重新初始化它

    这个问题类似于VueJS 在内联模板组件中重新编译 HTML https stackoverflow com questions 34087195 vuejs re compile html in an inline template co
  • 克隆元件查找器

    在研究可用的同时ElementFinder and ElementArrayFinder方法 我注意到有一个clone method http angular github io protractor api view ElementFin
  • 克隆元件查找器

    在研究可用的同时ElementFinder and ElementArrayFinder方法 我注意到有一个clone method http angular github io protractor api view ElementFin

随机推荐