আমি কেবল tfe দ্বারা সমাধানের জন্য একটু টিউনিং সরবরাহ করি । বিশেষত, যখন স্ক্রোলবার সেট করা থাকে তখন পৃষ্ঠার সামগ্রী (ওরফে পৃষ্ঠা শিফট ) কোনও স্থানান্তরিত হয় না তা নিশ্চিত করতে আমি কিছু অতিরিক্ত নিয়ন্ত্রণ যুক্ত করেছি hidden
।
দুটি জাভাস্ক্রিপ্ট ফাংশন lockScroll()
এবং unlockScroll()
পৃষ্ঠা স্ক্রোলটি লক এবং আনলক করতে যথাক্রমে সংজ্ঞায়িত করা যায়।
function lockScroll(){
$html = $('html');
$body = $('body');
var initWidth = $body.outerWidth();
var initHeight = $body.outerHeight();
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
$html.data('scroll-position', scrollPosition);
$html.data('previous-overflow', $html.css('overflow'));
$html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
var marginR = $body.outerWidth()-initWidth;
var marginB = $body.outerHeight()-initHeight;
$body.css({'margin-right': marginR,'margin-bottom': marginB});
}
function unlockScroll(){
$html = $('html');
$body = $('body');
$html.css('overflow', $html.data('previous-overflow'));
var scrollPosition = $html.data('scroll-position');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
$body.css({'margin-right': 0, 'margin-bottom': 0});
}
যেখানে আমি ধরে নিয়েছিলাম যে <body>
এর কোনও প্রাথমিক মার্জিন নেই।
লক্ষ্য করুন যে উপরের সমাধানটি বেশিরভাগ ব্যবহারিক ক্ষেত্রে ব্যবহার করে, এটি নির্দিষ্ট নয় কারণ এটি পৃষ্ঠাগুলির জন্য আরও কিছু কাস্টমাইজেশন প্রয়োজন, উদাহরণস্বরূপ, যার সাথে একটি শিরোনাম রয়েছে position:fixed
। একটি উদাহরণ সহ এই বিশেষ ক্ষেত্রে যেতে দিন। ধরুন
<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>
সঙ্গে
#header{position:fixed; padding:0; margin:0; width:100%}
তারপর, এক ফাংশন নিম্নোক্ত যোগ করা উচিত lockScroll()
এবং unlockScroll()
:
function lockScroll(){
//Omissis
$('#header').css('margin-right', marginR);
}
function unlockScroll(){
//Omissis
$('#header').css('margin-right', 0);
}
শেষ অবধি, মার্জিন বা প্যাডিংয়ের জন্য কিছু সম্ভাব্য প্রাথমিক মানের যত্ন নিন।