jQuery 浮动标题很滞后

发布于 2024-11-30 06:50:37 字数 1378 浏览 1 评论 0原文

环境： Rails 3.1rc5 与 jQuery、ubuntu 11.04、Google Chrome (13)、Mozilla Firefox (6.0)

我正在开发一个项目，该项目在办公室内的部署非常有限 - 所以我可以肯定地说，我们将始终在其中运行该项目最新版本的火狐浏览器；我们可以做任何我们想要的疯狂的 js、css3 或 html5。

该项目旨在模仿一个应用程序，带有侧边栏（用于操作）和中间的窗格，其中包含滚动的订单列表（水平和垂直），而主体不滚动。

中间窗格的订单上方有一个标题，我们需要在用户滚动时将其向下浮动到页面上。我们不能使用position:fixed，因为我们需要水平和垂直滚动（字段比屏幕空间多）。我已经让它工作了，但它在 Chrome 中很滞后，在 Firefox 中也很滞后 - 标题似乎没有真正移动，直到用户停止滚动。

由于这是一种复杂的布局，我尝试在 jsfiddle 中重新创建它，但是我无法让它真正使中间窗格上的滚动起作用。它至少会让我更好地了解我正在尝试做什么：

http://jsfiddle.net/d3vkit/ 8E786/

这是我正在使用的咖啡脚本：

jQuery ->
  order_headings_list = $("#order_headings_list")
  orders_list = $("#orders_list")

  orders_list.scroll ->
    topOffset = orders_list.scrollTop() + "px"
    order_headings_list.css('top', topOffset)

这是生成的 javascript：

orders_list.scroll(function() {
  var leftOffset, topOffset;
  topOffset = orders_list.scrollTop() + "px";
  order_headings_list.css('top', topOffset);
});

我唯一的想法是，这是因为我正在将一堆列表项移动到很多列表项上，也许这太很多。

我正确地执行了这个浮动标题吗？有什么建议可以收紧事情吗？（为什么我的小提琴没有显示溢出滚动？）

更新

我在 jsfiddle 上做了更多工作（http ://jsfiddle.net/d3vkit/8E786/）并让标题移动，显示发生的滞后。在我看来，你滚动，它会更新 css，但不够快，所以看起来很不稳定。我该如何解决这个问题？

原文

Environment:
Rails 3.1rc5 with jQuery, ubuntu 11.04, Google Chrome (13), Mozilla Firefox (6.0)

I am working on a project that has a pretty limited, in-office rollout - so I can safely say that we will always have this running in the latest version of Firefox; we can do whatever crazy js, css3, or html5 we want.

The project is meant to mimic an application, with a side bar (for actions) and a pane in the middle with a list of orders that scolls (both horizontally and vertically), while the body does not scroll.

The middle pane has a header above the orders which we need to float down the page as the user scrolls. We can't use position:fixed because we need to scroll horizontally as well as vertically (there are more fields than screen real estate). I've got it working but it's laggy in Chrome and very laggy in Firefox - the header doesn't seem to actually move until the user stops scrolling.

Since this is a sort of complicated layout, I've tried to recreate it in jsfiddle, however I can't get it to actually make the scrolling on the middle pane work. It will at least give a better idea of what I am trying to do:

http://jsfiddle.net/d3vkit/8E786/

Here is the coffeescript I am using:

jQuery ->
  order_headings_list = $("#order_headings_list")
  orders_list = $("#orders_list")

  orders_list.scroll ->
    topOffset = orders_list.scrollTop() + "px"
    order_headings_list.css('top', topOffset)

Here is the javascript that produces:

orders_list.scroll(function() {
  var leftOffset, topOffset;
  topOffset = orders_list.scrollTop() + "px";
  order_headings_list.css('top', topOffset);
});

My only idea is that it's because I am moving a bunch of list items over a lot of list items, perhaps it's just too much.

Am I doing this floating header correctly? Any pointers to tighten things up? (And why isn't my fiddle showing the overflow scrolling?)

UPDATE

I have worked a bit more on the jsfiddle (http://jsfiddle.net/d3vkit/8E786/) and got the header moving, showing the lag that happens. Seems to me that you scroll, and it updates the css, but not quick enough, so it seems jumpy. How can I fix this?

分享到QQ

分享到微博