JavaScript scrollIntoView với hướng dẫn, giới thiệu về javascript, các lỗi về javascript, ứng dụng của javascript, vòng lặp, biến, đối tượng, bản đồ, typedarray, v.v.

Bạn đang xem: javascript cuộn vào chế độ xem

tiếp theo →
← trước

JavaScript scrollIntoView

JavaScript scrollIntoView () là một phương thức của lớp Phần tử cho phép chúng tôi cuộn phần tử vào phần xem của cửa sổ.

Ở đây, trong phần này, chúng ta sẽ tìm hiểu cách sử dụng phương thức scrollIntoView () để cuộn các phần tử vào dạng xem. Chúng tôi cũng sẽ triển khai một ví dụ để chúng tôi có thể hiểu cách làm việc và sử dụng hàm.

Phương thức JavaScript scrollIntoView ()

Phương thức scrollIntoView () được sử dụng để cuộn các phần tử trên khung nhìn.

Cú pháp:

Trong các cú pháp được mô tả ở trên, các tham số được chỉ định là:

  • alignToTop: Tham số alignToTop chứa giá trị Boolean có thể là true hoặc false và theo mặc định, giá trị của nó được đặt thành true. Đối với một mã cụ thể, nếu tham số này đúng, do đó, phần trên cùng của phần tử sẽ được căn chỉnh với phần trên cùng của vùng hiển thị hoặc ở trên cùng của khu vực khung nhìn. Tuy nhiên, trong trường hợp giá trị được đặt thành false; do đó, phần dưới cùng của phần tử được căn chỉnh với phần dưới cùng của chế độ xem hoặc ở dưới cùng của vùng hiển thị của thanh cuộn.
  • tùy chọn: Đây là đối số kiểu đối tượng và hỗ trợ của trình duyệt có thể khác nhau. Tham số này cung cấp nhiều quyền kiểm soát hơn đối với việc căn chỉnh của phần tử trong chế độ xem.
    Nó có các thuộc tính sau:

    • Thuộc tính đầu tiên là hành vi r xác định hoạt ảnh chuyển tiếp. Thuộc tính có thể có bất kỳ giá trị nào trong hai giá trị, tức là tự động hoặc mượt mà , trong đó giá trị mặc định là tự động .
    • Thuộc tính block là một thuộc tính khác xác định căn chỉnh theo chiều dọc của các phần tử và có thể có bất kỳ giá trị nào trong bốn giá trị, tức là , bắt đầu, giữa, cuối hoặc gần nhất . Ở đây, giá trị mặc định là start .
    • Thuộc tính cuối cùng là thuộc tính inline xác định căn chỉnh theo chiều ngang và có thể có bất kỳ giá trị nào trong số bốn giá trị, tức là đầu, giữa, cuối hoặc gần nhất . Ở đây, giá trị mặc định là gần nhất .
Xem Thêm  Phân phối bình thường trong Python - lấy python phân phối chuẩn

Bây giờ, hãy lấy một ví dụ về phương thức scrollIntoView ().

JavaScript scrollIntoView () Ví dụ

Hãy lấy một ví dụ để hiểu hoạt động của phương thức scrollIntoView () của JavaScript :

Kiểm tra ngay bây giờ

Khi nhấp vào nút một lần, chúng tôi nhận được kết quả sau: < / p>
JavaScript scrollIntoView

Trong kết quả đầu ra, bạn có thể thấy rằng chúng tôi không thể xem các mục danh sách trong chế độ xem nếu không cuộn. Chúng tôi chỉ có thể nhìn thấy các mục danh sách này sau khi nhấn nút mà khi nhấp vào nút, mục danh sách sẽ được cuộn vào vùng hiển thị.

Giải thích mã:

  1. Đoạn mã trên là một tệp html bao gồm cả mã html và JavaScript.
  2. Chúng tôi đã tạo danh sách các mục và ở giữa các mục, chúng tôi đã tạo id = id_test để chúng tôi có thể lấy điểm cuộn từ nơi cửa sổ sẽ được cuộn.
  3. Tiếp theo, chúng tôi đã tạo một nút ‘Nhấp vào nó’ mà chúng tôi đã sử dụng chức năng này khi người dùng nhấp chuột.
  4. Vì hàm là hàm JS, nên theo định nghĩa hàm, danh sách các mục cụ thể sẽ được tìm nạp và nó sẽ được lưu trữ trong biến được chỉ định.
  5. Khi chúng tôi sử dụng thuộc tính scrolIntoView, các cửa sổ sẽ được cuộn đến mục danh sách cụ thể.
  6. Cuối cùng, mục này sẽ hiển thị trong chế độ xem.

Vì vậy, phương thức scrollIntoView () của JavaScript được sử dụng để làm cho phần ẩn có thể nhìn thấy chỉ bằng cách cuộn thanh cuộn. Bạn cũng có thể thử phương thức JavaScript scrollIntoView () theo cách khác.

Chủ đề tiếp theo

Chuỗi JavaScript bắt đầuVới

← trước
tiếp theo →


Xem thêm những thông tin liên quan đến chủ đề javascript cuộn vào chế độ xem

Locomotive Scroll is Awesome – Here’s how to use it

alt

  • Tác giả: DesignCourse
  • Ngày đăng: 2020-09-29
  • Đánh giá: 4 ⭐ ( 2528 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: https://bit.ly/3lCXoXv – Become a frontend developer (50% off limited time!)
    — Want to learn UI/UX? https://designcourse.com
    — Today, we’re stepping back into the exciting world of frontend development to check out a JavaScript library called Locomotive Scroll. It allows you to do a number of things, but primarily it allows you to integrate a smooth / gradual scroll experience. I’m going to show you how to get it installed, and set it up with some of the many features.

    Let’s get started!

    – – – – – – – – – – – – – – – – – – – – – –

    Subscribe for NEW VIDEOS!

    Learn UI/UX: https://designcourse.com
    My personal FB account: http://fb.com/logodesigner
    Coursetro FB: http://fb.com/coursetro
    Coursetro’s Twitter: http://twitter.com/designcoursecom

    Join my Discord! https://discord.gg/a27CKAF
    ^-Chat with me and others

    – – – – – – – – – – – – – – – – – – – – – –

    Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

    Now, I focus all of my time and energy on this channel and my website Designcourse.com.

    Come to my discord server or add me on social media and say Hi!

Kích hoạt JavaScript trong trình duyệt của bạn

  • Tác giả: support.google.com
  • Đánh giá: 4 ⭐ ( 2424 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để xem quảng cáo của Google trên trang web, hãy kích hoạt JavaScript trong trình duyệt của bạn.
    Kích hoạt JavaScript trong Google Chrome Mở Chrome trên máy tính. Nh

🥇 ▷ 8 Đoạn mã CSS và JavaScript để thêm hiệu ứng cuộn vào trang web của bạn …

  • Tác giả: apsachieveonline.org
  • Đánh giá: 5 ⭐ ( 1146 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ✅ Du lịch là một trong những nhiệm vụ cơ bản nhất mà chúng tôi yêu cầu người dùng. Và đánh giá bằng số lượng cuộn trên các trang web và ứng dụng hiện nay,

Sothink JavaScript Web Scroller 2.3

  • Tác giả: download.com.vn
  • Đánh giá: 5 ⭐ ( 6139 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sothink JavaScript Web Scroller, Sothink JavaScript Web Scroller sẽ đơn giản hóa việc tạo hàng loạt kiểu thanh cuộn ngang cho quảng cáo, các sự kiện, tin tức, trình

Các hiệu ứng cuộn với JavaScript

  • Tác giả: www.javascriptbank.com
  • Đánh giá: 4 ⭐ ( 2362 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tất cả các hiệu ứng dùng cho tính năng cuộn trên trang web như cuộn tự động, cuộn theo nhiều hướng, cuộn chớp giật… – Trang 1 – Ngôn ngữ: tiếng Việt

Cuộn vào chế độ xem trong phản ứng

  • Tác giả: isolution.pro
  • Đánh giá: 3 ⭐ ( 9904 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Chế độ strict của javascript có nên sử dụng chế độ này không ?

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 5 ⭐ ( 1275 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chế độ strict của javascript là gì nhỉ ? Strict là nghiêm khắc, nghiêm ngặt, cũng có thể hiểu khi đặt chế độ này thì javascript không còn dễ tính nữa. 🙁

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

Xem Thêm  Thuộc tính màu nền CSS - thuộc tính css để thiết lập màu nền của phần tử

By ads_php