React-bootstrap cuộn mượt mà

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

	<nav>
		<ul>
			<li>ABOUTli>
			<li>PROJECTSli>
			<li>BLOGli>
			<li>CONTACT MEli>
		ul>
	nav>

Đủ đơ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
       

              <Link activeClass="active" smooth spy to="about">
                ABOUT
              Link>
            
            <li>
              <Link activeClass="active" smooth spy to="projects">
                PROJECTS
              Link>
            li>
            <li>
              <Link activeClass="active" smooth spy to="blog">
                BLOG
              Link>
            li>
            <li>
              <Link activeClass="active" smooth spy to="contact">
                CONTACT ME
              Link>
            li>

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">ABOUT
<section id="projects">PROJECTSsection>
<section id="blog">BLOGsection>
<section id="contact">CONTACT MEsection>

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ì