Nếu bạn đang sử dụng một thiết bị smartphone chạy hệ điều hành android chắc các bạn cũng biết khi truy bạn cập một trang web nào đó bằng trình duyệt chrome mobile thì đa số thanh địa chỉ trình duyệt sẽ tự động ẩn auto hide khi bạn cuộn trang xuống. Vậy làm thế nào để ngăn thanh địa chỉ không tự động ẩn nữa hay cố định đầu trang? Code tham khảo dưới đây đang áp dụng cho trang web của mình có thể làm được điều đó.
Đầu tiên để tìm các hướng dẫn chặn thanh địa chỉ trình duyệt chrome trên mobile tự đổng ẩn các bạn tìm kiếm bằng từ khóa prevent autohide of address bar on mobile browsers sẽ có một số bài viết hướng dẫn dạng này trong đó có sử dụng css, jquery và javascript. Mình đã thử áp dụng từng phương pháp cuối cùng mình nhận thấy chỉ có sử dụng css và thay đổi bố cục html của trang mới ngăn được thanh địa chỉ tự động ẩn.
Một điều mình khá chắc chắn rằng nếu bạn để thanh cuộn bên phải toàn màn hình bạn không thể ngăn thanh địa chỉ auto hide được mà cần đến một element cố định đầu trang như trang web của mình sử dụng phần tử header thanh menu cố định đầu trang sau đó đặt tất cả các phân tử bên dưới thanh menu trong một element và sẽ tạo thanh cuộn cho element này và làm như vậy mới ngăn được thanh cuộn không auto hide nữa.
Lấy ví dụ lúc đầu bố cục html của trang mình có dạng
<html>
<body>
<header class="header" id="header">...</header>
<main class="main-container" id="main">...</main>
<footer class="footer" id="footer">...</footer>
</body>
</html>
Khi thiết kế css cho giao diện mình đặt thanh cuộn cho phần tử body
body {
overflow-x: hidden;
overflow-y: auto;
}
Lúc đó mình cũng đặt thanh menu cố định đầu trang
.header {
background: #fff;
position: fixed;
z-index: 9;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 50px;
top: 0;
left: 0;
right: 0;
}
=> Kết quả: thanh địa chỉ trình duyệt chrome trên mobile tự đổng ẩn khi cuộn trang. Và để ngăn thanh địa chỉ không auto hide nữa mình sẽ thay đổi bố cục html và sửa lại css như sau:
<html>;
<body>
<header class="header" id="header">...</header>
<div class="page-content">
<div>
<main class="main-container" id="main">...</main>
<footer class="footer" id="footer">...</footer>
</div>
</div>
</body>
</html>
Mình sửa lại css thành
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
.page-content {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 50px;
overflow: hidden;
z-index: 1;
display: flex;
flex-direction: column;
}
.page-content>div {
flex: 1 1 auto;
overflow: auto;
position: relative;
padding-top: 15px;
}
=> Kết quả: Thanh địa chỉ trình duyệt chrome trên mobile không tự đổng ẩn khi cuộn trang nữa.
Lưu ý khi sử dụng phương pháp này:
Các đoạn script liên quan đến scroll đã có trước đây bị mất tác dụng vì không còn sử dụng window scroll nữa mà thành element scroll, chẳng hạn với đoạn script
$(window).scroll(function(){
})
Phải thay thành
$('element').scroll(function(){
})
Ví dụ
$('.page-content>div').scroll(function(){
})
Kết luận
Các bạn nếu không biết về code chỉ nên đọc tham khảo vì nếu thay đổi bố cục html sẽ làm xáo trộn nhiều thứ liên quan đặc biệt nếu code không đúng có thể bố cục sẽ bị vỡ, nói chung cũng không đơn giản chỉ nên thử nếu bạn có am hiểu về code css, html và script
