Hành vi tràn CSS

William Lim xây dựng trang web, trò chơi, ứng dụng di động và các ứng dụng khác. Anh ấy đã làm việc với tư cách là nhà phát triển web và lập trình viên trong cả công ty và công ty khởi nghiệp … Thông tin thêm về William ↬

Bản tin email

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

• Các mẫu thiết kế giao diện thông minh, khóa học 9h-video

• Hệ thống thiết kế thành công

• SmashingConf Freiburg 2023

• Bắt đầu miễn phí

• Giao diện người dùng SmashingConf 2023

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

Cuộn nảy (đôi khi còn được gọi là cuộn 'dải cao su' hoặc 'cuộn đàn hồi') thường được dùng để chỉ hiệu ứng bạn thấy khi cuộn lên đầu trang hoặc phần tử HTML hoặc xuống cuối trang. . Bạn có thể thấy một hiệu ứng tương tự xảy ra trong CSS scroll-snapping giữa các phần tử

Tuy nhiên, bài viết này tập trung vào hiện tượng cuộn trang bị nảy khi bạn cuộn lên đầu hoặc cuối trang web. Nói cách khác, khi các

Thu thập dữ liệu, cách mạnh mẽ

Bạn có biết rằng CSS có thể được sử dụng để thu thập số liệu thống kê không? . Đọc bài viết liên quan →

Hiểu rõ về tính năng cuộn cuộn sẽ rất hữu ích vì nó sẽ giúp bạn quyết định cách bạn xây dựng trang web của mình và cách bạn muốn trang cuộn

Cuộn nảy là điều không mong muốn nếu bạn không muốn thấy 25 yếu tố khi di chuyển trang. Một số ví dụ bao gồm. khi bạn muốn cố định đầu trang hoặc chân trang ở một vị trí nhất định hoặc nếu bạn muốn cố định bất kỳ thành phần nào khác chẳng hạn như menu hoặc nếu bạn muốn trang cuộn-chụp nhanh ở một số vị trí nhất định khi cuộn và bạn không muốn . Bài viết này sẽ đề xuất một số giải pháp cho các vấn đề gặp phải khi xử lý cuộn bị nảy ở đầu hoặc cuối trang web

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác

Cuộc gặp gỡ đầu tiên của tôi với hiệu ứng

Lần đầu tiên tôi nhận thấy hiệu ứng này là khi tôi đang cập nhật một trang web mà tôi đã xây dựng từ lâu. Bạn có thể xem trang web tại đây. Chân trang ở cuối trang được cho là cố định ở vị trí của nó ở cuối trang và hoàn toàn không di chuyển. Đồng thời, bạn được cho là có thể cuộn lên xuống qua các nội dung chính của trang. Lý tưởng nhất, nó sẽ hoạt động như thế này

Nó hiện đang hoạt động theo cách này trong Firefox hoặc trên bất kỳ trình duyệt nào trên thiết bị không có màn hình cảm ứng hoặc bàn di chuột. Tuy nhiên lúc đó mình đang dùng Chrome trên MacBook. Tôi đang cuộn xuống cuối trang bằng bàn di chuột thì phát hiện ra rằng trang web của mình không hoạt động chính xác. Bạn có thể thấy những gì đã xảy ra ở đây

Ôi không. Đây không phải là những gì đáng lẽ phải xảy ra. Tôi đã đặt vị trí của chân trang ở cuối trang bằng cách đặt thuộc tính CSS

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

Để bài viết này hoàn thiện hơn, mình sẽ hướng dẫn các bạn cách cuộn trang trên cả Mobile Edge, Mobile Safari và Desktop Safari bên dưới. Điều này khác với những gì xảy ra khi cuộn trên Firefox và Chrome. Tôi hy vọng điều này giúp bạn hiểu rõ hơn về cách thức hoạt động của cùng một mã chính xác theo những cách khác nhau. Hiện đang là một thách thức để phát triển tính năng cuộn hoạt động theo cùng một cách trên các trình duyệt web khác nhau

Tìm kiếm một giải pháp

Một trong những suy nghĩ đầu tiên của tôi là sẽ có một cách dễ dàng và nhanh chóng để khắc phục sự cố này trên tất cả các trình duyệt. Điều này có nghĩa là tôi nghĩ rằng tôi có thể tìm ra giải pháp chỉ cần một vài dòng mã CSS và không liên quan đến JavaScript. Do đó, một trong những điều đầu tiên tôi làm là cố gắng đạt được mục tiêu này. Các trình duyệt tôi đã sử dụng để thử nghiệm bao gồm Chrome, Firefox và Safari trên macOS và Windows 10 cũng như Edge và Safari trên iOS. Phiên bản của các trình duyệt này là mới nhất tại thời điểm viết bài này (2018)

Giải pháp chỉ dành cho HTML và CSS

Định vị tuyệt đối và tương đối

Một trong những điều đầu tiên tôi thử là sử dụng định vị tuyệt đối và tương đối để định vị chân trang vì tôi đã quen với việc xây dựng chân trang như thế này. Ý tưởng là đặt trang web của tôi ở độ cao 100% để chân trang luôn ở cuối trang với chiều cao cố định, trong khi nội dung chiếm 100% trừ đi chiều cao của chân trang và bạn có thể cuộn qua đó. Ngoài ra, bạn có thể đặt

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  height: 100%;
  overflow: hidden;
}

.body-container {
  height: calc(100% - 100px);
  overflow: auto;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
}

Giải pháp này hoạt động theo cách gần giống như giải pháp ban đầu (chỉ là

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

Một hiệu ứng khác mà tôi không muốn ban đầu rất khó nhận thấy và tôi chỉ nhận ra rằng nó đã xảy ra sau khi thử nhiều giải pháp hơn. Điều này là do việc cuộn qua nội dung trong ứng dụng của tôi chậm hơn một chút. Bởi vì chúng tôi đang đặt chiều cao của vùng chứa cuộn của chúng tôi thành 100% chính nó, điều này cản trở việc cuộn dựa trên tốc độ/lướt trên iOS. Nếu chiều cao 100% đó ngắn hơn (ví dụ: khi chiều cao 100% của 2000px trở thành chiều cao 100% của 900px), thì việc cuộn dựa trên động lượng sẽ kém hơn. Thao tác cuộn dựa trên tốc độ/lướt xảy ra khi bạn dùng ngón tay vuốt nhẹ trên bề mặt của màn hình cảm ứng và trang sẽ tự cuộn. Trong trường hợp của tôi, tôi muốn cuộn dựa trên đà xảy ra để người dùng có thể cuộn nhanh, vì vậy tôi tránh xa các giải pháp đặt chiều cao là 100%

Nỗ lực khác

Một trong những giải pháp được đề xuất trên web và tôi đã cố gắng sử dụng mã của mình, được hiển thị bên dưới làm ví dụ

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

Mã này hoạt động trên Chrome và Firefox trên macOS giống như giải pháp trước đó. Một lợi thế của phương pháp này là cuộn không bị giới hạn ở 100% chiều cao, do đó, cuộn dựa trên động lượng hoạt động bình thường. Tuy nhiên, trên Safari, chân trang biến mất

Trên iOS Safari, chân trang trở nên ngắn hơn và có thêm khoảng trống trong suốt (hoặc màu trắng) ở phía dưới. Ngoài ra, khả năng cuộn qua trang bị mất sau khi bạn cuộn xuống dưới cùng. Bạn có thể thấy khoảng trắng bên dưới chân trang tại đây

Một dòng mã thú vị mà bạn có thể thấy rất nhiều là.

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

Để hiển thị một ví dụ khác về giải pháp mà bạn có thể gặp phải và một kết quả khác mà tôi đã tìm thấy, tôi cũng đã thử mã bên dưới

html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: sans-serif;
  margin: 0;
  width: 100vw; 
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 110px;
}

footer {
  position: fixed;
}

Điều này thực sự hoạt động tốt trên các trình duyệt máy tính để bàn khác nhau, cuộn dựa trên động lượng vẫn hoạt động và chân trang được cố định ở dưới cùng và không di chuyển trên các trình duyệt web trên máy tính để bàn. Có lẽ phần có vấn đề nhất của giải pháp này (và điều làm cho nó trở nên độc đáo) là trên iOS Safari, phần chân trang luôn rung và biến dạng rất nhẹ và bạn có thể thấy nội dung bên dưới nó bất cứ khi nào bạn cuộn.

Giải pháp với JavaScript

Sau khi thử một số giải pháp ban đầu chỉ sử dụng HTML và CSS, tôi đã thử một số giải pháp JavaScript. Tôi muốn nói thêm rằng đây là điều mà tôi không khuyên bạn nên làm và tốt hơn là nên tránh làm. Theo kinh nghiệm của tôi, thường có các giải pháp ngắn gọn và thanh lịch hơn chỉ bằng HTML và CSS. Tuy nhiên, tôi đã dành rất nhiều thời gian để thử các giải pháp khác, tôi nghĩ rằng sẽ không hại gì nếu nhanh chóng xem liệu có một số giải pháp thay thế nào sử dụng JavaScript hay không

Sự kiện chạm

Một cách tiếp cận để giải quyết vấn đề cuộn bị nảy là ngăn chặn các sự kiện

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

Tôi đã thử nhiều biến thể của mã này để cố gắng làm cho cuộn hoạt động bình thường. Ngăn chặn

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: sans-serif;
  margin: 0;
  width: 100vw; 
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 110px;
}

footer {
  position: fixed;
}

html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: sans-serif;
  margin: 0;
  width: 100vw; 
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 110px;
}

footer {
  position: fixed;
}

html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: sans-serif;
  margin: 0;
  width: 100vw; 
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 110px;
}

footer {
  position: fixed;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

thư viện

Bạn có thể bắt gặp một thư viện có tên là “iNoBounce” được xây dựng để “ngăn ứng dụng web iOS của bạn nảy xung quanh khi cuộn. ” Một điều cần lưu ý khi sử dụng thư viện này ngay bây giờ để giải quyết vấn đề mà tôi đã mô tả trong bài viết này là nó cần bạn sử dụng

html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: sans-serif;
  margin: 0;
  width: 100vw; 
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 110px;
}

footer {
  position: fixed;
}

Hành vi ghi đè

Sau khi thử tất cả các giải pháp này, tôi phát hiện ra thuộc tính CSS

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

Tất cả những gì tôi phải làm là đặt

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

Phần kết luận

Nếu bạn không muốn đầu trang hoặc chân trang cố định của mình bị trả lại trên các trang web của mình, giờ đây bạn có thể sử dụng thuộc tính CSS

html {
  width: 100%;
  position: fixed;
  overflow: hidden;
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;
  position: fixed;
  overflow: hidden;
}

.body-container {
  width: 100vw;
  height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.color-picker-main-container {
  width: 100%;
  font-size: 22px;
  padding-bottom: 10px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 100px;
  width: 100%;
}

Mặc dù thực tế là giải pháp này hoạt động khác nhau trong các trình duyệt khác nhau (nội dung trang vẫn bị nảy trên Safari và Edge, trong khi trên Firefox và Chrome thì không), nó sẽ giữ cố định đầu trang hoặc chân trang khi bạn cuộn lên trên cùng . Đó là một giải pháp ngắn gọn và trên tất cả các trình duyệt đã thử nghiệm, tính năng cuộn dựa trên động lượng vẫn hoạt động, vì vậy bạn có thể cuộn qua rất nhiều nội dung trang một cách nhanh chóng. Nếu bạn đang tạo đầu trang hoặc chân trang cố định trên trang web của mình, bạn có thể bắt đầu sử dụng giải pháp này

Hành vi CSS Overscroll là gì?

Làm cách nào để ngăn CSS tràn?

Làm cách nào để loại bỏ tràn trong CSS?

tràn phong cách là gì?