OGeek|极客世界-中国程序员成长平台

标题: ios - 影响iOS中固定位置元素的溢出限制的解决方法？ [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 15:49
标题: ios - 影响iOS中固定位置元素的溢出限制的解决方法？

编辑:主要问题是这样的:溢出:隐藏和溢出:自动影响 iOS 中的固定定位元素。

因此，如果我在页面的滚动功能内的组件中有一个固定定位的模态对话框，则该元素不会显示在超出其父级边界的任何位置。这真是一团糟，因为它不是固定定位在任何其他系统上的工作方式。那么官方对此有何回应？

原帖:

我有一个在桌面和 Android 上运行良好的模态对话框，但在我 iPad 上的任何浏览器上，模态对话框，包括模态覆盖，在超出其父容器边界的任何地方都会隐藏(即使它是固定的)定位)。我知道这不是溢出:auto 应该可以工作，因为它在所有其他设备上都可以正常工作。还有其他人经历过吗？我确定这与iOS如何处理固定位置有关。

不管怎样，这里有一些代码:

HTML:

<confirm-dialog ng-if="$ctrl.confirmDlgShowing" on-close="$ctrl.closeDlgs()" on-confirm="$ctrl.deleteInstance()" class="ng-scope ng-isolate-scope">
    <div class="modal general modal"><div class="modal-window"><div class="modal-inner" ng-transclude="">
       <div style="position:relative" class="ng-scope">
        <label class="modal-close" ng-click="$ctrl.onClose()"></label>
        <div class="page-heading">
            <h2>Are you sure?</h2>
        </div>
            <input class="btn" type="button" value="Yes" ng-click="$ctrl.confirm()">
            <input class="btn" type="button" value="No" ng-click="$ctrl.onClose()">
        </div>
    </div></div></div>
</confirm-dialog>

SASS:

.container {
     overflow: auto;

.modal-window { 
// overlay
   @include transition(opacity 0.25s ease);
   @include position(fixed, 0px 0px 0px 0px);
   background: rgba(0,0,0, 0.6);
   padding-top: 0.6em;
   text-align: left;
   z-index: 999999999;
   margin: 0 !important;
   .modal-bg {
      @include position(absolute, 0px 0px 0px 0px);
      cursor: pointer;
   }
} 


.modal-inner {
  @include transition(opacity 0.25s ease);
  background: $modal-background;
  border-radius: $base-border-radius;
  display: table;
  margin: 70px auto;
  max-height: 80%;
  overflow: auto;
  padding: $modal-padding / 2;
  z-index: 1000000000;
  min-width: 400px;

  @media(max-width: $medium-screen) {
     max-height: 70%;
     padding: $modal-padding;
  }
 }
}

---

Best Answer-推荐答案

这是我们最终想出的解决方法——在将对象放置在主体上的模态中替换 ng-if 的新指令。也可以很好地与其他 Angular 绑定(bind)一起使用。

angular.module('app').directive('rootIf', function()
{
   return { 
      restrict: 'A',
      link: function (scope, $elm, attrs)
         {
         scope.$watch(attrs.rootIf, onChangeRootIf);

         function onChangeRootIf()
            {
            if (scope.$eval(attrs.rootIf))
               $("body").children().first().before($elm);
            else
               $elm.detach();
            }
         }
      }
});

关于ios - 影响iOS中固定位置元素的溢出限制的解决方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36435155/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://jike.in/)

Powered by Discuz! X3.4