বর্তমান ওয়েব পৃষ্ঠার স্ক্রোল অবস্থান কীভাবে পাবেন এবং সেট করবেন?

121

আমি কীভাবে বর্তমান ওয়েব পৃষ্ঠার স্ক্রোল অবস্থান পেতে এবং সেট করতে পারি?

আমার একটি দীর্ঘ ফর্ম রয়েছে যা ব্যবহারকারীর ক্রিয়া / ইনপুটের উপর ভিত্তি করে রিফ্রেশ করা দরকার। এটি যখন ঘটে তখন পৃষ্ঠাটি একেবারে শীর্ষে পুনরায় সেট করে যা ব্যবহারকারীদের জন্য বিরক্তিকর, কারণ তাদের যে বিন্দুটিতে ছিল সেদিকে ফিরে স্ক্রোল করতে হবে।

পৃষ্ঠাটি পুনরায় লোড হওয়ার আগে যদি আমি বর্তমান স্ক্রোল অবস্থানটি (একটি লুকানো ইনপুটটিতে) ক্যাপচার করতে পারি তবে আমি এটি পুনরায় লোড করার পরে এটি আবার সেট করতে পারতাম।

javascript html

— Xyz
সূত্র

কোনও এজেএক্স-চালিত ফর্ম কি এই প্রভাবগুলি প্রতিরোধের জন্য ভাল উপায় নয় (এবং অবশ্যই এক্সএইচআর অনুপলব্ধ ক্ষেত্রে ফ্যালব্যাক সরবরাহ করে)? পৃষ্ঠা পুনরায় লোডগুলির পৃষ্ঠায় শীর্ষে ফিরে যেতে হবে এবং আবারও ফিরে আসতে হবে, বিরক্তিকর হতে পারে এমন একটি স্পিরিচ।

— মার্সেল কোরপেল

117

আপনি document.documentElement.scrollTopসম্পত্তি খুঁজছেন ।

— SLaks
সূত্র

ধন্যবাদ, আমি এই পাওয়া যায়নি: articles.sitepoint.com/article/javascript-from-scratch/6 এবং পরিবর্তন getScrollingPosition()লুকানো ভেরিয়েবল মান সংরক্ষণ করা হয়। তারপরে আমি যে রিফ্রেশ পৃষ্ঠাটি ব্যবহার করছি তার এইচটিএমএলে <body onLoad="window.scrollTo(x,y), যেখানে x এবং y হ'ল লুকানো মানগুলির মানগুলি!

— xyz

46

আমি কমপক্ষে উবুন্টুতে ক্রোমে সন্ধান করছি, যা document.documentElement.scrollTopসর্বদা 0 হয় document.body.scrollTop, অন্যদিকে উবুন্টুতে একটি ফায়ারফক্স, বিপরীতটি সত্য - আপনি 0 দিয়ে bodyএবং সঠিক পরিমাণটি পান documentElement। কোন ধারণা কি দেয়?

— টোবাক

12

এই উত্তরটি সঠিক scrollTopনয় কারণ সমস্ত ব্রাউজারে সম্পত্তি কাজ করে না। পরীক্ষা করে দেখুন window.pageXOffsetএবং window.pageYOffsetভাল ফলাফলের জন্য।

— gio

135

বর্তমানে গৃহীত উত্তরটি ভুল - document.documentElement.scrollTopক্রোমে সর্বদা 0 প্রদান করে। এটি কারণ ওয়েবকিট bodyস্ক্রোলিংয়ের উপর নজর রাখার জন্য ব্যবহার করে , যেখানে ফায়ারফক্স এবং আইই ব্যবহার করে html।

বর্তমান অবস্থান পেতে, আপনি চান:

document.documentElement.scrollTop || document.body.scrollTop

আপনি পৃষ্ঠাটির মতো বর্তমান অবস্থানটি 1000px এ সেট করতে পারেন:

document.documentElement.scrollTop = document.body.scrollTop = 1000;

অথবা, jQuery ব্যবহার করে (আপনি যখন সেখানে থাকবেন তখন এনিমেট করুন!):

$("html, body").animate({ scrollTop: "1000px" });

— tobek
সূত্র

5

জিও এর উত্তর, window.pageYOffsetআপনি যদি ব্যবহার করছেন window.scrollBy()বা window.scrollTo()পদ্ধতিগুলি ব্যবহার করেন তবে প্রস্তাবনাকে পরিষ্কার করা উচিত ।

— igorsantos07

32

ব্রাউজারগুলি কীভাবে বর্তমান উইন্ডো স্ক্রোলিং স্থানাঙ্কগুলিকে প্রকাশ করে তাতে কিছু অসঙ্গতি রয়েছে। গুগল ক্রোম উপর ম্যাক এবং আইওএস সবসময় আসতে বলে মনে হয় 0যখন ব্যবহার document.documentElement.scrollTopবা jQuery এর মধ্যে $(window).scrollTop()।

তবে এটি ধারাবাহিকভাবে কাজ করে:

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

— gyo
সূত্র

আমি এটিও লক্ষ্য করেছি, এটি ম্যাক এবং আইওএস-এ কোনও বাগ আছে?

— আলেকজান্ডার কিম

@ আলেকজান্দার কিম আমি মনে করি এটি সিএসএসের কিছু বিধি (ওভারফ্লো এর মতো) কীভাবে ব্যাখ্যা করা যায় তার সাথে সম্পর্কিত হতে পারে এবং শরীর এবং এইচটিএমএল উভয় উপাদানকে স্ক্রোলটপ পরীক্ষা করলে এটি কাজ করার রিপোর্ট করা হয়েছে। তবে, পরীক্ষা এবং ডিবাগিং এড়াতে, আমি সর্বদা নিরাপদ এবং সামঞ্জস্যপূর্ণ পৃষ্ঠা XOffset / pageYOffset এর উপর নির্ভর করি।

— gyo

সঠিক উত্তরের জন্য দুর্দান্ত ধন্যবাদ

— মাইকেল প্যাকসিওন

5

আমি এইচটিএমএল 5 স্থানীয় স্টোরেজ সমাধান সহ গিয়েছিলাম ... আমার সমস্ত লিঙ্কগুলি একটি ফাংশন কল করে যা উইন্ডো পরিবর্তন করার আগে এটি সেট করে।

localStorage.topper = document.body.scrollTop;

এবং প্রতিটি পৃষ্ঠার এটি শরীরের অনলোডে রয়েছে:

  if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper);
  }

— এ্যাক্স ল্যাব
সূত্র

3

লোকালস্টোরেজের সেটআইটেম () এবং গেটআইটেম () ব্যবহার করা এবং পরিবর্তে প্রতিটি লিঙ্ক ক্লিকে স্ক্রোল অবস্থানটি ব্যাক আপ করা, পৃষ্ঠাটি রেখে যাওয়ার সময় এটি একবার সংরক্ষণ করুন: উইন্ডো.এডএডএভেন্টলিস্টনার ("পূর্বেঅনলোড", ফাংশন () {লোকালস্টোরেজ। সেটটি আইটেম ("স্ক্রোলি", ডকুমেন্ট.ডোকমেন্টএলমেন্ট.স্রোকলটপ || ডকুমেন্ট.ডি.স্রোকলটপ);});

— StanE