Javascript 如何自动滚动到列表中最后插入的值(不是底部)。[[注意:列表已排序]]
我正在尝试显示数组中的动画列表。 我已使用“oredrby”筛选器对列表进行排序。 每次添加新行时,我想自动滚动到列表中最后插入的行。 请注意,我不想自动滚动到列表的底部。 这是我的建议 来证明我的问题Javascript 如何自动滚动到列表中最后插入的值(不是底部)。[[注意:列表已排序]],javascript,html,angularjs,css-animations,Javascript,Html,Angularjs,Css Animations,我正在尝试显示数组中的动画列表。 我已使用“oredrby”筛选器对列表进行排序。 每次添加新行时,我想自动滚动到列表中最后插入的行。 请注意,我不想自动滚动到列表的底部。 这是我的建议 来证明我的问题 <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <title>Angular App</
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<title>Angular App</title>
<style>
body{
font-family: Verdana;
font-weight: bold;
display: flex;
justify-content: center;
overflow: auto;
}
div{
width: 100%;
}
li{
position: relative;
animation: drop 0.7s;
cursor: pointer;
}
@keyframes drop{
0%{
height: 0;
box-shadow: 0 -5px 10px;
}
}
ul{
text-align: center;
margin: 0;
padding: 0;
margin-bottom: 0px;
font-size: 40px;
background-color: orange;
list-style-type: none;
scroll-behavior:
/* height: 75%; */
}
li:nth-child(odd){
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
height: 50px;
background-color: white;
transition: all 0.3s;
}
li:nth-child(even){
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
height: 50px;
background-color: orange;
transition: all 0.3s;
}
li:nth-child(odd) span{
position: absolute;
display: block;
right: 0px;
width: 50px;
height: inherit;
background-color: #ff3333;
}
li:nth-child(even) span{
position: absolute;
display: block;
right: 0px;
width: 50px;
height: inherit;
background-color: white;
}
li:hover{
box-shadow: 0px -10px 30px;
height: 80px;
font-size: 60px;
}
form{
/* height: 100px; */
bottom:0;
position: sticky;
/* width:100%; */
background-color: #081327;
color: white;
font-size: 40px;
justify-content: center;
align./-items:center;
}
.error{
display: flex;
opacity: 1;
justify-content: center;
align-items: center;
font-size: 40px;
height: 50px;
background-color: black;
color: #ff3333;
z-index: 2;
animation: show 0.7s;
}
.error span{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
right:0px;
width: 50px;
height: inherit;
background-color: lightblue;
color: #ff3333;
transition:all 0.5s;
}
.error span:hover{
background-color: red;
color: black;
}
li span{
position: absolute;
transition: background-color 0.3s;
right:0px;
cursor: pointer;
}
li span:hover{
background-color: red;
}
form input{
border: 0;
height: 100px;
width:500px;
font-weight: bold;
font-size:40px;
text-align: center;
font-family: Verdana;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 10px -10px 30px;
}
form button{
border: 0;
height: 100px;
width:300px;
font-size:40px;
margin-bottom:20px;
font-family: Verdana;
font-weight: bold;
background-color: #ff5413;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 10px -10px 30px;
}
@keyframes show{
/* 20%{
background-color: #1c1c1c;
}
40%{
background-color: black;
}
60%{
background-color: #1c1c1c;
}
80%{
background-color: black;
}
100%{
background-color: #1c1c1c;
} */
0%{
transform-origin: center;
height: 0px;
width: 0px;
font-size: 0px;
}
100%{
height: 50px;
font-size: 40px;
transform-origin: center;
transform: rotateX(360deg);
}
}
#text{
display: flex;
position: absolute;
justify-content: center;
align-items: center;
height: 100%;
position: fixed;
}
#textinfo{
display: flex;
position: relative;
border-radius: 15px;
font-size:40px;
border: solid black 5px;
justify-content: center;
align-items: center;
height: 200px;
text-align: center;
min-width:400px;
overflow: hidden;
width: auto;
background-color: white;
animation:hello 0.5s;
}
@keyframes hello{
0%{
height:0px;
font-size:0px;
}
100%{
height:200px;
font-size:40px;
}
}
#textinfo span{
position: absolute;
top: 10px;
right: 10px;
animation: pop 1.4s;
cursor: pointer;
/* animation-delay: 0.9s; */
}
@keyframes pop{
0%{
transform:translateY(-1000px);
}
50%{
transform:translateY(0px);
transform: rotateY(0deg);
}
100%{
transform: rotateY(1turn);
}
}
/* #description{
height:200px;
animation:flow 5s;
} */
/* @keyframes flow{
0%{
height:0px;
}
100%{
height:200px;
}
} */
</style>
<body ng-app="AngularApp" ng-controller="AngularAppCtrl">
<div>
<ul>
Anime List
<!-- <li ng-repeat="x in anime" ng-click="info(x.anime,x.hero)">
{{x.anime}}<span ng-click="removeAnime($index)">×</span></li> -->
<li ng-repeat="x in anime | orderBy" ng-click="info(x)">{{x}}
<span ng-click="removeAnime(getIndex(x))">×</span></li>
</ul>
<form ng-submit="addAnime()" id="c">
<div class="error" ng-show="existError">Anime Exists<span ng- click="removeErr()">×</span></div>
<center>Enter New Anime<br>
<input type="text" ng-model="newanime" ng- change="checkAnime()" placeholder="Enter Here!" style="color: black;"><button
type="submit">Add Anime</button>
</center>
</form>
</div>
<div id="text" ng-show="infoyes">
<!-- <div id="textinfo">{{name}}<br>{{inform}}</br><span style="color:#ff3333" ng-click="removeInfo()">×</span></div> -->
<div id="textinfo">{{name}}</br><span style="color:#ff3333" ng-click="removeInfo()">×</span></div>
</div>
</body>
<script>
var app = angular.module('AngularApp', []);
app.controller('AngularAppCtrl', function ($scope, $location, $http, $anchorScroll) {
//For fetching data from json
/* $http.get('anime.json').then(function(response){
$scope.anime = response.data.animes;
});*/
$scope.anime = ['Dragon Ball Z', 'One Punch Man', 'Naruto', 'One Piece', 'Yu Yu Hakusho', 'Tokyo Ghoul', 'Pokemon', 'Cowboy Bebop'];
$scope.addAnime = function () {
if (!$scope.newanime) { return; }
if ($scope.anime.indexOf($scope.newanime) == -1) {
/*var split = $scope.newanime.split(':');
$scope.anime.push({'anime': split[0],'hero':split[1]});*/
$scope.anime.push($scope.newanime);
$scope.newanime = "";
$scope.existError = false;
$location.hash('c');
$anchorScroll();
}
else {
$scope.existError = true;
}
};
$scope.removeErr = function () {
$scope.existError = false;
};
$scope.removeAnime = function (x) {
$scope.anime.splice(x, 1);
};
$scope.checkAnime = function () {
if ($scope.anime.indexOf($scope.newanime) == -1) {
$scope.existError = false;
}
else {
$scope.existError = true;
}
};
/*$scope.info = function (x,details) {
$scope.infoyes = true;
$scope.name = x;
$scope.inform = details;
};*/
$scope.info = function (x) {
$scope.infoyes = true;
$scope.name = x;
};
$scope.removeInfo = function () {
$scope.infoyes = false;
};
$scope.getIndex = function (x) {
return $scope.anime.indexOf(x);
}
});
</script>
</html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<title>Angular App</title>
<style>
body{
font-family: Verdana;
font-weight: bold;
display: flex;
justify-content: center;
overflow: auto;
}
div{
width: 100%;
}
li{
position: relative;
animation: drop 0.7s;
cursor: pointer;
}
@keyframes drop{
0%{
height: 0;
box-shadow: 0 -5px 10px;
}
}
ul{
text-align: center;
margin: 0;
padding: 0;
margin-bottom: 0px;
font-size: 40px;
background-color: orange;
list-style-type: none;
scroll-behavior:
/* height: 75%; */
}
li:nth-child(odd){
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
height: 50px;
background-color: white;
transition: all 0.3s;
}
li:nth-child(even){
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
height: 50px;
background-color: orange;
transition: all 0.3s;
}
li:nth-child(odd) span{
position: absolute;
display: block;
right: 0px;
width: 50px;
height: inherit;
background-color: #ff3333;
}
li:nth-child(even) span{
position: absolute;
display: block;
right: 0px;
width: 50px;
height: inherit;
background-color: white;
}
li:hover{
box-shadow: 0px -10px 30px;
height: 80px;
font-size: 60px;
}
form{
/* height: 100px; */
bottom:0;
position: sticky;
/* width:100%; */
background-color: #081327;
color: white;
font-size: 40px;
justify-content: center;
align./-items:center;
}
.error{
display: flex;
opacity: 1;
justify-content: center;
align-items: center;
font-size: 40px;
height: 50px;
background-color: black;
color: #ff3333;
z-index: 2;
animation: show 0.7s;
}
.error span{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
right:0px;
width: 50px;
height: inherit;
background-color: lightblue;
color: #ff3333;
transition:all 0.5s;
}
.error span:hover{
background-color: red;
color: black;
}
li span{
position: absolute;
transition: background-color 0.3s;
right:0px;
cursor: pointer;
}
li span:hover{
background-color: red;
}
form input{
border: 0;
height: 100px;
width:500px;
font-weight: bold;
font-size:40px;
text-align: center;
font-family: Verdana;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 10px -10px 30px;
}
form button{
border: 0;
height: 100px;
width:300px;
font-size:40px;
margin-bottom:20px;
font-family: Verdana;
font-weight: bold;
background-color: #ff5413;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 10px -10px 30px;
}
@keyframes show{
/* 20%{
background-color: #1c1c1c;
}
40%{
background-color: black;
}
60%{
background-color: #1c1c1c;
}
80%{
background-color: black;
}
100%{
background-color: #1c1c1c;
} */
0%{
transform-origin: center;
height: 0px;
width: 0px;
font-size: 0px;
}
100%{
height: 50px;
font-size: 40px;
transform-origin: center;
transform: rotateX(360deg);
}
}
#text{
display: flex;
position: absolute;
justify-content: center;
align-items: center;
height: 100%;
position: fixed;
}
#textinfo{
display: flex;
position: relative;
border-radius: 15px;
font-size:40px;
border: solid black 5px;
justify-content: center;
align-items: center;
height: 200px;
text-align: center;
min-width:400px;
overflow: hidden;
width: auto;
background-color: white;
animation:hello 0.5s;
}
@keyframes hello{
0%{
height:0px;
font-size:0px;
}
100%{
height:200px;
font-size:40px;
}
}
#textinfo span{
position: absolute;
top: 10px;
right: 10px;
animation: pop 1.4s;
cursor: pointer;
/* animation-delay: 0.9s; */
}
@keyframes pop{
0%{
transform:translateY(-1000px);
}
50%{
transform:translateY(0px);
transform: rotateY(0deg);
}
100%{
transform: rotateY(1turn);
}
}
/* #description{
height:200px;
animation:flow 5s;
} */
/* @keyframes flow{
0%{
height:0px;
}
100%{
height:200px;
}
} */
</style>
<body ng-app="AngularApp" ng-controller="AngularAppCtrl">
<div>
<ul>
Anime List
<!-- <li ng-repeat="x in anime" ng-click="info(x.anime,x.hero)">
{{x.anime}}<span ng-click="removeAnime($index)">×</span></li> -->
<li ng-repeat="x in anime | orderBy" ng-click="info(x)">{{x}}
<span ng-click="removeAnime(getIndex(x))">×</span></li>
</ul>
<form ng-submit="addAnime()" id="c">
<div class="error" ng-show="existError">Anime Exists<span ng- click="removeErr()">×</span></div>
<center>Enter New Anime<br>
<input type="text" ng-model="newanime" ng- change="checkAnime()" placeholder="Enter Here!" style="color: black;"><button
type="submit">Add Anime</button>
</center>
</form>
</div>
<div id="text" ng-show="infoyes">
<!-- <div id="textinfo">{{name}}<br>{{inform}}</br><span style="color:#ff3333" ng-click="removeInfo()">×</span></div> -->
<div id="textinfo">{{name}}</br><span style="color:#ff3333" ng-click="removeInfo()">×</span></div>
</div>
</body>
<script>
var app = angular.module('AngularApp', []);
app.controller('AngularAppCtrl', function ($scope, $location, $http, $anchorScroll) {
//For fetching data from json
/* $http.get('anime.json').then(function(response){
$scope.anime = response.data.animes;
});*/
$scope.anime = ['Dragon Ball Z', 'One Punch Man', 'Naruto', 'One Piece', 'Yu Yu Hakusho', 'Tokyo Ghoul', 'Pokemon', 'Cowboy Bebop'];
$scope.addAnime = function () {
if (!$scope.newanime) { return; }
if ($scope.anime.indexOf($scope.newanime) == -1) {
/*var split = $scope.newanime.split(':');
$scope.anime.push({'anime': split[0],'hero':split[1]});*/
$scope.anime.push($scope.newanime);
$scope.newanime = "";
$scope.existError = false;
$location.hash('c');
$anchorScroll();
}
else {
$scope.existError = true;
}
};
$scope.removeErr = function () {
$scope.existError = false;
};
$scope.removeAnime = function (x) {
$scope.anime.splice(x, 1);
};
$scope.checkAnime = function () {
if ($scope.anime.indexOf($scope.newanime) == -1) {
$scope.existError = false;
}
else {
$scope.existError = true;
}
};
/*$scope.info = function (x,details) {
$scope.infoyes = true;
$scope.name = x;
$scope.inform = details;
};*/
$scope.info = function (x) {
$scope.infoyes = true;
$scope.name = x;
};
$scope.removeInfo = function () {
$scope.infoyes = false;
};
$scope.getIndex = function (x) {
return $scope.anime.indexOf(x);
}
});
</script>
</html>
角度应用程序
身体{
字体系列:Verdana;
字体大小:粗体;
显示器:flex;
证明内容:中心;
溢出:自动;
}
div{
宽度:100%;
}
李{
位置:相对位置;
动画:下降0.7秒;
光标:指针;
}
@关键帧下降{
0%{
身高:0;
盒影:0-5px10px;
}
}
保险商实验室{
文本对齐:居中;
保证金:0;
填充:0;
边缘底部:0px;
字体大小:40px;
背景颜色:橙色;
列表样式类型:无;
滚动行为:
/*身高:75%*/
}
李:第n个孩子(单数){
显示器:flex;
证明内容:中心;
对齐项目:居中;
字体大小:40px;
高度:50px;
背景色:白色;
过渡:均为0.3秒;
}
李:第n个孩子(偶数){
显示器:flex;
证明内容:中心;
对齐项目:居中;
字体大小:40px;
高度:50px;
背景颜色:橙色;
过渡:均为0.3秒;
}
李:第n个孩子(奇数)跨度{
位置:绝对位置;
显示:块;
右:0px;
宽度:50px;
身高:继承;
背景色:#ff3333;
}
李:第n个孩子(偶数)跨度{
位置:绝对位置;
显示:块;
右:0px;
宽度:50px;
身高:继承;
背景色:白色;
}
李:悬停{
盒影:0px-10px-30px;
高度:80px;
字体大小:60px;
}
形式{
/*高度:100px*/
底部:0;
位置:粘性;
/*宽度:100%*/
背景色:#081327;
颜色:白色;
字体大小:40px;
证明内容:中心;
对齐。/-项目:居中;
}
.错误{
显示器:flex;
不透明度:1;
证明内容:中心;
对齐项目:居中;
字体大小:40px;
高度:50px;
背景色:黑色;
颜色:#ff3333;
z指数:2;
动画:显示0.7秒;
}
.误差范围{
位置:绝对位置;
显示器:flex;
证明内容:中心;
对齐项目:居中;
光标:指针;
右:0px;
宽度:50px;
身高:继承;
背景颜色:浅蓝色;
颜色:#ff3333;
过渡:均为0.5s;
}
.错误范围:悬停{
背景色:红色;
颜色:黑色;
}
李斯潘{
位置:绝对位置;
过渡:背景色0.3s;
右:0px;
光标:指针;
}
李斯潘:悬停{
背景色:红色;
}
表单输入{
边界:0;
高度:100px;
宽度:500px;
字体大小:粗体;
字体大小:40px;
文本对齐:居中;
字体系列:Verdana;
边框左上半径:10px;
边框左下半径:10px;
盒影:10px-10px-30px;
}
窗体按钮{
边界:0;
高度:100px;
宽度:300px;
字体大小:40px;
边缘底部:20px;
字体系列:Verdana;
字体大小:粗体;
背景色:#ff5413;
边框右上角半径:10px;
边框右下半径:10px;
盒影:10px-10px-30px;
}
@关键帧显示{
/* 20%{
背景色:#1c1c;
}
40%{
背景色:黑色;
}
60%{
背景色:#1c1c;
}
80%{
背景色:黑色;
}
100%{
背景色:#1c1c;
} */
0%{
变换原点:中心;
高度:0px;
宽度:0px;
字体大小:0px;
}
100%{
高度:50px;
字体大小:40px;
变换原点:中心;
变换:旋转(360度);
}
}
#正文{
显示器:flex;
位置:绝对位置;
证明内容:中心;
对齐项目:居中;
身高:100%;
位置:固定;
}
#文本信息{
显示器:flex;
位置:相对位置;
边界半径:15px;
字体大小:40px;
边框:纯黑5px;
证明内容:中心;
对齐项目:居中;
高度:200px;
文本对齐:居中;
最小宽度:400px;
溢出:隐藏;
宽度:自动;
背景色:白色;
动画:你好0.5s;
}
@关键帧你好{
0%{
高度:0px;
字体大小:0px;
}
100%{
高度:200px;
字体大小:40px;
}
}
#文本信息跨度{
P
$scope.addAnime = function() {
if (!$scope.newanime) {
newanime.scrollIntoView();
return;
}
<li ng-repeat="x in anime" id="list{{x}}">{{x}}</li>
$location.hash('list'+$scope.newanime);
$anchorScroll();
$scope.newanime = "";
$scope.existError = false;