y滾動溢出，子溢出
[英]Overflow-y scroll, child overflow
問題描述
我有一個div（父級），寬度為300px，高度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>
我能夠使它在正確的位置工作：固定，結果在頂部，但是如果我開始滾動父級，則結果將保持在原處（固定不變），並且不會停留在輸入上。 預期的行為是它們應堅持父級滾動條上的輸入文本框，並且結果必須位於頂部。
1 個解決方案
解決方案1
0 2019-03-14 18:31:35
使用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>
y滾動問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.