প্রতিটি পরিস্থিতি পরিচালিত এমন কোনও সন্ধানের চেষ্টা করার পরে (স্ক্রোলটি অ্যানিমেট করার বিকল্পগুলি, বস্তুর চারপাশে প্যাডিং একবারে এটি স্ক্রোল হয়ে যায়, এমনকি আইফ্রেমে যেমন অস্পষ্ট পরিস্থিতিতেও কাজ করে), অবশেষে আমি নিজের সমাধানটি লিখে শেষ করেছি। যেহেতু এটি অন্যান্য অনেকগুলি সমাধান ব্যর্থ হওয়ার পরে কাজ করে বলে মনে হচ্ছে, আমি এটিকে ভাগ করে নিই:
function scrollIntoViewIfNeeded($target, options) {
var options = options ? options : {},
$win = $($target[0].ownerDocument.defaultView), //get the window object of the $target, don't use "window" because the element could possibly be in a different iframe than the one calling the function
$container = options.$container ? options.$container : $win,
padding = options.padding ? options.padding : 20,
elemTop = $target.offset().top,
elemHeight = $target.outerHeight(),
containerTop = $container.scrollTop(),
//Everything past this point is used only to get the container's visible height, which is needed to do this accurately
containerHeight = $container.outerHeight(),
winTop = $win.scrollTop(),
winBot = winTop + $win.height(),
containerVisibleTop = containerTop < winTop ? winTop : containerTop,
containerVisibleBottom = containerTop + containerHeight > winBot ? winBot : containerTop + containerHeight,
containerVisibleHeight = containerVisibleBottom - containerVisibleTop;
if (elemTop < containerTop) {
//scroll up
if (options.instant) {
$container.scrollTop(elemTop - padding);
} else {
$container.animate({scrollTop: elemTop - padding}, options.animationOptions);
}
} else if (elemTop + elemHeight > containerTop + containerVisibleHeight) {
//scroll down
if (options.instant) {
$container.scrollTop(elemTop + elemHeight - containerVisibleHeight + padding);
} else {
$container.animate({scrollTop: elemTop + elemHeight - containerVisibleHeight + padding}, options.animationOptions);
}
}
}
$target আপনি যদি প্রয়োজন হয় তবে ভিউতে স্ক্রোল করতে ইচ্ছুক এমন একটি jQuery অবজেক্ট।
options (alচ্ছিক) একটি অবজেক্টে নিম্নলিখিত নিম্নলিখিত বিকল্পগুলি থাকতে পারে:
options.$container- একটি jQuery অবজেক্ট $ টার্গেটযুক্ত উপাদানটিকে নির্দেশ করে (অন্য কথায়, স্ক্রোলবারগুলির সাথে ডোমের উপাদানটি)। উইন্ডোতে ডিফল্ট যেটিতে $ টার্গেট এলিমেন্ট রয়েছে এবং এটি একটি আইফ্রেমে উইন্ডো নির্বাচন করতে যথেষ্ট স্মার্ট। সম্পত্তির নামটিতে include অন্তর্ভুক্ত করতে ভুলবেন না।
options.padding- বস্তুটির উপরে বা নীচে যুক্ত করার জন্য পিক্সেলগুলিতে প্যাডিং যখন এটিকে দেখায় স্ক্রোল করা হয়। এইভাবে উইন্ডোর প্রান্তের বিরুদ্ধে সঠিক নয়। ডিফল্ট 20।
options.instant- যদি সত্যতে সেট করা থাকে, jQuery অ্যানিমেট ব্যবহার করা হবে না এবং স্ক্রোলটি তাত্ক্ষণিকভাবে সঠিক অবস্থানে চলে যাবে। মিথ্যা ডিফল্ট।
options.animationOptions- আপনি jQuery অ্যানিমেট ফাংশনটিতে যেতে চান এমন যে কোনও jQuery বিকল্পগুলি (দেখুন http://api.jquery.com/animate/ )। এটির সাহায্যে আপনি অ্যানিমেশনের সময়কাল পরিবর্তন করতে পারেন বা স্ক্রোলিং সম্পূর্ণ হয়ে গেলে একটি কলব্যাক ফাংশন কার্যকর করতে পারেন। এটি কেবল যদি options.instantমিথ্যাতে সেট করা থাকে তা কাজ করে । আপনার যদি একটি তাত্ক্ষণিক অ্যানিমেশন প্রয়োজন তবে একটি কলব্যাক সহ, options.animationOptions.duration = 0ব্যবহারের পরিবর্তে সেট করুন options.instant = true।