Angular Material select 对固定块有奇怪的作用

Posted 2023-03-06

【中文标题】Angular Material select 对固定块有奇怪的作用

【英文标题】：Angular Material select acts weirdly on fixed blocks

【发布时间】：2016-05-22 06:29:36

【问题描述】：

我创建了一个默认为static 的侧块，但当您滚动到某个点时变为fixed。在这个块中，我使用 Angular-Material 选择。

CSS：

.pos-fixed 
    position:fixed;
    top: 60px;
    width:16.5%!important;


#sidebar-right 
    float:right;
    width:23%;

#sidebar-right #widget 
    width:100%;

html：

  <div id="sidebar-right">
    <div id="widget" ng-class="'pos-fixed': imageHidden" class="panel md-padding">
      <div>
        <md-input-container style="width:100%">
          <md-select ng-model="number1" placeholder="number 1">
            <md-option ng-repeat="number in ['one','two','three','four','five','six','seven']" value="number">number</md-option>
          </md-select>
        </md-input-container>
        <br />
        <md-input-container style="margin-top: 0px;width:100%">
          <md-select ng-disabled="!number1" ng-model="number2" placeholder="numbe 2">
            <md-option ng-repeat="number in ['one','two','three','four','five','six','seven']" value="number">number</md-option>
          </md-select>
        </md-input-container>
      </div>
    </div

JS（滚动间谍）：

app.directive('scroll', function($window) 
  return function(scope, element, attrs) 
    angular.element($window).bind('scroll', function() 
      if (this.pageYOffset >= 320) 
        scope.imageHidden = true;
       else 
        scope.imageHidden = false;
      
      scope.$apply();
    );
  ;
);

在侧块为fixed 之前，材质选择工作正常，但一旦您滚动并变为fixed，选择就会开始出现奇怪的行为。 GIF：http://recordit.co/i72EaaVxJf 笨蛋：http://plnkr.co/edit/lfik78wR2FqPoSFSCNlz?p=preview

我该如何解决？

【问题讨论】：

你能更清楚一些奇怪的行为吗？

请定义“行为怪异”

“行为怪异” 不是正确的问题描述。演示对我来说效果很好。您是否在多个浏览器中看到相同的问题？

@charlietfl 我检查并在 Firefox 中它工作正常，但在 48 chrome 中这是一个问题

有什么问题？我也在用chrome 48，没发现问题！

【参考方案1】：

将此添加到您的控制器而不是 scroll 指令：

var body = document.querySelector('body');
angular.element($window).bind('scroll', function() 
  if (body.style.position !== 'fixed') 
    $scope.isFixed = window.scrollY > 330;
    $scope.$applyAsync();
  
);