কোনও পৃষ্ঠায় একটি উল্লম্ব স্ক্রোলবার রয়েছে কিনা তা সনাক্ত করুন?

Question

আমি কেবলমাত্র কিছু সাধারণ জেকিউ / জেএসের বর্তমান পৃষ্ঠা / উইন্ডো (কোনও নির্দিষ্ট উপাদান নয়) একটি উল্লম্ব স্ক্রোলবার আছে কিনা তা পরীক্ষা করে দেখতে চাই।

গুগলিং আমাকে এমন জিনিস দেয় যা কেবলমাত্র এই প্রাথমিক বৈশিষ্ট্যের জন্য অত্যধিক জটিল বলে মনে হয়।

কিভাবে এই কাজ করা যেতে পারে?

Answer 1

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        alert("Horizontal Scrollbar! D:<");
    }
});

Comments

+1 তবে নির্ভুলতার খাতিরে, এটি কেবলমাত্র ভিউপোর্টের চেয়ে সামগ্রীটি আরও প্রসারিত কিনা তা পরীক্ষা করে। যদি এর overflowসম্পত্তি লাইন বরাবর কোথাও bodyসেট করা hiddenথাকে তবে এটি কাজ করবে না। যদিও কোনও শরীরে লুকানো সেট করা অত্যন্ত বিরল।

— পেক্কা

যদি দেহের উচ্চতা উইন্ডোটির উচ্চতার সাথে মিলে যায় তবে এটি কাজ করে না, ডক উচ্চতাটি ভিউপোর্টের সাথে ঠিক মিলে গেলে একটি অনুভূমিক স্ক্রোলবার যুক্ত হয় । এটি উল্লম্ব চাপ দেবে। স্ক্রোলবার কিন্তু ডক / বডি / উইন্ডো উচ্চতা একই; এটি "উল্লম্ব স্ক্রোলবার "টিকে সতর্ক করবে না এমনকি এমন একটি রয়েছে।

— মনিকা সেলিওকে

কেবল ভেবেছি যে আমি $(document)পরিবর্তে $("body")আমাকে ব্যবহার করতে হবে তা উল্লেখ করতে পারি , যখন শরীর না থাকে (তখন আমার প্রস্থ / উচ্চতার দিক অনুপাত সহ একটি সম্পূর্ণ প্যাসিটেড ধারক রয়েছে)

— এএম_

আমার ক্রোম ব্রাউজারে প্রতিবেদন পৃষ্ঠা রয়েছে যেখানে এটি প্রাথমিকভাবে স্ক্রোল বারটি প্রদর্শন করে এবং মিলিসেকেন্ডের ক্ষেত্রে অদৃশ্য হয়ে যায় যা আমি এটি প্রোগ্রাম না করায় ব্রাউজার আচরণের মতো দেখায়। তাই এই ফাংশন রিটার্ন আমার ক্ষেত্রে সবসময় সত্য ..

— Dush

আমার জন্য @ টিউটাল্ক $ ("বডি")। উচ্চতা () এবং $ (উইন্ডো) আমাকে.

— সারংকে

Answer 2

এটা চেষ্টা কর:

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

এটি আপনাকে কেবল তখনই বলবে যে উল্লম্ব স্ক্রোলহাইট দৃশ্যমান সামগ্রীর উচ্চতার চেয়ে বড় কিনা। hasVScrollপরিবর্তনশীল সত্য বা মিথ্যা উপস্থিত থাকবে।

আপনার যদি আরও পুঙ্খানুপুঙ্খ চেক করতে হয় তবে উপরের কোডে নিম্নলিখিতটি যুক্ত করুন:

// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");

Comments

+1 ভাল! এবং প্রয়োজনীয় গণনা শৈলীর সাথে (যা আমি এই প্রশ্নের সাথে জড়িত না হওয়ার সিদ্ধান্ত নিয়েছিলাম;)

— পেক্কা

হ্যাঁ হ্যাঁ আমি এটি লেখার জন্য অতিরিক্ত প্রচেষ্টা করা বা না করার বিষয়ে বিতর্ক করছিলাম কারণ অনেক ক্ষেত্রে এটির প্রয়োজন হয় না।

— অ্যান্ডি ই

স্ক্রোলহাইটটি ক্লায়েন্টহাইটের চেয়ে বড় কিনা তা বিবেচনা না করেই ওভারফ্লো ওয়াই 'দৃশ্যমান' হ'ল ভিভস্ক্রোলটিতে সত্য হবে। আপনি বলতে চাইছেন cStyle.overflow === 'scroll'?

— বিটি

উপরের কোডটি কাজ করে না। ব্রাউজার: ক্রোম 56. url: নিউজ.greylock.com/…

— সেবাস্তিয়ান লরবার

উপাদানটি cStyle.overflow == "visible" যখন হয় তখন @ বিটি স্ক্রোল বারগুলি দেখাতে পারে document.body। তবে এটি হওয়া উচিত (hasVScrol &&CStyle.overflow == "দৃশ্যমান" && এলিমেন্ট.নোডনাম == "দেহ")। এছাড়াও cStyle.overflow === 'scroll'আপনি চিহ্নিত হিসাবে এটি জন্য পরীক্ষা করা প্রয়োজন ।

— এমসিফার্ট

Answer 3

আমি পূর্ববর্তী উত্তরটি চেষ্টা করেছি এবং দেখে মনে হচ্ছে না body ("বডি") কাজ করছে height উচ্চতা () অগত্যা পুরো এইচটিএমএল উচ্চতার প্রতিনিধিত্ব করে না।

আমি সমাধানটি নিম্নরূপে সংশোধন করেছি:

// Check if body height is higher than window height :) 
if ($(document).height() > $(window).height()) { 
    alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($(document).width() > $(window).width()) { 
    alert("Horizontal Scrollbar! D:<"); 
} 

Answer 4

আসুন এই প্রশ্নটি মৃতদের থেকে ফিরিয়ে আনুন;) গুগল আপনাকে একটি সহজ সমাধান না দেওয়ার একটি কারণ রয়েছে। বিশেষ কেস এবং ব্রাউজারের কুইক গণনাটিকে প্রভাবিত করে এবং এটি ততটা তুচ্ছ হিসাবে দেখা যায় না।

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

• তারা এমনভাবে অবস্থানযুক্ত সামগ্রীর প্রভাব ক্যাপচার করে না যা নির্ভরযোগ্য ক্রস ব্রাউজার। দেহের আকারের উপর ভিত্তি করে দেওয়া উত্তরগুলি এটিকে পুরোপুরি মিস করে ((শরীরটি এ জাতীয় সামগ্রীর অফসেট প্যারেন্ট নয় যদি না এটি নিজেই অবস্থান থাকে)। এবং এই উত্তরগুলি চেক করে $( document ).width()এবং ডকুমেন্ট আকারের jQuery এর বগি সনাক্তকরণের.height() শিকার হয় ।
• window.innerWidthব্রাউজার যদি এটি সমর্থন করে তবে নির্ভর করে আপনার কোডটি মোবাইল ব্রাউজারগুলিতে স্ক্রোল বারগুলি সনাক্ত করতে ব্যর্থ করে তোলে, যেখানে স্ক্রোল বারের প্রস্থটি সাধারণত 0 হয় They এগুলি কেবল একটি ওভারলে হিসাবে অস্থায়ীভাবে প্রদর্শিত হয় এবং নথিতে স্থান গ্রহণ করে না । মোবাইলে জুম করাও সেভাবে সমস্যা হয়ে যায় (দীর্ঘ গল্প))
• লোকেরা স্পষ্টভাবে অ-ডিফল্ট মানগুলিতে ( উভয়টি ঘটে যা কিছুটা জড়িত - এই বিবরণটি দেখুন ) যখন স্পষ্ট করে উভয় htmlএবং bodyউপাদান উভয়ের ওভারফ্লো সেট করে তখন সনাক্তকরণটি ফেলে দেওয়া যেতে পারে ।
• বেশিরভাগ উত্তরে, বডি প্যাডিং, সীমানা বা মার্জিনগুলি সনাক্ত হয় না এবং ফলাফলগুলিকে বিকৃত করে ort

"স্রেফ কাজ করে" (কাশি) এমন সমাধানের সন্ধানের জন্য আমি কল্পনা করার চেয়ে বেশি সময় ব্যয় করেছি। আমি যে অ্যালগরিদমটি নিয়ে এসেছি তা এখন jQuery.isInView এর একটি প্লাগইনের অংশ , যা একটি .hasScrollbarপদ্ধতি প্রকাশ করে । আপনি যদি চান তবে উত্সটি একবার দেখুন ।

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

Comments

ধন্যবাদ। বেশ জটিল! আপনি যদি না চান / পশ্চাদপটে সামঞ্জস্যপূর্ণ হতে চান তবে সম্ভবত এইচটিএমএল 5 ব্রাউজারগুলির জন্য আরও সহজ সমাধান হতে পারে? আমি বলতে চাইছি সম্ভবত ব্রাউজার কোডার / ডাব্লু 3 সি যথেষ্ট পরিমাণে বলতে পেরেছে যে কোনও উপাদানটিতে স্ক্রোলবার রয়েছে কি না? ;-)

— লিও

@ লিও যে আমি সচেতন তা নয় ওয়েল, একটি window.scrollbarsজিনিস আছে যার একক সম্পত্তি আছে visible,। প্রতিশ্রুতিবদ্ধ মনে হচ্ছে কিন্তু তা নয়। এটি আইই 11 সহ আইই সমর্থিত নয়। এবং এটি আপনাকে কেবল বলে দেয় যে এখানে একটি স্ক্রোল বার রয়েছে - তবে কোনটি নয়। দেখুন পরীক্ষা পৃষ্ঠা এখানে ।

— হ্যাশচেঞ্জ

ধন্যবাদ @ হাশচেঞ্জ এটি অবিশ্বাস্য বোকামি বলে মনে হয় যে এটি কেবল কোনও স্ক্রোলবার আছে কিনা তা বলে আমার মনে হয় এটি এখনও এক ধরণের পরীক্ষা। কিছুটা আশাপ্রদ যদিও। ;-)

— লিও

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

— হ্যাশচেঞ্জ

@ বিটি এবং আমি অনুমান করি যে আমরা যখন ওভারফ্লো সেটিংসের সাথে খেলতে শুরু করি তখন আমরা এক অদ্ভুত ব্যর্থতা মোডে উঠতে পারি কারণ তাদের আচরণ কিছুটা অদ্ভুত , তবে আমি সেখানেই থামলাম।

— হ্যাশচেঞ্জ

Answer 5

এই আমার জন্য কাজ করে:

function hasVerticalScroll(node){
    if(node == undefined){
        if(window.innerHeight){
            return document.body.offsetHeight> window.innerHeight;
        }
        else {
            return  document.documentElement.scrollHeight > 
                document.documentElement.offsetHeight ||
                document.body.scrollHeight>document.body.offsetHeight;
        }
    }
    else {
        return node.scrollHeight> node.offsetHeight;
    }
}

শরীরের জন্য, শুধু ব্যবহার করুন hasVerticalScroll()।

Comments

এই

— ক্রমের

clientHeightওভার বাঞ্ছনীয় offsetHeightএখানে। অন্যথায় আপনি একটি ঘন সীমানা রাখতে পারেন, এবং সেখানে ফিরে যখন কোনও স্ক্রোলবার নেই return

— থিসফায়ার

Answer 6

var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;

Comments

এই কাজটি করেছেন, ধন্যবাদ।

— বিগনেশ চিন্নায়ান

Answer 7

অদ্ভুতভাবে এইগুলির সমাধানগুলির কোনওটিই আপনাকে জানায় না যে কোনও পৃষ্ঠায় একটি উল্লম্ব স্ক্রোলবার রয়েছে।

window.innerWidth - document.body.clientWidthআপনাকে স্ক্রোলবারের প্রস্থ দিবে। এটি IE9 + (কম ব্রাউজারগুলিতে পরীক্ষিত নয়) যে কোনও ক্ষেত্রে কাজ করা উচিত। (বা কঠোরভাবে প্রশ্নের উত্তর দিতে,!!(window.innerWidth - document.body.clientWidth)

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

Comments

ক্রোম-মাউস আচরণের ব্যাখ্যা আমাকে অসম্পূর্ণ আচরণ বলে মনে করেছিল তা বুঝতে সাহায্য করেছিল। ধন্যবাদ!

— এই

Answer 8

আমি ভ্যানিলা সমাধান পেয়েছি

var hasScrollbar = function() {
  // The Modern solution
  if (typeof window.innerWidth === 'number')
    return window.innerWidth > document.documentElement.clientWidth

  // rootElem for quirksmode
  var rootElem = document.documentElement || document.body

  // Check overflow style property on body for fauxscrollbars
  var overflowStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowStyle = rootElem.currentStyle.overflow

  overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow

    // Also need to check the Y axis overflow
  var overflowYStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowYStyle = rootElem.currentStyle.overflowY

  overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY

  var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight
  var overflowShown    = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
  var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'

  return (contentOverflows && overflowShown) || (alwaysShowScroll)
}

Comments

আইই ১১ এ কাজ করছেন না।

— এনএলভি

ঠিক কর. এই একই ফাংশন IE 11 এর জন্যও কাজ করে। সমস্যাটি ছিল এটি - স্ট্যাকওভারফ্লো.com

— এনএলভি

আমি ক্রোম 65 এ এটি পরীক্ষা করেছি এবং এটি কাজ করে। তবে আমি যখন এটি অনুভূমিক স্ক্রোলবারগুলির জন্য মানিয়ে নেব তখন ফলাফলটি অদ্ভুত: যদি উভয় অনুভূমিক এবং উল্লম্ব স্ক্রোলবার প্রদর্শিত window.innerWidth > document.documentElement.clientWidthহয় তবে সত্য, তবে window.innerHeight > document.documentElement.clientHeightতা নয়। দেখে মনে হচ্ছে যেন এ ক্ষেত্রে অন্য উপায় ছিল। আমি জেএস বিকাশকারী নই, আমার কেবল সেলেনিয়াম পরীক্ষার জন্য এটি দরকার। আমি ইঙ্গিতের জন্য কৃতজ্ঞ।

— kriegaex

Answer 9

    <script>
    var scrollHeight = document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;
    var hasVerticalScrollbar = scrollHeight > clientHeight;

    alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
    alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
    </script>

আপনার কাছে একটি স্ক্রোলবার আছে কিনা তা এই আপনাকে জানিয়ে দেবে। আমি এমন কিছু তথ্য অন্তর্ভুক্ত করেছি যা ডিবাগিংয়ে সহায়তা করতে পারে যা জাভাস্ক্রিপ্ট সতর্কতা হিসাবে প্রদর্শিত হবে।

ক্লোডিং বডি ট্যাগের পরে এটি কোনও স্ক্রিপ্ট ট্যাগে রাখুন।

Answer 10

আমি কিস সি বাকারের উত্তরের একটি আপডেট সংস্করণ লিখেছি:

const hasVerticalScroll = (node) => {
  if (!node) {
    if (window.innerHeight) {
      return document.body.offsetHeight > window.innerHeight
    }
    return (document.documentElement.scrollHeight > document.documentElement.offsetHeight)
      || (document.body.scrollHeight > document.body.offsetHeight)
  }
  return node.scrollHeight > node.offsetHeight
}

if (hasVerticalScroll(document.querySelector('body'))) {
  this.props.handleDisableDownScrollerButton()
}

পৃষ্ঠাটির উল্লম্ব স্ক্রোলবার রয়েছে কিনা তা নির্ভর করে ফাংশনটি সত্য বা মিথ্যা প্রত্যাবর্তন করে।

উদাহরণ স্বরূপ:

const hasVScroll = hasVerticalScroll(document.querySelector('body'))

if (hasVScroll) {
  console.log('HAS SCROLL', hasVScroll)
}

Answer 11

আমি ব্যবহার করি

public windowHasScroll()
{
    return document.body.clientHeight > document.documentElement.clientHeight;
}

Answer 12

উইন্ডোর অভ্যন্তরের অংশের সাথে ডকুমেন্টের মূল উপাদানটির (যেমন এইচটিএমএল উপাদান) প্রস্থের তুলনা করুন:

if ((window.innerWidth - document.documentElement.clientWidth) >0) console.log('V-scrollbar active')

আপনার যদি স্ক্রোলবার প্রস্থও জানতে হয়:

vScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

Answer 13

অন্যান্য সমাধানগুলি আমার একটি প্রকল্পে কাজ করে নি এবং আমি ওভারফ্লো সিএসএস সম্পত্তি পরীক্ষা করে শেষ করছি

function haveScrollbar() {
    var style = window.getComputedStyle(document.body);
    return style["overflow-y"] != "hidden";
}

প্রোপ পরিবর্তন করে যদি স্ক্রোলবার অদৃশ্য হয়ে যায় তবে এটি কাজ করবে তবে সামগ্রীটি উইন্ডোর চেয়ে সমান বা ছোট হলে এটি কাজ করবে না।