Question

我有一个位置按钮：当我滚动时固定在同一个地方。

当我在同一页面中使用ons-pull-hook元素时，按钮随滚动条移动。它不再是固定的。我该如何解决这个问题？

谢谢！

Answer 1

当translate3d用于具有固定位置的元素的父元素时，会出现问题。

请看这个问题： 'transform3d' not working with position: fixed children

没有好的解决方法。您可以在执行回调后从<div class="scroll">元素中删除转换，但它看起来仍然不是很好：

$scope.load = function(done) {
  $timeout(function() {
    done();
    document.querySelector('.scroll').style.transform = '';
  }, 500);
};

http://codepen.io/argelius/pen/WvNVwE

你不应该把这样的代码放在真实应用程序的控制器中。这只是一个例子。

拉下页面时按钮是否需要移动？否则，您可以将它放在<ons-page>元素之外，并将整个内容包装在另一个<ons-page>元素中：

<ons-page>
  <ons-button style="position: fixed; top: 80px; left: 50%; transform: translate3d(-50%, 0, 0); z-index: 2000">Button</ons-button>

  <ons-page>
    <ons-pull-hook>
      Pull down
    </ons-pull-hook>

    ...
  </ons-page>
</ons-page>

http://codepen.io/argelius/pen/NqWQbv

Answer 2

好的，我确认一下！包含在页面中的页面完美无缺！

谢谢!!

  <ons-button style="position: fixed; top: 80px; left: 50%; transform: translate3d(-50%, 0, 0); z-index: 2000">Button</ons-button>

  <ons-page>
    <ons-pull-hook>
      Pull down
    </ons-pull-hook>
    ...
  </ons-page>
</ons-page>

使用ons-pull-hook组件固定位置

2 个答案: