时间戳

首页 > 解决方案 > 溢出-y 滚动，子溢出

html - 溢出-y 滚动，子溢出

问题描述

我有一个宽度为 300 像素、高度 100%、溢出-y：滚动的 div（父级）。在父 div 内部，我有一个子 div，它呈现一个角度组件。目前组件（子）在父级内部溢出。但我希望它高于一切。

当前工作样本 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular accoridon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <style></style>
  </head>
  <body ng-app="app" ng-controller="controller">
    <div style="overflow-y: scroll;width: 300px;height: 500px">
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>
        <input type="text" ng-model="searchTerm" />
        <div ng-if="searchTerm" style="width: 500px;">
          <div
            ng-click="onClick(item)"
            ng-repeat="item in items | filter: searchTerm"
            style="background: lightgray; padding: 20px;margin: 5px 0px;"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
      <div>Hello World!!</div>
      <div>Hello World!!</div>
    </div>
    <script>
      angular.module('app', []).controller('controller', function($scope) {
        $scope.searchTerm = '';
        $scope.items = [
          {name: 'First'},
          {name: 'Second'},
          {name: 'Third'},
          {name: 'Fourth'},
          {name: 'Fifth'},
          {name: 'Sixth'},
          {name: 'Seventh'},
          {name: 'Eighth'},
          {name: 'Ninth'},
          {name: 'Tenth'},
          {name: 'Eleventh'},
          {name: 'Twelth'},
          {name: 'Thirteenth'},
          {name: 'Fourteenth'},
          {name: 'Fifteenth'},
        ];
        $scope.onClick = function(item) {
          console.log(item.name);
          $scope.searchTerm = '';
        };
      });
    </script>
  </body>
</html>

必需的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular accoridon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <style></style>
  </head>
  <body ng-app="app" ng-controller="controller">
    <div style="overflow-y: scroll;width: 300px;height: 500px">
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>
        <input type="text" ng-model="searchTerm" />
        <div ng-if="searchTerm" style="width: 500px;position: fixed">
          <div
            ng-click="onClick(item)"
            ng-repeat="item in items | filter: searchTerm"
            style="background: lightgray; padding: 20px;margin: 5px 0px;"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
    </div>
    <script>
      angular.module('app', []).controller('controller', function($scope) {
        $scope.searchTerm = '';
        $scope.items = [
          {name: 'First'},
          {name: 'Second'},
          {name: 'Third'},
          {name: 'Fourth'},
          {name: 'Fifth'},
          {name: 'Sixth'},
          {name: 'Seventh'},
          {name: 'Eighth'},
          {name: 'Ninth'},
          {name: 'Tenth'},
          {name: 'Eleventh'},
          {name: 'Twelth'},
          {name: 'Thirteenth'},
          {name: 'Fourteenth'},
          {name: 'Fifteenth'},
        ];
        $scope.onClick = function(item) {
          console.log(item.name);
          $scope.searchTerm = '';
        };
      });
    </script>
  </body>
</html>

我能够让它在它的位置工作：固定，结果在顶部，但是如果我开始滚动父级，那么结果会留在任何地方（因为它们是固定的）并且不要坚持输入。预期的行为是他们应该坚持父滚动的输入文本框以及结果必须在顶部。

标签： htmlcss

解决方案

使用 CSS 定位来正确放置元素。查看以下链接以了解您的选择https://www.w3schools.com/css/css_positioning.asp。

在下面的修改片段中，第一个文本框出现在 div 的顶部，位置：固定。即使页面滚动，它也会保持原样。

但是，位于底部的第二个 texbox 具有绝对位置，它将相对于您的父容器（即您的父 div）是绝对的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular accoridon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <style></style>
  </head>
  <body ng-app="app" ng-controller="controller">
    <div style="overflow-y: scroll;width: 300px;height: 500px">
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div style="position:absolute; bottom:0">
        <input type="text" ng-model="searchTerm" />
        <div ng-if="searchTerm" style="width: 500px;position: fixed">
          <div
            ng-click="onClick(item)"
            ng-repeat="item in items | filter: searchTerm"
            style="background: lightgray; padding: 20px;margin: 5px 0px;"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div style="position:fixed; top:0">
        <input type="text" ng-model="searchTerm" />
        <div ng-if="searchTerm" style="width: 500px;position: fixed">
          <div
            ng-click="onClick(item)"
            ng-repeat="item in items | filter: searchTerm"
            style="background: lightgray; padding: 20px;margin: 5px 0px;"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
    </div>
    <script>
      angular.module('app', []).controller('controller', function($scope) {
        $scope.searchTerm = '';
        $scope.items = [
          {name: 'First'},
          {name: 'Second'},
          {name: 'Third'},
          {name: 'Fourth'},
          {name: 'Fifth'},
          {name: 'Sixth'},
          {name: 'Seventh'},
          {name: 'Eighth'},
          {name: 'Ninth'},
          {name: 'Tenth'},
          {name: 'Eleventh'},
          {name: 'Twelth'},
          {name: 'Thirteenth'},
          {name: 'Fourteenth'},
          {name: 'Fifteenth'},
        ];
        $scope.onClick = function(item) {
          console.log(item.name);
          $scope.searchTerm = '';
        };
      });
    </script>
  </body>
</html>

推荐阅读