溢出内容会导致删除边框(CSS和AngularJS）

Overflow content causes border removal (CSS and AngularJS)

本文关键字：CSS AngularJS 边框 删除 溢出      更新时间：2024-02-09

我在应用程序中看到了一些非常奇怪的溢出内容行为。如果你看一下代码笔并水平滚动，你会发现一旦你开始滚动.trackdiv或可能的.celldiv上的边界，就会被删除。非常感谢您的帮助。

HTML

<section ng-app="netJamApp">
  <section ng-controller="ProjectController" id="project">
    <div class="tracks">
      <div ng-repeat="i in getNumber(pref.NUM_TRACKS) track by $index" class="track">
        <div ng-repeat="i in getNumber(cellsPerTrack(240)) track by $index" class="cell"></div>
      </div>
    </div>
  </section>
</section>

CSS

#project {
  padding: 20px;
}
#project .tracks {
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}
#project .tracks .track {
  font-size: 30px;
  list-style-type: none;
  display: flex;
}
#project .tracks .track:first-child {
  border: 1px solid #343436;
}
#project .tracks .track:not(first-child) {
  border: 1px solid #343436;
  border-top: none;
}
#project .tracks .cell {
  min-width: 80px;
  height: 50px;
  background: #272822;
  border-right: 2px solid #343436;
}
@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slide-in-left {
  animation-name: slideInLeft;
  animation-duration: 250ms;
  visibility: visible !important;
}

Angular

var app = angular.module('netJamApp', []);
/* PROJECT CONTROLER */
app.controller('ProjectController', ['$scope', function($scope) {
  // INIT SCOPE VARS
  $scope.pref = {};
  $scope.pref.NUM_TRACKS = 5;
  $scope.pref.MIN_CELLS_PER_TRACK = 20;
  $scope.pref.CELL_LENGTH = 15;
  $scope.pref.PADDING_CELLS = 10;
  // HELPERS 
  //used for ng-repeat to repeat a given number of times
  $scope.getNumber = function(num) {
    return new Array(num);
  };
  // determine the number of cells to insert inside of a track
  $scope.cellsPerTrack = function(audioclip_len) {
    var cells = audioclip_len / $scope.pref.CELL_LENGTH + $scope.pref.PADDING_CELLS;
    return Math.ceil(Math.max(cells, $scope.pref.MIN_CELLS_PER_TRACK));
  };
}]);
/* project controller */

您必须使用outline CSS规则而不是border。

这样编辑你的CSS可以解决这个问题：

.cell {
  min-width: 80px;
  height: 50px;
  background: $sublime-black;
  //border-right: 2px solid $codepen-grey;  <-- replace with outline
  outline:2px solid $codepen-grey;
}

工作代码笔

相关文章：