Question

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

概念是浏览器大小的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浏览器

Answer 1

我认为你使用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);
};

Famo.us/Angular Sticky Background Position ScrollView Sync

1 个答案: