Tôi có biểu mẫu được hiển thị trong cửa sổ bật lên. Sau khi tải, nền màu xám, nhưng người dùng vẫn có thể cuộn nội dung nền lên và xuống.Ngăn cuộn nền khi hiển thị cửa sổ bật lên
Làm cách nào để ngăn nền di chuyển?
của email quote này 'liên kết ở bên phải của màn hình pdf.
Cảm ơn! Joe
Một lựa chọn là để tạm thời thiết lập các overflow tài sản để hidden trên body, mà sẽ thoát khỏi cuộn thanh nhưng gây ra một nhấp nháy nhỏ khi trang được điều chỉnh.
Lựa chọn khác là nhấn vào sự kiện $(window).scroll() và trả về false từ đó. Điều đó cũng sẽ gây ra một chút nhấp nháy khi trình duyệt không phản ứng nhanh đến câu lệnh trả về sai.
Tốt nhất là để di chuyển xử lý sự kiện nhấp chuột vào một tập tin riêng biệt và làm ràng buộc có:
$(function() {
$('.emailPost').click(function() {
$(window).scroll(function() { return false; });
pageTracker._trackPageview('/onclick/emailquote');
});
});
Điều đó sẽ ngăn chặn một trang từ di chuyển. Hãy nhớ loại bỏ ràng buộc sau khi hộp thoại đóng, nếu không trang sẽ không thể cuộn được nữa! Bạn có thể loại bỏ với phím tắt sử dụng:
$(window).unbind('scroll');
Không sử dụng thẻ # trong liên kết của bạn!
Nó sẽ cố gắng cuộn đến cột # nhưng vì nó trống nên nó sẽ cuộn lên đầu trang.
Chỉnh sửa liên kết của bạn để:
<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>
(chú ý href = "")
Tuyệt đối sử dụng thẻ băm và không trong bất kỳ trường hợp nào sử dụng JavaScript nội tuyến. Để ngăn trình duyệt chuyển hướng đến #, bạn có thể sử dụng 'return false;' ở cuối hàm điều khiển. http://crisp.tweakblogs.net/blog/313/the-useless-javascript-pseudo-protocol.html –
Xin lỗi, Rogier, điều đó không giải quyết được vấn đề. Nó cũng làm cho nó để tải lại trang mà đóng cửa sổ bật lên. Cảm ơn mặc dù! – Joe
Vâng, bạn vẫn sẽ phải sử dụng return ofcourse false! Nhưng đó thực sự là JS cơ bản;) 'Email this quote' Sẽ hoạt động tốt. – YesMan85
ẩn thanh cuộn của cơ thể khi mở popup
document.body.style.overflow = "hidden";
và phục hồi trở lại khi đóng cửa sổ bật lên
document.body.style.overflow = "visible";
Gán tràn sẽ khiến thanh cuộn biến mất, do đó thay đổi độ rộng của trang. Điều này không vô hiệu thanh cuộn, mặc dù nó không ngăn việc di chuyển xảy ra. – Thomas
Tôi thích giải pháp này :) – jondinham
Giải pháp của bạn hoạt động nhưng khi bạn đóng cửa sổ bật lên và bật lại Nó cuộn nó cũng cho cuộn ngang. Đó là không cần thiết. –
công trình khối mã này cho IOS di động các thiết bị có vấn đề về cuộn rất phổ biến.
$('body').on('touchmove', function(e) {
if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();
});
$('body').on('shown.bs.modal', function() {
$(this).addClass('scroll-disable');
});
$('body').on('hidden.bs.modal', function() {
$(this).removeClass('scroll-disable');
});
Cảm ơn bạn. Nhưng giải pháp này có gây ra màn hình nhấp nháy không? Ngoài ra, pageTracker được chuyển qua một trường tùy chỉnh được thiết lập trong Wordpress và sẽ không dễ dàng để giao tiếp với jQuery. – Joe
không hoạt động trong safari 4 và firefox 3.5.7. – DataGreed
Tôi có cùng hoàn cảnh. Đây là một giải pháp tốt đẹp, vì nó khóa các cuộn trong FF24.0, nhưng nó vẫn cho phép trang để di chuyển bằng cách sử dụng kết thúc/home/pageup/pagedown; Ngoài ra, nó không xuất hiện để làm việc trong IE8. Tôi chưa thử nghiệm nó nhiều hơn hai trình duyệt đó, nhưng nhận xét trên dường như cho thấy rằng câu hỏi này cần một số công việc. – Thomas