জাভাস্ক্রিপ্ট দিয়ে স্ক্রোলবার অবস্থান কীভাবে পাবেন?

Question

পৃষ্ঠার বর্তমান দৃশ্যটি কোথায় রয়েছে তা স্থির করার জন্য আমি জাভাস্ক্রিপ্ট সহ ব্রাউজারের স্ক্রোলবারের অবস্থানটি সনাক্ত করার চেষ্টা করছি। আমার অনুমান যে ট্র্যাকের থাম্বটি কোথায় আছে তা সনাক্ত করতে হবে এবং তারপরে ট্র্যাকের মোট উচ্চতার শতাংশ হিসাবে থাম্বের উচ্চতা। আমি কি এটি অতিরিক্ত জটিলতা দিচ্ছি, বা জাভাস্ক্রিপ্ট এর চেয়ে সহজ সমাধান সরবরাহ করে? কোড-ভিত্তিক কোন ধারণা?

Answer 1

আপনি ব্যবহার করতে পারেন element.scrollTopএবং element.scrollLeftযথাক্রমে উল্লম্ব এবং অনুভূমিক অফসেট পেতে, এটি স্ক্রোল করা হয়েছে। আপনি যদি পুরো পৃষ্ঠার বিষয়ে চিন্তা করেন তবে elementতা হতে পারে document.body। যদি আপনার শতাংশের প্রয়োজন হয় তবে আপনি এটির তুলনা করতে পারেন element.offsetHeightএবং element.offsetWidth(আবার, elementদেহ হতে পারে)।

Comments

আপনি কোন ব্রাউজার ব্যবহার করছেন? বিভিন্ন ব্রাউজারে দেহ প্রাপ্তি আলাদাভাবে করা হয় ( elementএবং document.bodyকেবল উদাহরণ ছিল)। বিস্তারিত জানার জন্য howtocreate.co.uk/tutorials/ জাভাস্ক্রিপ্ট / ব্রাউজার উইন্ডো দেখুন ।

— সর্বোচ্চ শওয়াবকেহে 20'10

ফায়ারফক্স ৩.6 এর সাথে আমাকে সঠিক মূল্য দেওয়ার জন্য এটি পেয়েছি, তবে আই 7 window.pageYOffsetতে কাজ করে কিছুই পেতে পারি না। চেষ্টা করা হয়েছে window.pageYOffset, document.body.scrollTop, document.documentElement.scrollTop,element.scrollTop

— পল

scrollTop শুধুমাত্র আমার জন্য কাজ যখন আমি বন্ধনী ... $ ( "scrollBody।") যোগ scrollTop ()।

— Maia

যদি আপনি 'উইন্ডো' এলিমেন্টটি নিয়ে কাজ করে থাকেন তবে আপনি উইন্ডো.স্রোকলটির পরিবর্তে উইন্ডো.স্রোলওয়াই ব্যবহার করতে পারেন

— জ্যানিস জানসেন

আমি মনে করি document.bodyবেশিরভাগ আধুনিক ব্রাউজারগুলিতে স্ক্রোল অবস্থানটি সেট করা নেই - এটি সাধারণত document.documentElementএখনই সেট করা থাকে । ক্রোমের সংক্রমণের জন্য bugs.chromium.org/p/chromium/issues/detail?id=157855 দেখুন ।

— fzzfzzfzz

Answer 2

আমি <div>এটি ক্রোমের জন্য করেছি did

এলিমেন্ট। স্ক্রোলটপ - স্ক্রোলের কারণে শীর্ষে লুকানো পিক্সেল। কোনও স্ক্রোল না দিয়ে এর মান 0 হয়।

উপাদান। স্ক্রোলহাইট - পুরো ডিভের পিক্সেল।

উপাদান .clientHeight - আপনি যে পিক্সেলটি আপনার ব্রাউজারে দেখেন।

var a = element.scrollTop;

অবস্থান হবে।

var b = element.scrollHeight - element.clientHeight;

স্ক্রোলটোপের সর্বাধিক মান হবে ।

var c = a / b;

[0 থেকে 1 অবধি ] স্ক্রোলের শতাংশ হবে ।

Comments

ধন্যবাদ! সম্ভবত 0 থেকে 1 পর্যন্ত নয়, যেহেতু আপনি আসলে উপাদানটির নীচে স্ক্রোল করতে পারবেন না, সাধারণত - তাই না?

এটা প্রায় সঠিক। var বি এর জন্য আপনার উইন্ডো.নির বিয়োগ করা উচিতএইচটি এলিমেন্ট.কমেন্ট হাইট নয় e

— কাহলেস

Answer 3

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

দুটি পূর্ণসংখ্যার- [স্ক্রোলফেল্ট, স্ক্রোলটপ] সহ একটি অ্যারে প্রদান করে

Comments

উদাহরণ সহ এই ফাংশনটি কীভাবে ব্যবহার করবেন তা দেখানো দুর্দান্ত been

— ব্যবহারকারী 18490

আমার ধারণা আপনি এই লাস্টস্ক্রোল = getScrol () ব্যবহার করতে পারেন; উইন্ডো.স্ক্রোলটো (লাস্টস্ক্রোল [0], লাস্টস্ক্রোল [1]);

— দিনেশ রাজন

দুর্দান্ত কাজ করে তবে আমি x এবং y কীগুলির সাহায্যে কোনও অবজেক্টে পরিবর্তন করেছি যেহেতু এটি আমার কাছে আরও কিছুটা বোঝায়।

— xd6_

@ ব্যবহারকারী 18490 এর মন্তব্য অনুসরণ করে সম্পাদিত।

— ডেভিড কান্নিজো

রেফারেন্স এরিয়ার: ভেরিয়েবলটি খুঁজে পাচ্ছে না: উপাদান

— জনি

Answer 4

এটা এরকম :)

window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    console.log(scroll)
});

Answer 5

2018 এর উত্তর :

এর মতো কাজ করার সর্বোত্তম উপায় হ'ল ছেদটি পর্যবেক্ষক এপিআই ব্যবহার করা ।

ছেদটি পর্যবেক্ষক এপিআই পূর্বসূরি উপাদান বা একটি শীর্ষ-স্তরের নথির ভিউপোর্টের সাথে লক্ষ্য উপাদানটির ছেদগুলিকে সংবিধানে পরিবর্তনগুলি পর্যবেক্ষণ করার একটি উপায় সরবরাহ করে।

Orতিহাসিকভাবে, কোনও উপাদানের দৃশ্যমানতা বা একে অপরের সাথে সম্পর্কিত দুটি উপাদানের আপেক্ষিক দৃশ্যমানতা সনাক্ত করা একটি কঠিন কাজ ছিল যার জন্য সমাধানগুলি অবিশ্বাস্য এবং ব্রাউজার এবং ব্যবহারকারীরা যে সাইটগুলিকে অলস হয়ে উঠছে সেগুলি ঘটাতে ঝুঁকির কারণ হয়ে দাঁড়িয়েছে। দুর্ভাগ্যক্রমে, ওয়েবটি পরিপক্ক হওয়ার সাথে সাথে এই জাতীয় তথ্যের প্রয়োজনীয়তা বৃদ্ধি পেয়েছে। ছেদ সম্পর্কিত তথ্য অনেক কারণে প্রয়োজন যেমন:

• কোনও পৃষ্ঠা হিসাবে চিত্র বা অন্যান্য সামগ্রী অলস-লোড হচ্ছে rol
• "অসীম স্ক্রোলিং" ওয়েব সাইটগুলি কার্যকর করা হচ্ছে, যেখানে আপনি স্ক্রোল করার সময় আরও বেশি সামগ্রী লোড এবং রেন্ডার করা হয়েছে, যাতে ব্যবহারকারীকে পৃষ্ঠাগুলির মধ্য দিয়ে ফ্লিপ করতে না হয়।
• বিজ্ঞাপনের আয় গণনা করার জন্য বিজ্ঞাপনের দৃশ্যমানতার প্রতিবেদন।
• ব্যবহারকারী ফলাফলটি দেখতে পাবে কিনা তার উপর ভিত্তি করে কাজগুলি বা অ্যানিমেশন প্রক্রিয়াগুলি সম্পাদন করবেন কিনা তা নির্ধারণ করা।

ক্ষতিগ্রস্থ প্রতিটি উপাদানগুলির জন্য প্রয়োজনীয় তথ্য তৈরি করতে অতীতে জড়িত ইভেন্ট হ্যান্ডলারের এবং এলিমেন্ট.সেটবাউন্ডিংক্লায়েন্টরেক্টের মতো লুপগুলি কল করার পদ্ধতিগুলিতে ছেদ সনাক্তকরণ কার্যকর করা হচ্ছে। যেহেতু এই সমস্ত কোড মূল থ্রেডে চলে তাই এর মধ্যে একটিও পারফরম্যান্স সমস্যার কারণ হতে পারে। কোনও সাইট যখন এই পরীক্ষাগুলি দ্বারা লোড করা হয়, তখন জিনিসগুলি সরল কুরুচিপূর্ণ হতে পারে।

নিম্নলিখিত কোড উদাহরণ দেখুন:

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

বেশিরভাগ আধুনিক ব্রাউজারগুলি ইন্টারসেকশনঅবেসারভারকে সমর্থন করে তবে আপনার পশ্চাদপদ-সামঞ্জস্যের জন্য পলিফিল ব্যবহার করা উচিত ।

Answer 6

আপনি যদি পুরো পৃষ্ঠার জন্য যত্নশীল হন। আপনি এটি ব্যবহার করতে পারেন:

document.body.getBoundingClientRect().top

Comments

পরিবর্তে ডকুমেন্ট.বডি ব্যবহার করুন

— ড্যানিয়েল দেজফৌলি

Answer 7

আপনি যদি jQuery ব্যবহার করেন তবে আপনার জন্য একটি নিখুঁত ফাংশন রয়েছে:। স্ক্রোলটপ ()

ডক এখানে -> http://api.jquery.com/scrolTop/

দ্রষ্টব্য: আপনি অবস্থানটি পুনরুদ্ধার করতে বা সেট করতে এই ফাংশনটি ব্যবহার করতে পারেন।

এছাড়াও দেখুন: http://api.jquery.com/?s=scrol

Comments

জেএসের জন্য একটি লাইব্রেরি দিয়ে জেএস সম্পর্কে কোনও প্রশ্নের উত্তর কেন দিন, যখন এটি সম্পূর্ণ সম্ভব এবং এমনকি কাঁচা জেএসে এটি করা সুবিধাজনক? আপনি কেবল তাকে অতিরিক্ত লোড সময় যুক্ত করার পাশাপাশি সম্পূর্ণ অপ্রয়োজনীয় কোনও কিছুর জন্য কিছু সঞ্চয়স্থান ব্যবহার করতে বলছেন। এছাড়াও, কখন থেকে জাভাস্ক্রিপ্টটির অর্থ জিকুয়েরি শুরু হয়েছিল?

— ডেমনঅফ দ্য ওয়েস্ট

যদি আপনি স্বতন্ত্রভাবে জিজ্ঞাসা করেন আমি jQuery পছন্দ করি না এবং আমি এই প্রশ্নের উত্তর না দিয়েছি তবে ভ্যানিলা জেএস-এ ইতিমধ্যে অন্যান্য ফেলোদের দেওয়া উত্তর রয়েছে তবে কেউ যদি এই থ্রেডে একটি সুস্বাদু মশলা যোগ করে থাকে তবে সমস্যা কি? (তিনি ইতিমধ্যে উল্লেখ করেছেন যে যদি আপনি jQuery ব্যবহার করছেন)

— রবীন্দ্র পায়েল

@ R01010010 এটি কারণ এখনকার দিনগুলিতে জ্যাকুয়ারি অকেজো এবং প্রতিরোধী, জ্যাকুয়ের সমস্ত বৈশিষ্ট্য ভ্যানিলাজেএস-এর মাধ্যমে সহজেই প্রয়োগ করা হয়, আপনি জিকুয়ারির অভ্যন্তরের কীসের উপর নির্ভরশীল হয়ে ওঠেন, ভ্যানিলসজেএস-এ নতুন বৈশিষ্ট্য উপলব্ধ রয়েছে, আপনি প্রগ্রেমার হিসাবে হালনাগাদ করবেন না, যেমন উদাহরণ , এখন দিন ভ্যানিলাজেএস-তে একটি নতুন এপিআই রয়েছে যা পুরানো এক্সএইচআরকে প্রতিস্থাপন করেছে, আপনি যদি কেবল জিকুয়েরির জগতে থাকতেন তবে কখনই আনতে সুবিধা পাবেন না এবং jQuery.ajax () ব্যবহার চালিয়ে যাবেন না My আমার ব্যক্তিগত মতামতটি অবিরত লোকেরা জিকুয়ারি ব্যবহার করা কারণ এটি শিখতে বন্ধ করেছে। এছাড়াও ভ্যানিলাজেএস দ্রুত ভ্যানিলা- js.com

— জন

@ জনবালভিন আরিয়াস আনার বিষয়ে কথা বলছেন, অর্থাৎ ১১ বা এমনকি এজ কি হবে?

— বেন

আমি ভুল হলে আমাকে সংশোধন করুন, তবে আনতে "আধুনিক" অর্থাত্ যথাযথভাবে কাজ করে না এবং এটি এখনও ব্যাপকভাবে ব্যবহৃত হয়। যদি আমি জ্যাকোয়ারি ব্যবহার করতাম তবে আমাকে ততক্ষণে এগিয়ে যাওয়ার জন্য উত্সাহিত করা হবে

— বেন

Answer 8

এখানে স্ক্রোল অবস্থান পেতে অন্য উপায়

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

Answer 9

আমি মনে করি যে নিম্নলিখিত ফাংশনটি স্ক্রোল স্থানাঙ্ক মানগুলিতে সহায়তা করতে পারে:

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

আমি থেকে এই ধারণা পেয়েছেন এই উত্তরটি একটু পরিবর্তনের সঙ্গে।