ฉันต้องการให้ร่างกายหยุดเลื่อนเมื่อใช้เมาส์วีลในขณะที่ Modal (จากhttp://twitter.github.com/bootstrap ) บนเว็บไซต์ของฉันเปิดขึ้น
ฉันพยายามโทรหาจาวาสคริปต์ด้านล่างเมื่อเปิดใช้งานโมดอล แต่ไม่สำเร็จ
$(window).scroll(function() { return false; });และ
$(window).live('scroll', function() { return false; });โปรดทราบว่าเว็บไซต์ของเราลดการสนับสนุนสำหรับ IE6, IE7 + ต้องเข้ากันได้
คำตอบ:
Bootstrap modalจะเพิ่มคลาสmodal-openให้กับเนื้อความโดยอัตโนมัติเมื่อมีการแสดงไดอะล็อก modal และลบออกเมื่อซ่อนกล่องโต้ตอบ คุณสามารถเพิ่มสิ่งต่อไปนี้ใน CSS ของคุณ:
body.modal-open {
overflow: hidden;
}คุณสามารถยืนยันว่ารหัสข้างต้นเป็นของรหัสฐาน Bootstrap CSS แต่นี่เป็นการแก้ไขที่ง่ายในการเพิ่มลงในเว็บไซต์ของคุณ
อัปเดตเมื่อวันที่ 8 กุมภาพันธ์ 2013
สิ่งนี้ได้หยุดทำงานใน Twitter Bootstrap v. 2.3.0 - พวกเขาไม่ได้เพิ่มmodal-openคลาสให้กับร่างกายอีกต่อไป
วิธีแก้ปัญหาคือการเพิ่มคลาสลงในเนื้อความเมื่อคำกริยากำลังจะถูกแสดงและลบออกเมื่อปิดคำกริยา:
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});อัปเดต 11 มีนาคม 2013
ดูเหมือนว่าmodal-openคลาสจะกลับมาใน Bootstrap 3.0 อย่างชัดเจนเพื่อวัตถุประสงค์ในการป้องกันการเลื่อน:
แนะนำ. modal-open บนตัวเครื่อง (เพื่อให้เราสามารถทำการเลื่อนได้)
ดูสิ่งนี้: https://github.com/twitter/bootstrap/pull/6342 - ดูที่หัวข้อModal
modal-openประสงค์จะกลับมาใน Bootstrap 3 ดังนั้นเมื่อเปิดตัวมันควรจะปลอดภัยที่จะลบรหัสข้างต้น
คำตอบที่ยอมรับไม่สามารถใช้งานบนมือถือได้ (อย่างน้อย 7 iOS และ iOS 7 อย่างน้อย) และฉันไม่ต้องการให้ MOAR JavaScript ทำงานบนเว็บไซต์ของฉันเมื่อ CSS จะทำ
CSS นี้จะป้องกันไม่ให้หน้าพื้นหลังเลื่อนภายใต้คำกริยา:
body.modal-open {
overflow: hidden;
position: fixed;
}อย่างไรก็ตามก็มีผลกระทบด้านข้างเล็กน้อยจากการเลื่อนไปด้านบนเป็นหลัก position:absoluteแก้ไขสิ่งนี้ แต่แนะนำความสามารถในการเลื่อนบนมือถืออีกครั้ง
ถ้าคุณรู้ว่าวิวพอร์ต ( ปลั๊กอินของฉันสำหรับการเพิ่มวิวพอร์ตไป<body> ) คุณก็สามารถเพิ่มสลับ CSS positionสำหรับ
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}ฉันยังเพิ่มสิ่งนี้เพื่อป้องกันไม่ให้หน้าต้นแบบกระโดดไปทางซ้าย / ขวาเมื่อแสดง / ซ่อน modals
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}position: fixedร่างกาย
เพียงซ่อนร่างกายส่วนเกินและทำให้ร่างกายไม่ได้เลื่อน เมื่อคุณซ่อนโมดัลให้เปลี่ยนกลับเป็นอัตโนมัติ
นี่คือรหัส:
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})คุณสามารถลองตั้งค่าขนาดตัวถังให้เป็นขนาดหน้าต่างที่มีการล้นได้: ซ่อนไว้เมื่อ modal เปิดอยู่
คุณต้องทำมากกว่าคำตอบของ @ charlietfl และบัญชีสำหรับแถบเลื่อนมิฉะนั้นคุณอาจเห็นเอกสาร reflow
bodyความกว้างbodyโอเวอร์โฟลว์เป็นhiddenตั้งค่าความกว้างของร่างกายอย่างชัดเจนเป็นสิ่งที่อยู่ในขั้นตอนที่ 1
var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);bodyโอเวอร์โฟลว์เป็นautoตั้งค่าbodyความกว้างเป็นauto
var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");แรงบันดาลใจจาก: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
$body.css("overflow", "auto");อยู่ในขั้นตอนสุดท้าย :)
คำเตือน:ตัวเลือกด้านล่างไม่เกี่ยวข้องกับ Bootstrap v3.0.x เนื่องจากการเลื่อนในเวอร์ชันเหล่านั้นได้รับการ จำกัด ไว้อย่างชัดเจนกับตัวช่วย หากคุณปิดใช้งานเหตุการณ์ล้อคุณอาจป้องกันไม่ให้ผู้ใช้บางคนดูเนื้อหาในรูปแบบที่มีความสูงมากกว่าความสูงวิวพอร์ต
เลื่อนเหตุการณ์ไม่เลิก แต่มันเป็นไปได้ที่จะยกเลิกเมาส์วีลและล้อเหตุการณ์ ข้อแม้ที่ยิ่งใหญ่คือเบราว์เซอร์ดั้งเดิมบางรุ่นไม่รองรับ Mozilla เท่านั้นที่เพิ่งเพิ่มการสนับสนุนสำหรับ Gecko 17.0 ในภายหลัง ฉันไม่ทราบว่ามีการแพร่กระจายเต็มรูปแบบ แต่ IE6 + และ Chrome สนับสนุนพวกเขา
นี่คือวิธีการใช้ประโยชน์:
$('#myModal')
.on('shown', function () {
$('body').on('wheel.modal mousewheel.modal', function () {
return false;
});
})
.on('hidden', function () {
$('body').off('wheel.modal mousewheel.modal');
});overflow:hiddenจะดีกว่าในตอนนี้
/* =============================
* Disable / Enable Page Scroll
* when Bootstrap Modals are
* shown / hidden
* ============================= */
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function theMouseWheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = theMouseWheel;
}
function enable_scroll() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = null;
}
$(function () {
// disable page scrolling when modal is shown
$(".modal").on('show', function () { disable_scroll(); });
// enable page scrolling when modal is hidden
$(".modal").on('hide', function () { enable_scroll(); });
});ไม่สามารถทำให้ Chrome ทำงานได้โดยเพียงแค่เปลี่ยน CSS เพราะฉันไม่ต้องการให้หน้าเลื่อนกลับไปด้านบน สิ่งนี้ทำงานได้ดี:
$("#myModal").on("show.bs.modal", function () {
var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});ลองอันนี้:
.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
height: 100%;
}มันใช้งานได้สำหรับฉัน (รองรับ IE8)
position: fixedแต่ยังทำให้คุณสามารถข้ามไปด้านบนเมื่อคุณเปิดกิริยาเมื่อใช้
สำหรับเงินทุนที่คุณอาจลองนี้ (ที่ทำงานเกี่ยวกับ
Firefox,ChromeและMicrosoft Edge):
body.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
}หวังว่านี่จะช่วย ...
การเพิ่มคลาส 'is-modal-open' หรือการแก้ไขสไตล์ของแท็ก body ด้วย javascript นั้นไม่เป็นไรและมันจะทำงานได้ตามที่ควรจะเป็น แต่ปัญหาที่เราจะเผชิญคือเมื่อร่างกายล้น: ซ่อนไว้มันจะกระโดดขึ้นไปด้านบน (scrollTop จะกลายเป็น 0) นี่จะกลายเป็นปัญหาการใช้งานในภายหลัง
ในฐานะที่เป็นทางออกสำหรับปัญหานี้แทนที่จะเปลี่ยนแท็กเนื้อหาล้น: ซ่อนไว้เปลี่ยนในแท็ก html
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});ฉันไม่แน่ใจเกี่ยวกับรหัสนี้ แต่มันก็คุ้มค่ากับการยิง
ใน jQuery:
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});อย่างที่ฉันพูดไปก่อนหน้านี้ฉันไม่แน่ใจ 100% แต่ลองต่อไป
เมื่อวันที่พฤศจิกายน 2560 Chrome เปิดตัวคุณสมบัติ CSS ใหม่
overscroll-behavior: contain;
ซึ่งแก้ปัญหานี้ได้แม้ในขณะที่เขียนมีการสนับสนุนข้ามเบราว์เซอร์ จำกัด
ดูลิงค์ด้านล่างสำหรับรายละเอียดทั้งหมดและการสนับสนุนเบราว์เซอร์
ทางออกที่ดีที่สุดคือโซลูชัน css-only ที่body{overflow:hidden}ใช้โดยคำตอบส่วนใหญ่ คำตอบบางคำเสนอการแก้ไขที่ป้องกัน "กระโดด" ที่เกิดจากแถบเลื่อนที่หายไป; อย่างไรก็ตามไม่มีใครสง่างามเกินไป ดังนั้นฉันจึงเขียนฟังก์ชันทั้งสองนี้และดูเหมือนว่าจะทำงานได้ดี
var $body = $(window.document.body);
function bodyFreezeScroll() {
var bodyWidth = $body.innerWidth();
$body.css('overflow', 'hidden');
$body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth))
}
function bodyUnfreezeScroll() {
var bodyWidth = $body.innerWidth();
$body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth()))
$body.css('overflow', 'auto');
}ตรวจสอบjsFiddle นี้เพื่อดูว่ามีการใช้งานอยู่
open modalความกว้างของปุ่ม Chrome เมื่อวันที่ 8
หลายคนแนะนำ "ล้น: ซ่อน" ในร่างกายซึ่งจะไม่ทำงาน (ไม่ใช่ในกรณีของฉันอย่างน้อย) เนื่องจากจะทำให้เว็บไซต์เลื่อนไปด้านบน
นี่เป็นวิธีแก้ปัญหาที่เหมาะกับฉัน (ทั้งบนโทรศัพท์มือถือและคอมพิวเตอร์) โดยใช้ jQuery:
$('.yourModalDiv').bind('mouseenter touchstart', function(e) {
var current = $(window).scrollTop();
$(window).scroll(function(event) {
$(window).scrollTop(current);
});
});
$('.yourModalDiv').bind('mouseleave touchend', function(e) {
$(window).off('scroll');
});สิ่งนี้จะทำให้การเลื่อนของ modal ทำงานและป้องกันไม่ให้เว็บไซต์เลื่อนในเวลาเดียวกัน
คุณสามารถใช้ตรรกะต่อไปนี้ฉันทดสอบและใช้งานได้ (แม้ใน IE)
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$(function(){
$('#locker').click(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
})
$('#unlocker').click(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll');
})
})
</script>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>ฉันไม่แน่ใจ 100% นี้จะทำงานร่วมกับเงินทุน แต่มูลค่าลอง - มันทำงานร่วมกับ Remodal.js ซึ่งสามารถพบได้บน GitHub: http://vodkabears.github.io/remodal/และมันจะทำให้ความรู้สึกของวิธีการ จะค่อนข้างคล้ายกัน
หากต้องการหยุดการข้ามหน้าไปยังด้านบนและยังป้องกันการเปลี่ยนเนื้อหาที่ถูกต้องให้เพิ่มคลาสbodyเมื่อโมเดอเรเตอร์เริ่มต้นและตั้งกฎ CSS เหล่านี้:
body.with-modal {
position: static;
height: auto;
overflow-y: hidden;
}มันเป็นposition:staticและheight:autoที่รวมกันเพื่อหยุดการกระโดดของเนื้อหาไปทางด้านขวา overflow-y:hidden;หยุดหน้าจากการถูกเลื่อนเบื้องหลังกิริยา
อิงตามซอนี้: http://jsfiddle.net/dh834zgw/1/
ตัวอย่างต่อไปนี้ (โดยใช้ jquery) จะปิดการใช้งานการเลื่อนหน้าต่าง:
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');และใน CSS ของคุณ:
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}ตอนนี้เมื่อคุณลบโมดอลอย่าลืมลบคลาส noscroll บนแท็ก html:
$('html').toggleClass('noscroll');overflowตั้งค่าเป็นhidden? +1 แม้ว่านี่จะเป็นผลสำหรับฉัน (โดยใช้hidden)
ฉันมีแถบด้านข้างที่สร้างจากการแฮ็คกล่องกาเครื่องหมาย แต่แนวคิดหลักคือการบันทึกเอกสาร scrollTop และไม่เปลี่ยนระหว่างการเลื่อนหน้าต่าง
ฉันไม่ชอบหน้ากระโดดเมื่อร่างกายกลายเป็น 'ล้น: ซ่อนเร้น'
window.addEventListener('load', function() {
let prevScrollTop = 0;
let isSidebarVisible = false;
document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => {
prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
isSidebarVisible = event.target.checked;
window.addEventListener('scroll', (event) => {
if (isSidebarVisible) {
window.scrollTo(0, prevScrollTop);
}
});
})
});น่าเศร้าที่ไม่มีคำตอบข้างต้นแก้ไขปัญหาของฉัน
ในสถานการณ์ของฉันหน้าเว็บเดิมมีแถบเลื่อน เมื่อใดก็ตามที่ฉันคลิกโมดัลแถบเลื่อนจะไม่หายไปและส่วนหัวจะเลื่อนไปทางขวาเล็กน้อย
จากนั้นฉันพยายามเพิ่ม.modal-open{overflow:auto;}(ซึ่งคนส่วนใหญ่แนะนำ) แน่นอนมันแก้ไขปัญหา: แถบเลื่อนปรากฏขึ้นหลังจากที่ฉันเปิดคำกริยา อย่างไรก็ตามผลข้างเคียงอื่นออกมาซึ่งก็คือ "พื้นหลังด้านล่างส่วนหัวจะย้ายไปทางซ้ายเล็กน้อยพร้อมกับอีกแถบยาวด้านหลังเป็นกิริยาช่วย"
โชคดีหลังจากที่ฉันเพิ่ม{padding-right: 0 !important;}ทุกอย่างได้รับการแก้ไขอย่างสมบูรณ์แบบ ทั้งพื้นหลังส่วนหัวและลำตัวไม่เคลื่อนไหวและโมดัลยังคงใช้แถบเลื่อน
หวังว่าสิ่งนี้จะช่วยให้ผู้ที่ยังคงติดอยู่กับปัญหานี้ โชคดี!
ชิ้นส่วนใหญ่อยู่ที่นี่ แต่ฉันไม่เห็นคำตอบใด ๆ ที่รวมเข้าด้วยกัน
ปัญหาคือสามเท่า
(1) ป้องกันการเลื่อนของหน้าต้นแบบ
$('body').css('overflow', 'hidden')(2) และลบแถบเลื่อน
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)(3) ทำความสะอาดเมื่อมีการยกเลิกคำกริยา
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')หากโมดัลไม่เต็มหน้าจอให้ใช้การเชื่อมต่อ. modal กับการซ้อนทับแบบเต็มหน้าจอ
โซลูชันของฉันสำหรับ Bootstrap 3:
.modal {
overflow-y: hidden;
}
body.modal-open {
margin-right: 0;
}เพราะสำหรับฉันเพียงoverflow: hiddenในชั้นเรียนไม่ได้ป้องกันหน้าจากการขยับไปทางซ้ายเนื่องจากเดิมbody.modal-openmargin-right: 15px
ฉันเพิ่งทำแบบนี้ ...
$('body').css('overflow', 'hidden');แต่เมื่อ scroller หายไปมันขยับทุกอย่างถูกต้อง 20px ดังนั้นฉันจึงเพิ่ม
$('body').css('margin-right', '20px');ตรงหลังจากนั้น
ใช้งานได้สำหรับฉัน
หากคำกริยามีความสูง / ความกว้าง 100% "mouseenter / leave" จะทำงานเพื่อเปิด / ปิดการเลื่อนได้อย่างง่ายดาย สิ่งนี้ได้ผลจริงสำหรับฉัน:
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$("#myModal").mouseenter(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
}).mouseleave(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll',lockscroll);
});ทำงานให้ฉัน
$('#myModal').on({'mousewheel': function(e)
{
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
});ทำไมไม่ทำอย่างที่ Bulma ทำ เมื่อโมดัลใช้งานได้แล้วเพิ่มใน html class. is-clipped ซึ่งเป็น overflow: hidden! important; และนั่นมัน
แก้ไข: Okey, Bulma มีข้อบกพร่องนี้ดังนั้นคุณต้องเพิ่มสิ่งอื่น ๆ เช่น
html.is-modal-active {
overflow: hidden !important;
position: fixed;
width: 100%;
}เนื่องจากสำหรับฉันแล้วปัญหานี้นำเสนอเป็นส่วนใหญ่บน iOS ฉันให้รหัสเพื่อแก้ไขปัญหานั้นบน iOS เท่านั้น:
if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
var $modalRep = $('#modal-id'),
startScrollY = null,
moveDiv;
$modalRep.on('touchmove', function(ev) {
ev.preventDefault();
moveDiv = startScrollY - ev.touches[0].clientY;
startScrollY = ev.touches[0].clientY;
var el = $(ev.target).parents('#div-that-scrolls');
// #div-that-scrolls is a child of #modal-id
el.scrollTop(el.scrollTop() + moveDiv);
});
$modalRep.on('touchstart', function(ev) {
startScrollY = ev.touches[0].clientY;
});
}คำตอบข้างต้นไม่เหมาะกับฉันอย่างสมบูรณ์ ดังนั้นฉันจึงพบวิธีอื่นที่ใช้งานได้ดี
เพียงเพิ่มscroll.(namespace)ฟังและการตั้งค่าscrollTopของdocumentล่าสุดของมูลค่าของมัน ...
และยังลบผู้ฟังในสคริปต์ปิดของคุณ
// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {
var documentScrollTop = $(document).scrollTop();
$(document).on('scroll.noScroll', function() {
$(document).scrollTop(documentScrollTop);
return false;
});
}).on('hidden.bs.modal', function() {
$(document).off('scroll.noScroll');
});ดูเหมือนว่านี่จะใช้งานไม่ได้กับ Chrome ข้อเสนอแนะใด ๆ ที่จะแก้ไขได้?
สิ่งนี้ใช้ได้กับฉัน:
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});สำหรับผู้ที่สงสัยว่าจะได้รับเหตุการณ์การเลื่อนสำหรับ modal bootstrap 3 ได้อย่างไร:
$(".modal").scroll(function() {
console.log("scrolling!);
});