Lập trình web

Cách sử dụng scroll ngang với thuộc tính display:table-cell

Chia sẻ nhanh

Với cách hiển thị layout ngang đối với tôi là rất thú vị, tuy lý do không thể giải thích rõ ràng là tại sao nhưng có lẽ đó là một cái gì mới khi chúng ta đã quá quen với layout được hiển thị theo chiều dọc.

Tuy nhiên với sự phát triển của các smartphone và máy tính bảng như hiện nay, nó trở lên khó khăn cho việc khẳng định rằng "lên và xuống" là sự lựa chọn tốt nhất cho cách hiển thị nội dung. "Trái và phải" đã trở thành một hướng hiển thị tốt miễn là bạn có cách xử lý tốt các nội dung bạn muốn trình bày. Khi sự lựa chọn tăng lên thì các ý tưởng mới sẽ được phát triển cùng với nó.


Tôi thực sự không bao giờ thấy phiền phức khi sử dụng một layout ngang mặc dù các vấn đề kỹ thuật là hạn chế và bất lợi cho kiểu layout này. Nhưng đó là trước kia, và đây là bây giờ...

Khi sử dụng các technique trong bài viết này, tôi có một ý tưởng (bạn có thể cười): Bằng cách nào đó có thể tạo ra một "CSS grid framework" dựa trên kiểu hiển thị: table-cell.
Công việc khá đơn giản khi ta chỉ cần đặt các thành phần đơn lẻ sắp xếp theo chiều ngang, mặc dù với cách hiển thị này chúng ta chưa quen về phương diện góc nhìn lẫn sử dụng.
Nhưng có một ý tưởng là khi ta bố trí các layout theo chiều ngang nhưng bên trong nó các thành phần div vẫn có thể được scroll theo chiều dọc và các khối ngang được trải đều hiển thị như các Thumbnails.

Chúng ta hãy cùng bắt đầu
Nếu bạn không có hứng thú với technique này, đây là phần demo cho cách layout hiển thị.

<div>
<div>
<section>
<h1>Full-Screen Horizontal Layouts</h1>
<p>Made with <code>display: table-cell;</code></p>
<p>By Ezequiel Bruni</p>
</section>
<!-- Repeat this part as necessary. -->
</div>
</div>

CSS:

html, body {
width: 100%;
height: 100%;
overflow: hidden;
}

// Trong trường hợp này, tôi không mouốn scrollbar, vậy sử dụng overflow: hidden.
div.horizontal {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
position: static;
}

.table {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}

.table > section {
width: 1600px; // Thay đổi thuộc tính cho phù hợp với layout của bạn, nó sẽ thay thế bằng jQuery. Tỉ lệ độ rộng tính theo phần trăm sẽ không sử dụng được trong trường hợp này
height: 100%;
display: table-cell;
background: #e3e3e3;
vertical-align: middle;
text-align: center;
}

Như đã nói ở trên, jQuery thay thế cho thuộc tính width bắt buộc:

$(window).load(function() {
var vWidth = $(window).width();
var vHeight = $(window).height();
$('.table > section').css('width', vWidth).css('height', vHeight);
});

$(window).resize(function() {
var vWidth = $(window).width();
var vHeight = $(window).height();
$('.table > section').css('width', vWidth).css('height', vHeight);
});

Các bạn có thể thấy tôi đã sử dụng thêm thuộc tính cho chiều cao ở trên, đó là cho FireFox. FireFox không xử lý tốt với chiều cao tỷ lệ phần trăm trên các phần tử table-cell. Các bạn có thể download source code tại đây

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?