1

这些天，我正在尝试创建与大多数网站非常相似的功能。

这个概念是浏览器大小的 3 个部分，背景图像应该通过 div 上下滚动来固定定位和显示。

我们需要它在移动设备上像在桌面上一样漂亮地运行，看起来 Famous/angular 是解决方案。

这是一支笔。 http://codepen.io/LAzzam2/pen/XJrwbo

我正在使用著名的 Scroll.sync，触发 javascript 将背景图像定位在每次开始/更新/结束时。

scrollObject.sync.on("update", function (event) {
        console.log('update');
        test(event);
    });

这是定位背景的功能。

function test(data){
  var scroller = document.getElementsByClassName('famous-group');
  styles = window.getComputedStyle(scroller[0], null);
  tr = styles.getPropertyValue("-webkit-transform").replace('matrix(1, 0, 0, 1, 0,','').replace(')','');
  var distanceTop = -(parseInt(tr));

  var sections = document.getElementsByClassName('section');

  sections[3].style.backgroundPosition="50% "+distanceTop+"px";
  sections[4].style.backgroundPosition="50% "+(-(window.innerHeight)+distanceTop)+"px";
  sections[5].style.backgroundPosition="50% "+(-(window.innerHeight*2)+distanceTop)+"px";
};

任何输入/建议/建议都会很棒，真的只是在寻找这 3 个背景图像滚动良好的概念证明。

那种紧张是不幸的，我不知道是什么导致了这个问题，除了事件被触发的顺序？

**存在已知问题，目前仅适用于 -webkit 浏览器

4

1 回答 1

0

我认为您使用 Famous 的想法很好，但我可能会采取不同的方法来解决问题。
您正在通过接触 DOM 来解决这个问题，这正是 Angular 和 Famous 所要避免的。
如果我必须面对相同的目标，我可能会使用 Famous 表面作为背景，而不是更改主表面的属性并将其位置与滚动视图同步。
所以，在你的代码中，它会是这样的：

function test(data){
  var scrollViewPosition = scrollObject.getAbsolutePosition();
  var newBackgroundPosition = // Calculate the new background position
  var newForegroundPosition = // Calculate the new foreground position
  var backgroundSurface = backgroundSurface.position.set(newBackgroundPosition);
  var foregroundSurface = foregroundSurface.position.set(newForegroundPosition);
};
于 2014-11-28T15:26:25.480 回答