Giới thiệu về CSS Snap Snap Points
Các Mô-đun Snap cuộn CSS là một tiêu chuẩn web cung cấp cho chúng tôi một số quyền kiểm soát cuộn trên một trang web để chúng tôi có thể khiến người dùng cuộn đến một số phần nhất định của trang thay vì chỉ bất kỳ nơi nào trên đó.
Cuộn là một trong những hành động được thực hiện nhiều nhất trên một trang web. Trình duyệt, trong những năm qua, có cải thiện hiệu suất cuộn của họ để phù hợp với sức mạnh ngón tay nhanh nhẹn của người dùng. Và, các nhà phát triển có sử dụng cuộn một cách sáng tạo để đạt được trải nghiệm người dùng tốt hơn hoặc vượt trội.
Tuy nhiên, khi nói đến mối tương quan giữa mã hóa và cuộn, chỉ JavaScript dường như có bất kỳ số lượng kiểm soát nào sau này. Điều này là như vậy trong một thời gian dài, nhưng với giới thiệu các điểm chụp cuộn, CSS bắt đầu theo kịp.
Cuộn mà không cuộn điểm snap
Thông thường, chúng tôi không cuộn rất chậm, đặc biệt là trên điện thoại. Bạn cuộn càng nhanh, bạn càng ít kiểm soát nơi nào trên màn hình bạn sẽ kết thúc khi bạn ngừng cuộn.
Hãy tưởng tượng bạn đang cuộn qua một mảng hình ảnh sản phẩm trên một trang web, hoặc một bộ sưu tập ảnh hoặc các slide trực tuyến. Những gì bạn thích trong các ứng dụng như vậy là xem toàn bộ sản phẩm, hình ảnh hoặc slide mỗi khi bạn cuộn Không chỉ một phần của hình ảnh sản phẩm, hình ảnh hoặc slide.
Ví dụ: trên bản demo bên dưới, bạn có thể thấy bất cứ khi nào người dùng dừng cuộn, chỉ khoảng một nửa hình ảnh có thể nhìn thấy ở cuối màn hình. Tuy nhiên, hầu hết người dùng muốn xem hình ảnh cuối cùng đầy đủ.
Cuộn với các điểm chụp cuộn
Đây là nơi chúng tôi mang vào Điểm chụp CSS cuộn. Tên là tự giải thích; đó là một tiêu chuẩn CSS cho phép chúng ta gắn vật phẩm vào vị trí khi cuộn.
Có năm thuộc tính CSS tạo thành tiêu chuẩn này:
kiểu cuộncuộn-snap-points-xcuộn-snap-points-ycuộn-snap-tọa độcuộn-snap-đích
Hỗ trợ trình duyệt
Các thuộc tính nhu cầu -webkit và -Cô tiền tố cho các trình duyệt có liên quan. Khi viết bài viết này, snap cuộn CSS không được hỗ trợ trong Chrome và Opera.
Lưu ý rằng bốn thuộc tính cuối cùng có khả năng bị loại bỏ bởi các tác nhân người dùng trong tương lai gần. Thay thế, tài sản mới, cụ thể là cuộn-snap-align, cuộn-snap-lề, và cuộn-snap-padding, có thể được tạo ra, như được định nghĩa trong đặc tả này.
Tuy nhiên, họ sẽ có một mục đích tương tự như các tài sản trước đây. Hiện tại, tập hợp các thuộc tính trước đây sẽ hoạt động tốt.
Tính chất
Bạn cần phải thêm kiểu cuộn thuộc tính cho container cuộn (phần tử container có con tràn ra trong khi cuộn). Nó chỉ định sự nghiêm ngặt của hành động snap. Nó có thể mất ba giá trị:
bắt buộc- khi cuộn xong, việc cuộn sẽ chụp tại một điểm chụp có liên quangần- ít nghiêm ngặt hơnbắt buộc; nó sẽ phụ thuộc vào sự phán xét của UA liệu phần tử sẽ chụp tại một điểm chụp nhất địnhkhông ai- không chụp nhanh
Các cuộn-snap-points-x và cuộn-snap-points-y tính chất thuộc về thùng chứa cuộn, quá. Chúng đề cập đến các điểm trên trục x và y nơi các điểm chụp sẽ tồn tại. Giá trị của họ là được đưa ra bởi nói lại() chức năng. Chẳng hạn, nếu bạn muốn thêm các điểm chụp dọc theo trục x ở khoảng 100px bạn cần sử dụng cuộn-snap-points-x: repeat (100px) quy tắc.
Các cuộn-snap-đích thuộc tính cũng được thêm vào thùng chứa cuộn. Nó định nghĩa tọa độ trên container nơi một điểm đến nhanh chóng nằm. Đó là tại điểm đến nhanh này, nơi trẻ em của người chứa sẽ chụp vào vị trí khi cuộn.
Bạn có thể dùng cuộn-snap-tọa độ tài sản kết hợp với cuộn-snap-đích. Bạn cần thêm nó vào các phần tử con của container. Nó định nghĩa tọa độ của các phần tử con, sẽ căn chỉnh với tọa độ đích của thùng chứa cuộn của họ khi người dùng cuộn màn hình.
Lưu ý rằng bạn không phải sử dụng tất cả các thuộc tính cùng một lúc. Chỉ có kiểu cuộn Là bắt buộc. Cùng với đó, bạn có thể xác định các điểm chụp riêng lẻ hoặc sử dụng kết hợp tọa độ đích.
Mã ví dụ
Dưới đây là đoạn mã ví dụ cho một container cuộn điển hình, với cuộn theo hướng dọc và một số hình ảnh bên trong. Nó xuất ra bản demo mà bạn có thể tìm thấy ở đầu bài này.
div chiều rộng: 300px; chiều cao: 300px; tràn: auto; ' div> img width: 250px; chiều cao: 150px;
Bây giờ chúng ta thêm một số điểm chụp vào hộp chứa cuộn:
div chiều rộng: 300px; tràn: tự động; cuộn-snap-points-y: repeat (150px); cuộn-snap-type: bắt buộc;
Dưới đây, bạn có thể thấy đầu ra trông như thế nào với Đã thêm điểm snap CSS. Lưu ý bất cứ khi nào cuộn dừng trong khi hình ảnh dưới cùng chỉ hiển thị một phần, hình ảnh đầy đủ xuất hiện sau khi scrollport chộp vào một điểm chụp phía trên nó.
