Bài viết này sẽ hướng dẫn bạn cách cuộn xuống cuối div bằng cách sử dụng kết hợp scrollTop và scrollHeight, jQuery, jQuery .animate (), Element.scroll () và Element.scrollIntoView ().

Bạn đang xem : js cuộn đến div

Bài viết này sẽ hướng dẫn bạn cách cuộn xuống cuối div bằng các phương pháp sau.

< ol>

  • Cuộn xuống dưới cùng với scrollTop scrollHeight .
  • Cuộn xuống cuối với jQuery.
  • Cuộn xuống cuối với jQuery .animate () .
  • Cuộn xuống cuối với Element.scroll () .
  • Cuộn xuống cuối bằng < code> Element.scrollIntoView () .
  • Sử dụng scrollTop scrollHeight để Di chuyển đến Bottom of Div trong JavaScript

    Sự kết hợp của scrollTop scrollHeight có thể gây ra một phần tử để cuộn xuống dưới cùng vì scrollTop xác định số lượng pixel cho một cuộn dọc. Ngược lại, scrollHeight là chiều cao của phần tử (phần hiển thị và không hiển thị).

    Do đó, đối với một phần tử, khi scrollTop bằng scrollHeight , trình duyệt sẽ cuộn lên. Điều này cho phép nhìn thấy phần dưới cùng của phần tử.

    Tuy nhiên, phương pháp này yêu cầu phần tử phải có thể cuộn được. Bạn có thể đạt được điều này khi phần tử có phần tử con gây tràn dọc.

    Trong khi đó, bạn có thể kiểm soát tràn bằng tràn-y: scroll . Điều này có nghĩa là nếu không có tràn-y: scroll , phương pháp này sẽ không hoạt động.

    Ví dụ: trong khối mã tiếp theo, phần tử HTML có ID là scroll -to-bottom có chiều cao là 300 pixel. Trong khi đó, phần tử con có chiều cao là 400 pixel.

    Do đó, phần tử con gây tràn phần tử mẹ của nó. Tuy nhiên, chúng tôi đã kiểm soát phần tràn bằng tràn-y: scroll trong CSS.

      & lt; head & gt;
    & lt; meta charset = "utf-8" & gt;
    & lt; title & gt; Cuộn xuống dưới cùng - 1 (scrollT trên và scrollHeight) & lt; / title & gt;
    & lt; style type = "text / css" & gt;
    # cuộn xuống cuối {
    border: 5px solid # 1a1a1a;
    đệm lót: 2em;
    chiều rộng: 50%;
    margin: 0 auto;
    chiều cao: 300px;
    tràn-y: cuộn;
    }
    .Nội dung {
    chiều cao: 400px;
    }
    
    P {
    font-size: 100px;
    }
    & lt; / style & gt;
    & lt; / head & gt;
    & lt; body & gt;
    & lt; div id = "scroll-to-bottom" & gt;
    & lt; div class = "content" & gt;
    & lt; p & gt; Đây là một văn bản giả & lt; / p & gt;
    & lt; / div & gt;
    & lt; / div & gt;
    & lt; script & gt;
    let scroll_to_bottom = document.getElementById ('scroll-to-bottom');
    scroll_to_bottom.scrollTop = scroll_to_bottom.scrollHeight;
    & lt; / script & gt;
    & lt; / body & gt;
     

    Đầu ra:

    Sử dụng jQuery để cuộn đến cuối Div trong JavaScript

    jQuery xác định một API có tên là scrollTop sẽ lấy hoặc đặt vị trí dọc của thanh cuộn. Thanh cuộn được đề cập sẽ dành cho một tập hợp các phần tử phù hợp.

    Khi được sử dụng với scrollHeight của phần tử, bạn có thể cuộn xuống cuối phần tử.

    < p> Chúng tôi đã chọn một phần tử bằng bộ chọn jQuery trong đoạn mã tiếp theo. Đồng thời, chúng tôi đã sử dụng phần tử scrollTop để chọn phần tử và scrollHeight của nó.

    Bạn sẽ lưu ý từ mã mà chúng tôi ‘đã sử dụng [0] để lấy phần tử DOM. Do đó, khi bạn tải mã trong trình duyệt web của mình, div sẽ cuộn xuống dưới cùng.

    Ngoài ra, trong mã JavaScript, chúng tôi đã cung cấp các biến thể của phương pháp này. Tuy nhiên, chúng tôi đã để chúng dưới dạng nhận xét.

    Xem Thêm  Cách Sửa Lỗi Out Of Range Hiệu Quả Nhất, 3 Cách Hay Nhất Sửa Lỗi Máy Tính Out Of Range - lỗi out of range

    Lưu ý cuối cùng, phương pháp này cũng yêu cầu phần tử có thể cuộn được.

     & lt; head & gt;
    & lt; meta charset = "utf-8" & gt;
    & lt; title & gt; Cuộn xuống dưới cùng - 2 (jQuery) & lt; / title & gt;
    & lt; style type = "text / css" & gt;
    # cuộn xuống cuối {
    border: 5px solid # 1a1a1a;
    đệm lót: 2em;
    chiều rộng: 50%;
    margin: 0 auto;
    chiều cao: 300px;
    tràn-y: cuộn;
    }
    .Nội dung {
    chiều cao: 400px;
    }
    
    P {
    font-size: 100px;
    }
    & lt; / style & gt;
    & lt; / head & gt;
    & lt; body & gt;
    & lt; div id = "scroll-to-bottom" & gt;
    & lt; div class = "content" & gt;
    & lt; p & gt; Đây là một văn bản giả & lt; / p & gt;
    & lt; / div & gt;
    & lt; / div & gt;
    
    & lt; script
    src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    toàn vẹn = "sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP + u1T9qYdvdihz0PPSiiqn / + / 3e7Jo4EaG7TubfWGUrMQ =="
    crossorigin = "vô danh"
    giới thiệu = "no-giới thiệu"
    & gt;
    & lt; / script & gt;
    & lt; script & gt;
    $ ('# scroll-to-bottom'). scrollTop ($ ('# scroll-to-bottom') [0] .scrollHeight);
    
            // Đoạn mã sau làm điều tương tự:
            // $ ('# scroll-to-bottom'). scrollTop (function () {
    // trả về this.scrollHeight;
    //});
    
    // let scroll_to_bottom = $ ("# scroll-to-bottom");
    // scroll_to_bottom.scrollTop (scroll_to_bottom.prop ("scrollHeight"));
    & lt; / script & gt;
    & lt; / body & gt;
     

    Đầu ra:

    Sử dụng jQuery .animate () để Di chuyển đến Bottom of Div trong JavaScript

    API jQuery .animate () cho phép bạn thực hiện hoạt ảnh tùy chỉnh trên các thuộc tính CSS. Do đó, bạn có thể tạo hiệu ứng cuộn mượt mà.

    Ý chúng tôi nói “mượt” là hiệu ứng cuộn xuống cuối sẽ thu hút người dùng. Tuy nhiên, bạn sẽ cần scrollTop scrollHeight để giải quyết vấn đề này.

    Chúng tôi muốn giữ mã sạch vì chúng tôi sử dụng . API animate () . Vì vậy, chúng ta sẽ gói tất cả mã của mình trong một hàm.

    Hoạt động bên trong của hàm như sau: < / p>

    1. Lấy ID của phần tử bằng công cụ chọn jQuery.
    2. Đính kèm API .animate () vào phần tử này.
    3. Truyền một đối tượng làm đối số đầu tiên của API .animate () . Trong đối tượng này, hãy thực hiện như sau:
      1. Tạo một thuộc tính đối tượng có tên là scrollTop .
      2. Đặt giá trị scrollTop thành element.prop ("scrollHeight") .
    4. Đặt đối số thứ hai của API .animate () làm hoạt ảnh thời lượng.

    Sau đó, chúng tôi gọi hàm này trên ID HTML của phần tử. Trong khi đó, phần tử phải có thể cuộn được với CSS tràn-y: scroll .

      & lt; head & gt;
    & lt; meta charset = "utf-8" & gt;
    & lt; title & gt; Cuộn xuống dưới cùng - 3 (jQuery mịn) & lt; / title & gt;
    & lt; style type = "text / css" & gt;
    # cuộn xuống cuối {
    border: 5px solid # 1a1a1a;
    đệm lót: 2em;
    chiều rộng: 50%;
    margin: 0 auto;
    chiều cao: 300px;
    tràn-y: cuộn;
    }
    .Nội dung {
    chiều cao: 400px;
    }
    
    P {
    font-size: 100px;
    }
    & lt; / style & gt;
    & lt; / head & gt;
    & lt; body & gt;
    & lt; div id = "scroll-to-bottom" & gt;
    & lt; div class = "content" & gt;
    & lt; p & gt; Đây là một văn bản giả & lt; / p & gt;
    & lt; / div & gt;
    & lt; / div & gt;
    
    & lt; script
    src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    toàn vẹn = "sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP + u1T9qYdvdihz0PPSiiqn / + / 3e7Jo4EaG7TubfWGUrMQ =="
    crossorigin = "vô danh"
    giới thiệu = "no-giới thiệu"
    & gt;
    & lt; / script & gt;
    & lt; script & gt;
    const SmoothScroll = (id) = & gt; {
    const phần tử = $ (`# $ {id}`);
    element.stop (). animate ({
    scrollTop: element.prop ("scrollHeight")
    }, 500);
    }
    
    SmoothScroll ('cuộn xuống dưới');
    & lt; / script & gt;
    & lt; / body & gt;
     

    Đầu ra:

    Sử dụng < code> element.scroll () để Di chuyển đến Bottom of Div trong JavaScript

    Bạn có thể sử dụng element.scroll () để cuộn xuống cuối phần tử. Những gì element.scroll () yêu cầu là một tập hợp các tọa độ.

    Xem Thêm  Chỉ định giá trị mặc định cho các cột - SQL Server - thay đổi cột giá trị mặc định máy chủ sql

    Trong trường hợp này, chúng tôi sẽ đặt các tọa độ ở đầu phần tử. Ngoài ra, nếu muốn, bạn có thể cuộn trơn tru.

    Để cuộn xuống dưới cùng với element.scroll () , hãy đặt đối số đầu tiên của nó thành một đối tượng. Sau đó, thuộc tính đầu tiên của đối tượng này phải là thuộc tính top .

    Thuộc tính này phải có giá trị là element.scrollHeight. Ngoài ra, hãy đặt đối số thứ hai của element.scroll () thành behavior: "Smooth" để cuộn mượt mà.

    Chúng tôi đã sử dụng element.scroll () trên phần tử trong đoạn mã sau. Do đó, khi bạn chạy mã trong trình duyệt của mình, div sẽ cuộn xuống dưới cùng.

    Ngoài ra, phần tử phải có thể cuộn qua CSS tràn-y: scroll .

      & lt; head & gt;
    & lt; meta charset = "utf-8" & gt;
    & lt; title & gt; Cuộn xuống dưới cùng - 4 (Element.scroll ()) & lt; / title & gt;
    & lt; style type = "text / css" & gt;
    # cuộn xuống cuối {
    border: 5px solid # 1a1a1a;
    đệm lót: 2em;
    chiều rộng: 50%;
    margin: 0 auto;
    chiều cao: 300px;
    tràn-y: cuộn;
    }
    .Nội dung {
    chiều cao: 400px;
    }
    
    P {
    font-size: 100px;
    }
    & lt; / style & gt;
    & lt; / head & gt;
    & lt; body & gt;
    & lt; div id = "scroll-to-bottom" & gt;
    & lt; div class = "content" & gt;
    & lt; p & gt; Đây là một văn bản giả & lt; / p & gt;
    & lt; / div & gt;
    & lt; / div & gt;
    
    & lt; script & gt;
    let scroll_to_bottom = document.getElementById ('scroll-to-bottom');
    function scrollBottom (phần tử) {
    element.scroll ({top: element.scrollHeight, behavior: "Smooth"})
    }
    
    scrollBottom (scroll_to_bottom);
    & lt; / script & gt;
    & lt; / body & gt;
     

    Đầu ra:

    Sử dụng element.scrollintoview () để Cuộn đến Bottom of Div trong JavaScript

    Phương thức Element.scrollIntoView () sẽ cuộn một phần tử để hiển thị cho người dùng. Do đó, bạn sẽ thấy nội dung phần bổ sung bị ẩn khỏi tầm nhìn.

    Đồng thời, phần dưới cùng của phần tử.

    Không giống như các ví dụ trước trong bài viết này, bạn sẽ cần một phần tử div duy nhất. Phần tử div này phải có một số nội dung.

    < p class = "ezoic-ad leader-1 leader-1560 adtester-container adtester-container-560">

    Ngoài ra, bạn không cần đặt chiều cao cho div vì với scrollIntoView , chiều cao xác định có thể ngăn cuộn xuống dưới cùng.

    Trong đoạn mã sau, chúng tôi đã gọi scrollIntoView () trên phần tử div. Ngoài ra, chúng tôi đã đặt đối số của nó thành false .

    Đây là điều bắt buộc để cuộn phần tử xuống cuối.

      & lt; head & gt;
    & lt; meta charset = "utf-8" & gt;
    & lt; title & gt; Cuộn xuống dưới cùng - 5 (scrollIntoView ()) & lt; / title & gt;
    & lt; style type = "text / css" & gt;
    thân hình {
    đệm lót: 1em;
    }
    
    div {
    border: 5px solid # 1a1a1a;
    đệm lót: 2em;
    chiều rộng: 50%;
    margin: 0 auto;
    }
    
    P {
    font-size: 100px;
    }
    & lt; / style & gt;
    & lt; / head & gt;
    & lt; body & gt;
    & lt; div id = "scroll-to-bottom" & gt;
    & lt; p & gt; Đây là một văn bản giả & lt; / p & gt;
    & lt; / div & gt;
    & lt; script type = "text / javascript" & gt;
    let scroll_to_bottom = document.getElementById ('scroll-to-bottom');
    scroll_to_bottom.scrollIntoView (false);
    
    // scroll_to_bottom.scrollIntoView ({behavior: 'Smooth', block: 'end'});
    & lt; / script & gt;
    & lt; / body & gt;
     

    Đầu ra:

    Viết cho chúng tôi

    Các bài báo về DelftStack được viết bởi những người đam mê phần mềm như bạn. Nếu bạn cũng muốn đóng góp cho DelftStack bằng cách viết các bài báo trả phí, bạn có thể xem trang viết cho chúng tôi .

    Xem Thêm  Cách thêm hiệu ứng đổ bóng trên văn bản HTML bằng CSS - cách thêm bóng vào văn bản trong html


    Xem thêm những thông tin liên quan đến chủ đề js cuộn đến div

    The “scroll” event in JavaScript | window.onscroll

    • Tác giả: dcode
    • Ngày đăng: 2018-06-24
    • Đánh giá: 4 ⭐ ( 4898 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: By making use of the “scroll” event in JavaScript, you are able to react to when the users of your web page scroll down or up. Learn more in this video tutorial.

      In this video I take you through the usage of the “scroll” event on the Window object. This allows us to listen for when the user scrolls up or down the page – we then implement a function that displays a message box when the user has reached the bottom of the page.

      Support me on Patreon:
      https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!

      For your reference, check this out:
      https://developer.mozilla.org/en-US/docs/Web/Events/scroll

      Follow me on Twitter @dcode!

      If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!

      dcode javascript webdev

    JAVASCRIPT: Cuộn một div tràn bằng cách cuộn vào bất kỳ đâu trên trang

    • Tác giả: vie.centralbaptistquincyma.org
    • Đánh giá: 5 ⭐ ( 5654 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Tôi muốn kích hoạt cuộn div với nội dung tràn ngập bằng cách cuộn bất kỳ đâu trên trang, không chỉ bằng cách di chuyển chuột và nhấp trong div. Ngoài ra, tôi muốn ẩn thanh cuộn của div

    Smooth Scroll – javascript thuần

    • Tác giả: viblo.asia
    • Đánh giá: 4 ⭐ ( 1043 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Bài viết được dịch từ bài Smooth Scroll with vanilla javascript của tác giả Gurjit Singh.

    JavaScript để cuộn trang dài đến DIV

    • Tác giả: qastack.vn
    • Đánh giá: 5 ⭐ ( 3800 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] câu hỏi cũ, nhưng nếu có ai tìm thấy điều này thông qua google (như tôi…

    Cuộn mượt mà đến div id jQuery

    • Tác giả: vi.athabasca-foto.com
    • Đánh giá: 5 ⭐ ( 6125 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Tôi đã cố gắng lấy cuộn để mã jquery div id hoạt động chính xác. Dựa trên một câu hỏi tràn ngăn xếp khác, tôi đã thử DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/ $ (‘# myButton’) sau đây.

    JavaScript để cuộn trang dài đến DIV

    • Tác giả: helpex.vn
    • Đánh giá: 5 ⭐ ( 4652 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Tôi có một liên kết trên một trang HTML dài. Khi tôi nhấp vào nó, tôi muốn một divphần khác của trang hiển thị trong cửa sổ bằng cách cuộn vào chế độ xem. Một chút giống như…

    Cách cuộn đến div trong anglejs

    • Tác giả: vie.cfadnc.org
    • Đánh giá: 3 ⭐ ( 1694 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Tôi đang cố cuộn đến thanh tab của mình khi tôi nhấp vào nút html của tôi (các tab)
      — Tất cả mã ở đây —-

      Js của tôi, hàm ScrollTopForTabs (…

    Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

    By ads_php