আমি চাই আমার ওয়েবসাইটের মডেলটি ( http://twitter.github.com/bootstrap থেকে ) খোলার সময় মাউসওহিলটি ব্যবহার করার সময় আমার শরীরটি স্ক্রোলিং বন্ধ করবে stop
মোডালটি খোলা থাকলে তবে সাফল্য ছাড়াই আমি নীচে জাভাস্ক্রিপ্টের টুকরো কল করার চেষ্টা করেছি
$(window).scroll(function() { return false; });এবং
$(window).live('scroll', function() { return false; });আমাদের ওয়েবসাইটটি আই 6 এর জন্য বাদ দেওয়া সমর্থনটি নোট করুন, আই 7 7 + যদিও সামঞ্জস্যপূর্ণ হওয়া দরকার।
উত্তর:
কোনও মডেল ডায়ালগ প্রদর্শিত হলে বুটস্ট্র্যাপের modalস্বয়ংক্রিয়ভাবে modal-openশরীরে ক্লাস যুক্ত হয় এবং ডায়লগটি লুকানো থাকলে এটিকে সরিয়ে দেয়। সুতরাং আপনি আপনার সিএসএসে নিম্নলিখিতগুলি যুক্ত করতে পারেন:
body.modal-open {
overflow: hidden;
}আপনি তর্ক করতে পারেন যে উপরের কোডটি বুটস্ট্র্যাপ সিএসএস কোড বেসের অন্তর্গত, তবে এটি আপনার সাইটে যুক্ত করার জন্য এটি একটি সহজ ফিক্স।
8 ই ফেব্রুয়ারী আপডেট করুন, 2013
এটি এখন টুইটার বুটস্ট্র্যাপ বনাম 2.3.0 এ কাজ করা বন্ধ করে দিয়েছে - তারা আর modal-openদেহে ক্লাস যুক্ত করে না।
মোডালটি যখন দেখানো হচ্ছে তখন শরীরে ক্লাস যুক্ত করা এবং মোডালটি বন্ধ হয়ে গেলে এটিকে সরিয়ে ফেলা উচিত:
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});11 শে মার্চ, ২০১৩ আপডেট করুন,
দেখে মনে হচ্ছে modal-openক্লাসটি বুটস্ট্র্যাপ 3.0 এ ফিরে আসবে, স্পষ্টভাবে স্ক্রোলটি প্রতিরোধের উদ্দেশ্যে:
পুনরায় সূচনা করে the
এটি দেখুন: https://github.com/twitter/bootstrap/pull/6342 - মডেল বিভাগটি দেখুন।
modal-openবুটস্ট্র্যাপ 3 এ ফিরে আসবে, সুতরাং যখন এটি চালু হয় তখন উপরের কোডটি সরিয়ে ফেলা নিরাপদ হওয়া উচিত।
গৃহীত উত্তরটি মোবাইলে (আইওএস 7 ডাব্লু / সাফারি,, কমপক্ষে) কাজ করে না এবং সিএসএস যখন করবে তখন আমি আমার সাইটে এমওআর জাভাস্ক্রিপ্ট চলমান চাই না।
এই সিএসএস মডেলের অধীনে পটভূমি পৃষ্ঠাটি স্ক্রোলিং থেকে রোধ করবে:
body.modal-open {
overflow: hidden;
position: fixed;
}তবে এটির উপরে শীর্ষে স্ক্রোলিংয়ের সামান্য পার্শ্ব-প্রভাবও রয়েছে। position:absoluteএটি সমাধান করে তবে, মোবাইলে স্ক্রোল করার সক্ষমতাটি নতুন করে পরিচয় করিয়ে দেয়।
আপনি যদি নিজের ভিউপোর্টটি ( ভিউপোর্ট যুক্ত করার জন্য আমার প্লাগইন<body> ) জানেন তবে আপনি কেবলমাত্র একটি সিএসএস টগল যুক্ত করতে পারেন 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;
}মোডালগুলি দেখানো / লুকিয়ে রাখার সময় অন্তর্নিহিত পৃষ্ঠাটি বাম / ডান দিক থেকে লাফানো থেকে রোধ করতে আমি এটি যুক্ত করি।
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');
})ওভারফ্লো দিয়ে আপনি শরীরের আকার উইন্ডো আকারে সেট করার চেষ্টা করতে পারেন: মোডাল খোলা থাকলে লুকানো থাকে
আপনার @ Charlietfl এর উত্তর অতিক্রম করতে হবে এবং স্ক্রোলবারগুলির জন্য অ্যাকাউন্টের প্রয়োজন, অন্যথায় আপনি একটি দস্তাবেজ রিফ্লো দেখতে পাবেন।
bodyপ্রস্থ রেকর্ড করুনbodyওভারফ্লো সেট করুনhiddenপদক্ষেপ 1 এ যা ছিল তা স্পষ্টভাবে শরীরের প্রস্থকে সেট করুন।
var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);bodyওভারফ্লো সেট করুনautobodyপ্রস্থ সেট করুনauto
var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");দ্বারা অনুপ্রাণিত: http://jdsharp.us/jQuery/minute/calculate-scrolbar-width.php
$body.css("overflow", "auto");শেষ ধাপে হওয়া উচিত :)
সতর্কতা: নীচের বিকল্পটি বুটস্ট্র্যাপ v3.0.x এর সাথে প্রাসঙ্গিক নয়, কারণ এই সংস্করণগুলিতে স্ক্রোলিং স্পষ্টভাবে মডেলের মধ্যেই সীমাবদ্ধ রয়েছে। আপনি যদি চাকা ইভেন্টগুলি অক্ষম করে থাকেন তবে আপনি অজান্তেই কিছু ব্যবহারকারীকে ভিডপোর্টের উচ্চতার চেয়ে বেশি উচ্চতাযুক্ত মডেলগুলিতে সামগ্রী দেখতে বাধা দিতে পারেন।
স্ক্রল ঘটনা cancelable নয়। তবে মাউসওয়েল এবং চাকা ইভেন্ট বাতিল করা সম্ভব । সবচেয়ে বড় সতর্কতাটি হ'ল সমস্ত উত্তরাধিকারী ব্রাউজারগুলি তাদের সমর্থন করে না, মজিলা সম্প্রতি গেকো ১.0.০-এর শেষেরগুলির জন্য সমর্থন যোগ করেছে। আমি সম্পূর্ণ স্প্রেড জানি না, তবে আই 6 + এবং ক্রোম তাদের সমর্থন করে।
তাদের কীভাবে উপার্জন করা যায় তা এখানে:
$('#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 এ এটিকে কাজ করতে পারেনি, কারণ আমি চাইনি যে পৃষ্ঠাটি শীর্ষে ফিরে যাবে। এটি ভাল কাজ করেছে:
$("#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%;
}আশাকরি এটা সাহায্য করবে...
জাভাস্ক্রিপ্টের সাথে 'ইস-মডেল-ওপেন' বা বডি ট্যাগের শৈলী সংযোজন করা ক্লাস যুক্ত করা ঠিক আছে এবং এটি যেমন অনুমিত হবে তেমন কাজ করবে। তবে আমরা যে সমস্যার মুখোমুখি হব তা হ'ল দেহ ওভারফ্লো হয়ে যায়: লুকানো থাকে, এটি শীর্ষে চলে যায়, (স্ক্রোলটপ 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% নিশ্চিত নই তবে যাইহোক চেষ্টা করুন।
নভেম্বর 2017 পর্যন্ত ক্রোম একটি নতুন CSS সম্পত্তি প্রবর্তন করেছে
overscroll-behavior: contain;
লেখার ক্ষেত্রে ক্রস ব্রাউজার সমর্থন সীমাবদ্ধ থাকলেও যা এই সমস্যাটি সমাধান করে।
সম্পূর্ণ বিবরণ এবং ব্রাউজার সমর্থনের জন্য নীচের লিঙ্কগুলি দেখুন
সর্বোত্তম সমাধান হ'ল 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বোতামগুলির প্রস্থের সমান হয়ে যায় । 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');
});এটি মডেলের স্ক্রোলিংটি কাজ করতে সক্ষম করবে এবং একই সাথে ওয়েবসাইটটিকে স্ক্রোলিং থেকে আটকাবে।
আপনি নিম্নলিখিত যুক্তি ব্যবহার করতে পারেন, আমি এটি পরীক্ষা করেছি এবং এটি কাজ করে (এমনকি আইআই তেও)
<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% নিশ্চিত নই যে এটি বুটস্ট্র্যাপের সাথে কাজ করবে তবে চেষ্টা করার মতো - এটি গিডুবটিতে পাওয়া যেতে পারে এমন রেমোডাল.জেএস এর সাথে কাজ করেছে: http://vodkabears.github.io/remodal/ এবং এটি পদ্ধতিগুলির জন্য বোধগম্য হবে বেশ অনুরূপ হতে।
পৃষ্ঠার শীর্ষে জাম্পিং বন্ধ করতে এবং সামগ্রীর ডানদিকের শিফট প্রতিরোধ করতে bodyযখন মডেলটি নিক্ষেপ করা হবে এবং এই সিএসএস বিধিগুলি সেট করুন:
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');এবং আপনার সিএসএসে:
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}এখন আপনি যখন মডেলটি সরিয়ে ফেলবেন, এইচটিএমএল ট্যাগে ন্যাসক্রোল ক্লাসটি সরাতে ভুলবেন না:
$('html').toggleClass('noscroll');overflowসেট করা উচিত নয় hidden? যদিও এটি আমার জন্য ব্যবহার করেছে (ব্যবহার করে hidden)।
আমার একটি সাইডবার ছিল যা চেকবক্স হ্যাক দ্বারা উত্পাদিত হয়েছিল। তবে মূল ধারণাটি হ'ল ডকুমেন্ট স্ক্রোলটপ সংরক্ষণ করা এবং উইন্ডো স্ক্রোল করার সময় এটি পরিবর্তন না করা।
দেহটি 'ওভারফ্লো: লুকানো' হয়ে গেলে পৃষ্ঠা লাফানো আমার ঠিক পছন্দ হয়নি
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')(২) এবং স্ক্রোল বারটি সরান
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)(3) মোডাল বরখাস্ত করা হলে পরিষ্কার করুন
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')যদি মডেলটি পূর্ণ স্ক্রিন না হয় তবে একটি সম্পূর্ণ পর্দার ওভারলেতে। মডেল বাইন্ডিংগুলি প্রয়োগ করুন।
আমি সবেমাত্র এটি করেছি ...
$('body').css('overflow', 'hidden');কিন্তু যখন স্ক্রোলার অসন্তুষ্ট হয়ে গেল তখন সবকিছু ঠিক 20 পিক্সে সরানো হয়েছিল, তাই আমি যুক্ত করেছি
$('body').css('margin-right', '20px');সরাসরি এটি পরে
আমার জন্য কাজ কর.
মডেল যদি 100% উচ্চতা / প্রস্থ হয় তবে "মাউসেন্টার / ছুটি" সহজেই স্ক্রোলিং সক্ষম / অক্ষম করতে কাজ করবে। এটি সত্যই আমার পক্ষে কাজ করেছে:
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);
});বুলমা যেমন করে না কেন? মোডাল যখন সক্রিয় থাকে তখন তাদের শ্রেণিতে এইচটিএমএল যুক্ত করুন .আইএস-ক্লিপড যা ওভারফ্লো: লুকানো! গুরুত্বপূর্ণ; এবং এটাই.
সম্পাদনা: ওকে, বুলমার এই বাগ রয়েছে, সুতরাং আপনাকে অবশ্যই অন্যান্য জিনিস যুক্ত করতে হবে
html.is-modal-active {
overflow: hidden !important;
position: fixed;
width: 100%;
}যেহেতু আমার জন্য এই সমস্যাটি মূলত আইওএস-তে উপস্থাপিত হয়, আমি কেবল এটি আইওএস-এ ঠিক করার জন্য কোড সরবরাহ করি:
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;
});
}উপরের উত্তরগুলির মধ্যে আমার পক্ষে পুরোপুরি কার্যকর হয়নি worked সুতরাং আমি আরও একটি উপায় খুঁজে পেয়েছি যা ভালভাবে কাজ করে।
কেবলমাত্র একটি 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');
});দেখে মনে হচ্ছে এটি ক্রোমে ভাল কাজ করে না। এটি ঠিক করার কোন পরামর্শ?
এটি আমার পক্ষে কাজ করেছে:
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});