Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <STYLE_PLACEHOLDER_2/> </head> <body> <h1>Thử hộp bên phải không có chuỗi cuộn quá mức theo hướng y</h1> <p>Đặt con trỏ chuột lên trên hộp màu hồng bên trái, cuộn xuống cuối hộp, tiếp tục cuộn và hành vi cuộn sẽ chuyển sang phần tử cha màu xanh lá cây. Điều này được gọi là chuỗi cuộn quá mức, khi việc cuộn quá mức trong một phần tử sẽ dẫn đến hành vi cuộn trong phần tử cha. Chuỗi cuộn là hành vi mặc định.</p> <p><strong>Lưu ý: </strong>Bạn có thể cần phải di chuyển con trỏ chuột một chút bên trong hộp màu hồng sau khi cuộn xuống để chuyển hành vi cuộn sang phần tử cha màu xanh lá cây. </p> <p>Bây giờ, hãy cuộn lên trên cùng một lần nữa, di chuyển con trỏ chuột đến hộp màu vàng ở bên phải, cuộn xuống cuối hộp, tiếp tục cuộn và bạn sẽ thấy rằng việc cuộn KHÔNG được chuyển sang phần gốc trong trường hợp này, vì giá trị thuộc tính overscroll-behavior-y 'contain' ngăn điều này xảy ra.</p> <div id="flex-container"> <div id="pinkDiv"> <h2>Với chuỗi cuộn quá mức</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hậu quả của Pellentesque leo eu odio feugiat luctus. Bạn sẽ phải đối mặt với điều đó, không phải là câu châm ngôn. Vivamus ngồi amet volutpat metus. Nunc tempus, mi ut vehicula porttitor, velit lacus sagittis lorem, sit amet venenatis mauris nibh sit amet urna. Nam nibh mi, commodo id diam eu, congue suscipit ninc. Tiền đình xơ cứng doi tempus tincidunt luctus. Donec placerat quis neque vel ultrices. Pellentesque dignissim placerat orci sed cursus. Ut convallis leo sapien, vitae ornare nulla sodales at. Đình chỉ thời gian tiền đình. Sed ut fermentum tortor. Số nguyên quis Tellus eget nisi pharetra pharetra non vitae magna. Cras ultricies, nulla id imperdiet varius, nisi odio finibus diam, at finibus lacus risus vel dui. Ut euismod consequat libero eu pharetra.</p> </div> <div id=" yellowDiv"> <h2>Không có chuỗi cuộn quá mức</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hậu quả của Pellentesque leo eu odio feugiat luctus. Bạn sẽ phải đối mặt với điều đó, không phải là câu châm ngôn. Vivamus ngồi amet volutpat metus. Nunc tempus, mi ut vehicula porttitor, velit lacus sagittis lorem, sit amet venenatis mauris nibh sit amet urna. Nam nibh mi, commodo id diam eu, congue suscipit ninc. Tiền đình xơ cứng doi tempus tincidunt luctus. Donec placerat quis neque vel ultrices. Pellentesque dignissim placerat orci sed cursus. Ut convallis leo sapien, vitae ornare nulla sodales at. Đình chỉ thời gian tiền đình. Sed ut fermentum tortor. Số nguyên quis Tellus eget nisi pharetra pharetra non vitae magna. Cras ultricies, nulla id imperdiet varius, nisi odio finibus diam, at finibus lacus risus vel dui. Ut euismod consequat libero eu pharetra.</p> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hậu quả của Pellentesque leo eu odio feugiat luctus. Bạn sẽ phải đối mặt với điều đó, không phải là câu châm ngôn. Vivamus ngồi amet volutpat metus. Nunc tempus, mi ut vehicula porttitor, velit lacus sagittis lorem, sit amet venenatis mauris nibh sit amet urna. Nam nibh mi, commodo id diam eu, congue suscipit ninc. Tiền đình xơ cứng doi tempus tincidunt luctus. Donec placerat quis neque vel ultrices. Pellentesque dignissim placerat orci sed cursus. Ut convallis leo sapien, vitae ornare nulla sodales at. Đình chỉ thời gian tiền đình. Sed ut fermentum tortor. Số nguyên quis Tellus eget nisi pharetra pharetra non vitae magna. Cras ultricies, nulla id imperdiet varius, nisi odio finibus diam, at finibus lacus risus vel dui. Ut euismod consequat libero eu pharetra.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hậu quả của Pellentesque leo eu odio feugiat luctus. Bạn sẽ phải đối mặt với điều đó, không phải là câu châm ngôn. Vivamus ngồi amet volutpat metus. Nunc tempus, mi ut vehicula porttitor, velit lacus sagittis lorem, sit amet venenatis mauris nibh sit amet urna. Nam nibh mi, commodo id diam eu, congue suscipit ninc. Tiền đình xơ cứng doi tempus tincidunt luctus. Donec placerat quis neque vel ultrices. Pellentesque dignissim placerat orci sed cursus. Ut convallis leo sapien, vitae ornare nulla sodales at. Đình chỉ thời gian tiền đình. Sed ut fermentum tortor. Số nguyên quis Tellus eget nisi pharetra pharetra non vitae magna. Cras ultricies, nulla id imperdiet varius, nisi odio finibus diam, at finibus lacus risus vel dui. Ut euismod consequat libero eu pharetra.</p> </div> </body> </html>