Vấn đề của tôi là thanh cuộn dọc của cửa sổ trình duyệt bị xóa theo ví dụ overflow:hidden; sẽ làm cho trang nhảy, khi nó xuất hiện lại sau. Tôi sử dụng jQuery để loại bỏ các tùy chọn cuộn từ khách truy cập, trong khi một kịch bản đang chạy và cuộn trang để một điểm cụ thể, và sau đó để làm cho nó xuất hiện trở lại một lần nữa sau:Cách tạo trình giữ chỗ trên thanh cuộn
www.nebulafilm.dk/index.html?content
Tôi có thể làm cho một giữ chỗ cho thanh cuộn, khi nó không hiện diện, vì vậy nó sẽ không nhảy trở lại?
Hoặc có thể "vô hiệu hóa" và làm cho nó "chuyển thành màu xám" không?
Tôi không thể tìm thấy bất kỳ giải pháp nào bằng cách tìm kiếm. Tôi đã tìm thấy một cái gì đó tương tự ở đây: stackoverflow.com nơi thanh cuộn luôn ở đó. Nhưng sự khác biệt là thanh cuộn phải được giữ nguyên, ngay cả khi trang dài hơn cửa sổ. Nó chỉ phải được "bật" một lần nữa thông qua một kịch bản khác mà tôi kiểm soát.
Điều này có theo bất kỳ cách nào có thể không?
Cảm ơn.
Cập nhật:
Thời gian cập nhật trạng thái.
Tôi đã gặp một số vấn đề với hình nền đám mây sao, được đặt trên thẻ body.
Khi tập lệnh jQuery (từ câu trả lời cwolves) thêm phần đệm vào thẻ html và do đó sẽ đẩy tất cả các phần tử trên trang sang bên trái, hình nền vẫn không hoạt động đúng.
Vâng, tôi phát hiện ra rằng phần tử body không phản ứng như bất kỳ phần tử div nào. Nó không chỉ là một "khối" bên trong thẻ html giống như bất kỳ phần tử khối nào khác. Nó có hành vi riêng của nó và dường như không thể bị lừa theo cùng một cách. Do đó, hình nền không thể chạm được, trong khi đó là trên body.
Nhưng phải mất một thời gian để tôi nhận ra ...
Giải pháp cuối cùng cho điều này là quá đơn giản mà tôi gần như rơi nước mắt khi tìm ra, suy nghĩ về vô tận (tôi có thể phóng đại một chút) giờ điều tra số body.
Tôi chỉ đơn giản là bọc mọi thứ trong một <div id="body"> và đã cho hình nền này thay thế. Đột nhiên tất cả mọi thứ rơi vào vị trí.
Từ:
<body>
...
</body>
Và
body {background-image: url(...);}
Để:
<body>
<div id="body">
...
</div>
</body>
Và:
#body {background-image: url(...);}
Một d một chút khôn ngoan hơn về body.
Không còn "nhảy" nữa. Thơm ngon.
Hiệu ứng hiện đang chạy hoàn toàn và bạn hầu như không nhận thấy thay đổi với thanh cuộn và mọi chi tiết đều phù hợp. kịch bản Cwolve là hoàn hảo và làm việc tính toán chính xác:
function getScrollBarWidth(){
var div = $('<div><div>' + new Array(100).join('content<br />') + '</div></div>'),
div2 = div.find('div'),
body = $(document.body);
div.css({ overflow : 'hidden', width: 100, height: 100, position : 'absolute', left : -1000, top : -1000 });
body.append(div);
var width1 = div2.width();
div.css({ overflow : 'auto' });
var width2 = div2.width();
div.remove();
return width1 - width2;
}
Các getScrollBarWidth() sẽ chứa chính xác độ rộng của thanh cuộn không thành vấn đề trình duyệt, và tôi có thể sử dụng nó để thêm và loại bỏ miếng đệm không như tôi muốn:
var sWidth = getScrollBarWidth();
$("body").css({'overflow': 'hidden'});
$("html").css({'padding-right': sWidth});
$('html, body').delay(1000).animate({
scrollTop: $(hash).offset().top - 170
}, 2000, 'swing', function(){
$("body").css({'overflow': 'auto'});
$("html").css({'padding-right': 0});
});
Cảm ơn rất nhiều. Đây là một điều tốt đẹp.
Vâng, đó là một giải pháp, nếu không có thao tác thanh cuộn trực tiếp nào là có thể. Nhưng nó sẽ phụ thuộc vào trình duyệt và là một công việc mất thời gian. – Steeven
Làm thế nào là mất thời gian? Tôi đã cho bạn một bản demo để tính toán chiều rộng thanh cuộn :) Việc thực hiện thực tế đòi hỏi bạn phải thêm hàm tôi đã tạo và 3 dòng mã, cũng nằm trong bản trình diễn (chỉ thay đổi bộ chọn). –
Vâng, bạn sẽ phải tìm chiều rộng thanh cuộn chính xác cho từng loại trình duyệt và thực hiện một số loại kiểm tra trình duyệt. Và nó vẫn không phải là một giải pháp an toàn. Nhưng nó là một phần của con đường, và một giải pháp có thể, vì vậy cảm ơn cho câu trả lời. – Steeven