Hành vi overscroll - Thủ thuật CSS

Các overscroll-behaviorbất động sản trong điều khiển CSS cho dù một phần tử sẽ sử dụng “cuộn chaining” hay không. Bạn có thể đã trải qua hành vi này trước đây và có lẽ đã cho rằng thao tác cuộn hoạt động như thế này trên web! Nếu bạn đang ở bên trong một phần tử có cuộn riêng (giả sử nó dọc) và bạn đã cuộn xuống cuối phần tử đó, thì theo mặc định, phần tử mẹ tiếp theo lên (có thể là chính trang) bắt đầu cuộn theo hướng đó. Nếu bạn không muốn mặc định đó, thì đó overscroll-behaviorlà thứ kiểm soát nó.

.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )

Xem
Hành vi cuộn tròn của Bút của Chris Coyier (@chriscoyier)
trên CodePen.

Thuộc tính xếp tầng (tức là được kế thừa), vì vậy nếu bạn không thích bất kỳ phần tử nào làm điều đó, bạn có thể áp dụng nó vào phần thân để ngăn nó xảy ra ở bất kỳ đâu:

body ( overscroll-behavior: contain; /* or "none" */ )

Các nonegiá trị có nghĩa vụ phải ngăn chặn affordance thanh cuộn , mà phương tiện đoán tốt nhất của tôi rằng những thứ như thế thứ dải cao su mà một số trình duyệt làm, đặc biệt là các thiết bị với touchpad cuộn.

Giá trị mặc định là auto.

Tài nguyên

Mô-đun hành vi cuộn ngược CSS cấp 1
Tin tức nền tảng web

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome	Firefox	I E	Cạnh	Safari
65	59	11	79	Không

Di động / Máy tính bảng

Chrome dành cho Android	Android Firefox	Android	iOS Safari
88	85	81	Không

bộ lọc phông nền
khả năng hiển thị mặt sau
lý lịch
nền-tệp đính kèm
background-blend-mode
nền-clip
màu nền
hình nền
nền-nguồn gốc
nền-vị trí
Bối cảnh Lặp lại
kích thước nền
chảy máu
khối-tràn
biên giới
biên giới
biên giới sụp đổ
hình ảnh biên giới
bán kính biên giới
khoảng cách giữa các đường viền
đáy
hộp-trang trí-phá vỡ
bóng hộp
đóng hộp
đột nhập

phụ đề
dấu mũ
dấu mũ
hình dấu mũ
thông thoáng
đường dẫn clip
màu sắc
điều chỉnh màu sắc
số cột
điền vào cột
cột-khoảng cách
quy tắc cột
cột-quy-tắc-màu
cột-quy tắc-kiểu
cột-quy tắc-chiều rộng
cột-nhịp
chiều rộng cột
cột
Lưu trữ
Nội dung
gia tăng đối số
Thiết lập lại bộ đếm
bộ phản
con trỏ

phương hướng
trưng bày

ô trống

lấp đầy
bộ lọc
uốn dẻo
cơ sở linh hoạt
hướng uốn
uốn cong
uốn cong
uốn cong
bọc uốn
Phao nổi
nét chữ
font-display
font-family
font-feature-settings
font-kerning
font-quang-định cỡ
cỡ chữ
phông chữ-kích thước-điều chỉnh
phông chữ kéo dài
kiểu phông chữ
tổng hợp phông chữ
font-variant
font-variant-numeric
font-weight

lỗ hổng
lưới-hàng / lưới-cột
lưới-mẫu-cột / lưới-mẫu-hàng

dấu chấm câu treo
Chiều cao
dấu gạch ngang

Tôi

kết xuất hình ảnh
Đầu thư
kích thước nội tuyến
lót
khối chèn
inset-block-end
inset-block-start
nội tuyến
inset-inline-end
inset-inline-start
sự cô lập

biện minh cho nội dung
biện minh-mục

trái
khoảng cách giữa các chữ cái
ngắt dòng
kẹp dây
chiều cao giữa các dòng
kiểu danh sách

lề
margin-block
margin-block-end
margin-block-start
margin-inline
margin-inline-end
margin-inline-start
kẹp mặt nạ
mặt nạ-hình ảnh
chế độ mặt nạ
mặt nạ-nguồn gốc
mặt nạ-vị trí
mặt nạ-lặp lại
kích thước mặt nạ
chiều cao tối đa
max-inline-size
chiều rộng tối đa
chiều cao tối thiểu
chiều rộng tối thiểu
chế độ pha trộn

đối tượng phù hợp
đối tượng-vị trí
bù đắp-neo
khoảng cách bù đắp
đường dẫn bù đắp
bù-xoay
sự mờ đục
đặt hàng
trẻ mồ côi
đề cương
phác thảo-bù đắp
tràn ra
neo tràn
bọc tràn
hành vi quá cuộn

đệm lót
ngắt trang
đơn hàng sơn
Góc nhìn cá nhân
quan điểm-nguồn gốc
địa điểm
sự kiện con trỏ
Chức vụ

dấu ngoặc kép

thay đổi kích thước
đúng
khoảng cách hàng

hành vi cuộn
lề cuộn
cuộn đệm
cuộn-snap-align
cuộn-snap-dừng
kiểu cuộn-snap
thanh cuộn
thanh cuộn-màu
thanh cuộn-máng xối
chiều rộng thanh cuộn
hình-ảnh-ngưỡng
lề hình
hình dạng bên ngoài
nói
Cú đánh
đột quỵ-dasharray
đột quỵ-dashoffset
nét vẽ
đột quỵ
Chiều rộng đột quỵ

kích thước tab
bố cục bảng
căn chỉnh văn bản
text-align-last
văn bản-kết hợp-ngay thẳng
trang trí văn bản
văn bản-trang trí-màu sắc
văn bản-trang trí-dòng
văn bản-trang trí-bỏ qua
văn bản-trang trí-bỏ qua-mực
văn bản-trang trí-phong cách
văn bản-trang trí-độ dày
thụt lề văn bản
text-justify
hướng văn bản
tràn văn bản
kết xuất văn bản
bóng văn bản
nét chữ
chuyển đổi văn bản
text-underline-offset
text-underline-position
trên / dưới / trái / phải
hành động chạm
biến đổi
biến đổi-nguồn gốc
biến đổi phong cách
chuyển tiếp
sự chậm trễ chuyển tiếp
thời gian chuyển tiếp
tài sản chuyển tiếp
chuyển tiếp-thời gian-chức năng

unicode-bidi
phạm vi unicode
người dùng chọn

căn chỉnh theo chiều dọc
hiển thị

khoảng trắng
góa phụ
chiều rộng
sẽ thay đổi
ngắt lời
khoảng cách từ
chế độ viết

chỉ số z
thu phóng

Bộ chọn

A
- :: trước / :: sau
- : hoạt động
- : bất kỳ liên kết
- Anh chị em ruột
- (thuộc tính)
B
- :chỗ trống
C
- :đã kiểm tra
- :hiện hành
- Đứa trẻ
- Lớp học
D
- :mặc định
- : dir ()
- :tàn tật
- Con cháu
E
- :trống
- : đã bật
F
- :: chữ cái đầu tiên
- ::dòng đầu tiên
- : con đầu lòng
- : loại đầu tiên
- :tiêu điểm
- : tiêu điểm-hiển thị
- : focus-trong
- :Tương lai
G
- Anh chị em chung
H
- :bay lượn
Tôi
- :trong phạm vi
- : không xác định
- :không hợp lệ
- :Là()
- TÔI
J
K
L
- : lang ()
- :con cuối cùng
- : loại cuối cùng
- : liên kết
M
- ::đánh dấu
- :diêm()
N
- :không phải()
- : nth-child
- : n-last-child
- : n-last-of-type
- : thứ n của loại
O
- :con một
- : only-of-type
- :không bắt buộc
- : ngoài phạm vi
P
- :: trình giữ chỗ
- :quá khứ
- : trình giữ chỗ được hiển thị
Q
R
- : read-write /: read-only
- :cần thiết
- :nguồn gốc
S
- :: lựa chọn
T
- :Mục tiêu
- Kiểu
U
- : người dùng-không hợp lệ
- phổ cập
V
- :có hiệu lực
- : đã thăm
W
X
Y
Z

Thạc sĩ Giao diện Người dùng Đối tác Học tập của chúng tôi

Cần đào tạo phát triển front-end?

Frontend Masters là nơi tốt nhất để có được nó. Họ có các khóa học về tất cả các công nghệ front-end quan trọng nhất, từ React đến CSS, từ Vue đến D3, và hơn thế nữa với Node.js và Full Stack.