javascript - 如何自动滚动到列表中最后插入的值(非底部)。[[注 :List is Sorted]]-6ren

javascript - 如何自动滚动到列表中最后插入的值(非底部)。[[注 :List is Sorted]]

In lại 作者：行者123 更新时间：2023-11-30 14:10:35

我正在尝试显示数组中的动漫列表。我已经使用“oredrby”过滤器对列表进行了排序。每次添加新行时，我都想自动滚动到列表中最后插入的行。请注意，我不想自动滚动到列表底部。这是

DEMO

演示我的问题。



Angular App

    thân hình{
            font-family: Verdana;
            font-weight: đậm;
            hiển thị: flex;
            justify-content: center;
            overflow: auto;
        }
        div{
            width: 100%;
        }
        li{
            vị trí: tương đối;
            animation: drop 0.7s;
            cursor: pointer;
        }
        @keyframes drop{
            0%{
                height: 0;
                box-shadow: 0 -5px 10px;
            }
        }
        ul{
            căn chỉnh văn bản: ở giữa;
            lề: 0;
            đệm: 0;
            margin-bottom: 0px;
            font-size: 40px;
            background-color: orange;
            list-style-type: none;
            scroll-behavior:  
           /* height: 75%; */

        }
        li:nth-child(odd){
            hiển thị: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            chiều cao: 50px;
            background-color: white;
            transition: all 0.3s;
        }
        li:nth-child(even){
            hiển thị: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            chiều cao: 50px;
            background-color: orange;
            transition: all 0.3s;
        }
        li:nth-child(odd) span{
            vị trí: tuyệt đối;
            hiển thị: khối;
            right: 0px;
            chiều rộng: 50px;
            height: inherit;
            background-color: #ff3333;
        }
        li:nth-child(even) span{
            vị trí: tuyệt đối;
            hiển thị: khối;
            right: 0px;
            chiều rộng: 50px;
            height: inherit;
            background-color: white;
        }
        li:hover{
            box-shadow: 0px -10px 30px;
            height: 80px;
            font-size: 60px;
        }
        hình thức{
            /* height: 100px; */
            bottom:0;
            position: sticky;
            /* width:100%; */
            background-color: #081327;
            color: white;
            font-size: 40px;
            justify-content: center;
            align./-items:center; 
        }
        .error{
            hiển thị: flex;
            opacity: 1;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            chiều cao: 50px;
            background-color: black;
            color: #ff3333;
            z-index: 2;
            animation: show 0.7s;
        }
        .error span{

            vị trí: tuyệt đối;
            hiển thị: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            right:0px;
            chiều rộng: 50px;
            height: inherit;
            background-color: lightblue;
            color: #ff3333;
            transition:all 0.5s;
        }
        .error span:hover{
            background-color: red;
            color: black;
        }
        li span{
            vị trí: tuyệt đối;
            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: đậm;
            font-size:40px; 
            căn chỉnh văn bản: ở giữa;
            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: đậm;
            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%{
            chiều cao: 50px;
            font-size: 40px;
            transform-origin: center;
            transform: rotateX(360deg);
            }
        }
        #text{
            hiển thị: flex;
            vị trí: tuyệt đối;
            justify-content: center;
            align-items: center;
            height: 100%;  
            position: fixed;
        }
        #textinfo{
            hiển thị: flex;
            vị trí: tương đối;
            border-radius: 15px;
            font-size:40px; 
            border: solid black 5px;
            justify-content: center;
            align-items: center;
            chiều cao: 200px;
            căn chỉnh văn bản: ở giữa;
            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{
            vị trí: tuyệt đối;
            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;
    }
    } */

    


    
        
            Anime List
            
            {{x}}
                ×

        

        
            Anime Exists×

            Enter New Anime


                <>
                    type="submit">Add Anime

            
        

    

    
        
        {{name}}
×

    



    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);
        }
    });








Angular App

    thân hình{
            font-family: Verdana;
            font-weight: đậm;
            hiển thị: flex;
            justify-content: center;
            overflow: auto;
        }
        div{
            width: 100%;
        }
        li{
            vị trí: tương đối;
            animation: drop 0.7s;
            cursor: pointer;
        }
        @keyframes drop{
            0%{
                height: 0;
                box-shadow: 0 -5px 10px;
            }
        }
        ul{
            căn chỉnh văn bản: ở giữa;
            lề: 0;
            đệm: 0;
            margin-bottom: 0px;
            font-size: 40px;
            background-color: orange;
            list-style-type: none;
            scroll-behavior:  
           /* height: 75%; */

        }
        li:nth-child(odd){
            hiển thị: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            chiều cao: 50px;
            background-color: white;
            transition: all 0.3s;
        }
        li:nth-child(even){
            hiển thị: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            chiều cao: 50px;
            background-color: orange;
            transition: all 0.3s;
        }
        li:nth-child(odd) span{
            vị trí: tuyệt đối;
            hiển thị: khối;
            right: 0px;
            chiều rộng: 50px;
            height: inherit;
            background-color: #ff3333;
        }
        li:nth-child(even) span{
            vị trí: tuyệt đối;
            hiển thị: khối;
            right: 0px;
            chiều rộng: 50px;
            height: inherit;
            background-color: white;
        }
        li:hover{
            box-shadow: 0px -10px 30px;
            height: 80px;
            font-size: 60px;
        }
        hình thức{
            /* height: 100px; */
            bottom:0;
            position: sticky;
            /* width:100%; */
            background-color: #081327;
            color: white;
            font-size: 40px;
            justify-content: center;
            align./-items:center; 
        }
        .error{
            hiển thị: flex;
            opacity: 1;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            chiều cao: 50px;
            background-color: black;
            color: #ff3333;
            z-index: 2;
            animation: show 0.7s;
        }
        .error span{

            vị trí: tuyệt đối;
            hiển thị: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            right:0px;
            chiều rộng: 50px;
            height: inherit;
            background-color: lightblue;
            color: #ff3333;
            transition:all 0.5s;
        }
        .error span:hover{
            background-color: red;
            color: black;
        }
        li span{
            vị trí: tuyệt đối;
            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: đậm;
            font-size:40px; 
            căn chỉnh văn bản: ở giữa;
            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: đậm;
            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%{
            chiều cao: 50px;
            font-size: 40px;
            transform-origin: center;
            transform: rotateX(360deg);
            }
        }
        #text{
            hiển thị: flex;
            vị trí: tuyệt đối;
            justify-content: center;
            align-items: center;
            height: 100%;  
            position: fixed;
        }
        #textinfo{
            hiển thị: flex;
            vị trí: tương đối;
            border-radius: 15px;
            font-size:40px; 
            border: solid black 5px;
            justify-content: center;
            align-items: center;
            chiều cao: 200px;
            căn chỉnh văn bản: ở giữa;
            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{
            vị trí: tuyệt đối;
            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;
    }
    } */

    


    
        
            Anime List
            
            {{x}}
                ×

        

        
            Anime Exists×

            Enter New Anime


                <>
                    type="submit">Add Anime

            
        

    

    
        
        {{name}}
×

    



    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);
        }
    });

1 Câu trả lời

您应该考虑使用 Javascript 方法 element.scrollIntoView();

可能是这样的:

$scope.addAnime = function() {
    if (!$scope.newanime) {
    newanime.scrollIntoView();
      return;
    }

关于javascript - 如何自动滚动到列表中最后插入的值(非底部)。[[注 :List is Sorted]]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54531771/

Bài viết được đề xuất: c# - 如何使用 C# 检查是否安装了 PowerShell

Bài viết được đề xuất: ios - 在 Swift 中，使用选择器 init 覆盖的方法具有不兼容的类型

Bài viết được đề xuất: c# - 如何使用 Roslyn 初始化对象

Bài viết được đề xuất: javascript:从字符串数组中获取第一个参数，然后让其余的再次加入

Tên đúng cho DLL không phải COM, không phải .NET là gì?
Trong thế giới Windows, tên chính xác là gì? DLL C++ kiểu cũ với các hàm được xuất? Không phải là COM DLL và không phải là .NET DLL. Trước đây chúng tôi đã gọi LoadLibrary() và GetProcAdd
Cần cập nhật dữ liệu trên trình duyệt khi sự kiện (không phải web, không phải JSF) gọi
Hiện tại tôi đang sử dụng javaEE7 và tôi có một kịch bản như sau. Trong ứng dụng web JSF của tôi, tôi có một trình lắng nghe sự kiện (không phải sự kiện JSF) thực hiện một việc gì đó khi sự kiện được gọi và sau đó cập nhật ứng dụng web của tôi bằng thông tin đó
Làm thế nào để gọi một hàm (không phải AJAX) sau khi một hàm khác (không phải AJAX) hoàn thành trong Dojo?
Đây không phải là câu hỏi gọi lại yêu cầu/phản hồi AJAX... Tôi đang sử dụng Dojo 1.5 để xây dựng lưới. Tôi đang cố gắng kết nối dojo.connect một nút mở rộng/thu gọn có chức năng. Vấn đề của tôi là grid.startup() không tạo ra D thực tế
Cách phát hiện Opera cũ (không phải Webkit, không phải Next, phiên bản 14-) qua JavaScript
Opera không phải Webkit có một số tính năng rất cụ thể, vì vậy nó thường được phát hiện thông qua JavaScript theo cách sau. Tuy nhiên, Opera Next hầu như hoàn toàn là Goo
Làm thế nào để tìm địa chỉ IP của yêu cầu đến trong nhật ký couchbase? (API không phải REST - Yêu cầu bảng điều khiển không phải web)
Tôi đã xem qua tất cả các bản ghi được cung cấp trong liên kết sau nhưng không tìm thấy địa chỉ IP: https://developer.couchbase.com/documentation/server/3.x/admin/Misc/Tr
Làm thế nào để tạo bản dựng Android Gradle phụ thuộc vào một tác vụ đơn giản (không phải thư viện Android, không phải Java) cung cấp tệp jar?
Tôi có một chương trình dòng lệnh tạo tệp jar từ một tập hợp các tệp nguồn mà tôi muốn sử dụng trong bản dựng gradle Android của mình (A). Chương trình dòng lệnh này chỉ lưu trữ một tệp jar trong một thư mục trên đĩa. Tôi đã tạo ra như thế nào
linux - Di chuyển http không có www thành http www và https không có www thành https www
Lệnh htaccess sau đây sẽ chuyển tất cả các trang web không phải www sang http www RewriteEngine On RewriteCond %{HTTP_HOST} !^www\. RewriteRule ^
phần dữ liệu chưa được khởi tạo không phải .bss
Tôi đang sử dụng một tập lệnh liên kết tùy chỉnh để chia ảnh hạt nhân của mình thành hai phần. Phần đầu tiên là mã và dữ liệu bình thường, phần thứ hai là mã và dữ liệu khởi tạo sẽ bị loại bỏ khi không còn cần thiết. Phần khởi tạo cũng không được chia sẻ giữa các không gian địa chỉ như chính hạt nhân, vì vậy nếu fork() vẫn tồn tại (
Ý nghĩa của toán tử "++" (không phải ++)
Câu hỏi này đã có câu trả lời tại đây: Một số toán tử đơn trong C và C++ (3 câu trả lời) Toán tử "-->" trong C++ là gì? (29
Phương pháp không phải là phương pháp cuối cùng để ảo hóa
Giả sử tôi có một thiết lập lớp như thế này: class A { public: virtual void foo() { printf("default implementation\n"); } }; c
Không (~) so với phủ định (!)
#include sử dụng không gian tên std; int main(int argc, char *argv[]) { int i=-5; while(~(i)) {
Làm thế nào để một trang web không chính thức tránh bị Baidu hạ cấp?
Gần đây, công cụ tìm kiếm Baidu đã thay đổi không thể đoán trước. Nhiều trang web của công ty, trang web của ngành, trang web cổng thông tin, trang web diễn đàn, v.v. đã bị hạ cấp. Đặc biệt, mạng thông tin được phân loại Bibitie đã bị loại bỏ trực tiếp. Đây là một đòn giáng mạnh vào phần lớn các quản trị viên web, cũng như đối với nhiều công ty và ngành công nghiệp khác nhau. Nhiều địa điểm đã được phục hồi.
Kích thước bộ nhớ không mất dữ liệu TPM?
Hiện tại tôi đang sử dụng IBM TPM v1332 + IBM TSS v1470 và đang cố gắng lưu trữ một số từ khóa/mật khẩu cơ bản vào bộ nhớ không mất dữ liệu trên TPM. Tôi tìm ra hai cách để thực hiện việc này. Một là tạo ra một vật thể kín và sử dụng
Ranh giới từ ngữ Regex trong trường hợp không phải ASCII
Tôi có một biểu thức chính quy trong tập lệnh PHP của mình trông như thế này: /(\b$term|$term\b)(?!([^)/iu Biểu thức này khớp với một từ có trong $term miễn là có ranh giới từ trước và sau nó và nó không nằm trong thẻ HTML. Nhưng
Nhận địa chỉ tên từ xa (không phải IP)
Tôi muốn hiển thị địa chỉ tên người dùng (xem www.ipchicken.com), nhưng thứ duy nhất tôi tìm thấy là địa chỉ IP. Tôi đã thử tra cứu ngược nhưng cũng không hiệu quả: IPAddress ip = IPAddress.Parse(th
Một luồng không phải UI có thể được hiển thị trên màn hình không?
Chỉ có luồng UI mới có thể hiển thị lên màn hình hay các luồng khác cũng có thể làm như vậy? Câu trả lời hay nhất Không, bạn chỉ có thể truy cập UI trực tiếp từ luồng UI, nhưng bạn có thể mã hóa kết quả từ các luồng khác, chẳng hạn như sử dụng Control.Invoke hoặc control
Sự kiện thay đổi thanh cuộn không phải ActiveX?
Tôi đang sử dụng thanh cuộn Excel hiện đại (không phải loại ActiveX cũ, tức là Developer > Insert > Form Controls > Scrollbar) và muốn phát hiện khi giá trị của thanh cuộn thay đổi. Tôi không tìm thấy bất kỳ thông tin nào về sự kiện thay đổi cho lớp đối tượng này. Bạn có thể nhấp vào
css - Sử dụng stylesheets khi không có trong IE
IE 6 sử dụng đúng bảng định kiểu đã chỉ định khi tôi sử dụng mã này, nhưng tất cả các trình duyệt khác đều bỏ qua cả hai bảng định kiểu khi chúng nên sử dụng bảng định kiểu về cơ bản tuyên bố rằng nếu bạn không sử dụng IE, hãy sử dụng bảng định kiểu này. Bạn có ý tưởng nào không? Câu trả lời hay nhất n
loopbackjs - mối quan hệ loopback trên các trường không phải id
Tôi muốn chỉ định mối quan hệ giữa 2 bảng mssql. Các loại hình thanh toán và phương thức thanh toán. paymentcategory.id được thêm vào cột payout.category. Trong mô hình payout.json tôi đã chỉ định khóa ngoại là: id,
UDF không biến động luôn tính toán lại
Tôi đang cố gắng tạo một UDF không mất dữ liệu nhưng có vẻ như không thể. Vì vậy, đây là UDF kiểm tra rất đơn giản của tôi: Tùy chọn Rõ ràng Dim i Là Số nguyên Sub Main() i = 0

行者123

Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Bài viết phổ biến của tác giả

Nhận phiếu giảm giá Didi Taxi miễn phí

Các bài viết nóng hổi trên toàn bộ trang web

trang đầu

đã học

Trí tuệ nhân tạo 6Ren

Trung tâm mua sắm

javascript - 如何自动滚动到列表中最后插入的值(非底部)。[[注 :List is Sorted]]