Cuộn giới hạn cho một Hình ảnh

Tôi đang phát triển trang web trên thiết bị di động và hình ảnh toàn màn hình sẽ xuất hiện dưới dạng lớp nổi khi trang web được tải.Cuộn giới hạn cho một Hình ảnh

Xin xem dưới đây ........ enter image description here

A: trang web di động của tôi chứa rất nhiều nội dung mà vượt quá chiều cao cửa sổ

B: Sau khi trang nạp, toàn màn hình hình ảnh xuất hiện dưới dạng lớp nổi ở đầu nội dung. Hình ảnh vượt quá chiều cao cửa sổ

C: Khi người dùng cuộn xuống, anh có thể thấy phần dưới của hình ảnh, nhưng không thể xem nội dung trang web. Phần dưới cùng của hình ảnh sẽ không bao giờ tách ra khỏi đáy màn hình bất kể người dùng cố gắng cuộn xuống

Tôi có thể biết cách tôi có thể đạt được C không ??

Ngoài ra, trong trường hợp B, đôi khi hình ảnh không được vượt quá chiều cao màn hình nếu người dùng đang sử dụng điện thoại thông minh có màn hình lớn, trong trường hợp này, hình ảnh phải được cố định ở đầu màn hình và không thể cuộn được.

Sẽ tốt hơn nếu tất cả những điều trên có thể đạt được bằng cách KHÔNG sử dụng jquery. Tuy nhiên, nếu nó là phải, thì nó vẫn là ok ........

Rất cám ơn.

Nguồn

2013-10-12 Kit Ng

+1 cho ví dụ vẽ tay –

jQuery là JavaScript. Bạn luôn có thể sử dụng JavaScript thuần túy thay vì jQuery. – ComFreek

Mặc dù hiệu ứng chung chỉ có thể thực hiện được với CSS, bạn có thể cần javascript để bật và tắt hiệu ứng.

Ý tưởng chung là sử dụng position: fixed và overflow: scroll trên một lớp chứa hình ảnh, trong khi body có overflow: hidden. Trong những điều kiện này, bạn có thể cuộn nội dung của lớp phủ chứ không phải nội dung.

Trong khi tính năng này hoạt động trên máy tính để bàn, mọi thứ có một chút khác biệt trên thiết bị di động nơi tất cả nội dung sẽ được hiển thị mặc dù overflow: hidden trên body. Cách nhanh chóng là áp dụng position: fixed vào số body. Tôi không biết đây có phải là hành vi dự định hay không nhưng nó hoạt động tốt trong cả Safari và Chrome trên iOS.

Markup phác thảo:

<body class="no-scroll"> 
    <section class="content"> 
    /* content here */ 
    </section> 

    <aside class="overlay"> 
    <img src="img.jpg"> 
    </aside> 
</body>

CSS:

.no-scroll { 
    overflow: hidden; 
    position: fixed; 
} 

.overlay { 
    overflow-y: scroll; 
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0; 
    display: none; 
} 

.overlay img { 
    width: 100%; 
    height: auto; 
} 

.no-scroll .overlay { 
    display: block; 
}

Với điều này bạn có thể sử dụng javascript để chuyển lớp no-scroll trên body. Khi nó ở đó, nội dung tràn sẽ bị ẩn và overlay hiển thị. Khi không có ở đó, overlay bị ẩn.

Dưới đây là ví dụ về hiệu ứng (không có.không cuộn lớp và javascript, tuy nhiên, chỉ để chứng minh rằng nó hoạt động):

Edit:

Trong ví dụ trên, tôi đã overlay nền nửa trong suốt và cho hình ảnh bên trong một nền là max-width của 100%. Nếu bạn muốn toàn bộ màn hình được lấp đầy với hình ảnh, hãy thay đổi số max-width thành số width thông thường.

Chỉnh sửa 2:

Theo yêu cầu, đây là một chức năng jQuery để chuyển đổi hiệu ứng.

$(".close").click(function() { 
    $("body").toggleClass("no-scroll"); 
});

Chỉ cần cho một <button> hoặc bất cứ tên lớp close và nó sẽ chuyển đổi các hiệu ứng và tắt.

Nguồn

2013-10-13 12:15:38

Câu trả lời này thật tuyệt vời! Cảm ơn bạn rất nhiều = D –

Chỉ cần một câu hỏi bổ sung: nó sẽ có thể có tài sản cơ thể tiếp tục bình thường (loại bỏ tràn: ẩn và vị trí: cố định) khi người dùng đóng lớp hình ảnh? –

Có. Như tôi đã viết trong câu trả lời của tôi, có thể bạn sẽ cần phải sử dụng javascript. Vì bạn đã nói về jQuery, tôi sẽ đưa ra một ví dụ sử dụng nó. Xem cập nhật của tôi sau một phút. –

Cuộn giới hạn cho một Hình ảnh

Trả lời

Các vấn đề liên quan