Thêm scroll-behavior: smooth
vào phần tử để cho phép cuộn trơn tru cho toàn bộ trang [lưu ý. cũng có thể thêm nó vào một phần tử/thùng chứa cuộn cụ thể]
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính scroll-behavior
Hành vi cuộn thuộc tính 61. 079. 036. 014. 048. 0
Giải pháp đa trình duyệt
Đối với các trình duyệt không hỗ trợ thuộc tính scroll-behavior
, bạn có thể sử dụng JavaScript hoặc thư viện JavaScript, chẳng hạn như jQuery, để tạo một giải pháp phù hợp với tất cả các trình duyệt
Thí dụ
Mẹo. Đọc thêm về thuộc tính hành vi cuộn trong Tài liệu tham khảo CSS của chúng tôi. Thuộc tính hành vi cuộn CSS
Có điều hướng vững chắc được tích hợp vào trang web của bạn là một trong những bước đầu tiên để xây dựng nó. Vì vậy, không cần phải nói rằng có một thanh điều hướng là một phần quan trọng. Đối với trang danh mục đầu tư của mình, tôi quyết định xây dựng một thanh điều hướng, tìm kiếm trên trang web mà tôi bắt gặp cuộn phản ứng
React-scroll là một thư viện hợp lý hóa quá trình tạo các tương tác cuộn trên trang. Điều này là hoàn hảo để tạo một thanh điều hướng với tính năng cuộn chất lỏng được tích hợp sẵn
Yêu cầu
- thanh điều hướng cố định
- Phần điều hướng bên trong thanh điều hướng có liên kết
- Liên kết khi được nhấp, cuộn đến phần tương ứng
Mã cùng
Đầu tiên, hãy xây dựng tiêu đề chứa thanh điều hướng
JavaScript
ABOUT PROJECTS BLOG CONTACT ME
Đủ đơn giản Chúng tôi có tiêu đề với một vài phần mà chúng tôi nên liên kết đến. Tiếp theo, chúng ta hãy xem những gì cuộn phản ứng cung cấp cho chúng tôi
Theo tài liệu họ có thành phần Liên kết. Thành phần liên kết này đi kèm với 3 đạo cụ mà chúng tôi quan tâm. activeClass , gián điệp và để
- activeClass sẽ thay đổi kiểu của thành phần danh sách trong thanh điều hướng khi cuộn qua thành phần
- gián điệp là cách báo cho cuộn phản ứng phần tử nào cần xem để áp dụng activeClass
- to là phần tử mà nó sẽ cuộn đến, khớp với ID
Cân nhắc điều đó, hãy thêm tất cả các đạo cụ
JavaScript
ABOUT PROJECTS BLOG CONTACT ME
Tuyệt quá. Bây giờ, hãy tạo các phần, chúng sẽ liên kết với các phần ngay bên dưới tiêu đề của chúng ta
JavaScript
ABOUT PROJECTS BLOG CONTACT ME
Nếu bạn nhận thấy chỗ dựa trơn tru cũng đã được thêm vào các liên kết. Điều này là để thêm hành vi cuộn trơn tru
tạo kiểu
Và với điều đó, chúng tôi đã hoàn thành. Tất cả những gì còn lại là thêm một số kiểu để các phần có đủ không gian. Ngoài ra, hãy áp dụng một số kiểu dáng cho chính thanh điều hướng để nó có thuộc tính cố định được chỉ định trong các yêu cầu
CSS
section { display: grid; place-items: center; height: 100vh; font-size: 32px; font-weight: bold; } .nav { display: flex; align-items: center; position: -webkit-sticky; position: sticky; top: -5px; z-index: 2; height: 70px; min-height: 70px; width: calc[100% - 1.5rem]; background-color: #fff; padding: 0 1rem; box-shadow: 0 0.125rem 0.25rem 0 rgb[0 0 0 / 11%]; }
Kiểm tra ví dụ hoạt động đầy đủ và phần còn lại của các kiểu được áp dụng
Nếu bạn thấy bất kỳ lỗi chính tả hoặc lỗi nào, bạn có thể chỉnh sửa bài viết trực tiếp trên GitHub
Luôn dẫn đầu ngành công nghệ và phát triển với tư cách là nhà phát triển với tuyển chọn các bài báo và tin tức được tuyển chọn cùng với lời khuyên, quan sát và thông tin chi tiết cá nhân. 🚀
Không spam 🙅♂️. Hủy đăng ký bất cứ khi nào.
Phong bì
Đặt muaBạn cũng có thể thích những bài viết này
Sao chép liên kết Tab mới
Cách thiết lập Bun trên máy tính Windows
Cách thiết lập Bun, Thời gian chạy JavaScript tất cả trong một nhanh trên máy tính Windows bằng WSL2, Docker Desktop và Visual Studio Code
Ngày 25 tháng 10 năm 2022
trong phản ứng
5 phút đọcSao chép liên kết Tab mới
Kiểm tra một ứng dụng React làm việc với Codecov
Cách kiểm tra ứng dụng web React và tải kết quả bao phủ mã kiểm tra lên Codecov
Ngày 17 tháng 10 năm 2022
trong thử nghiệm, phản ứng
Sao chép liên kết Tab mới
Thử nghiệm ứng dụng React Thiết bị cơ sở mã của chúng tôi
Thử nghiệm một ứng dụng React. Cách thiết lập cơ sở mã ứng dụng web React với Istanbul
Ngày 10 tháng 10 năm 2022
trong thử nghiệm, phản ứng
4 phút đọcSao chép liên kết Tab mới
Di chuyển Zustand từ phiên bản 3 sang 4
Trong bài viết này, tôi trình bày kinh nghiệm của mình về cách tôi di chuyển Zustand từ phiên bản 3 sang 4 trong ứng dụng web React bằng Typescript