(বিয়োগ) স্ক্রোলবার ছাড়া স্ক্রিনের প্রস্থ কীভাবে পাবেন?

Question 1

আমার একটি উপাদান রয়েছে এবং এর প্রস্থটি (!) উল্লম্ব স্ক্রোলবার ছাড়া প্রয়োজন need

ফায়ারব্যাগ আমাকে জানায় শরীরের প্রস্থ 1280px।

ফায়ারফক্সে এর যে কোনও একটি কাজ সূক্ষ্মভাবে:

console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );

তারা সকলেই 1263px ফেরত দেয় যা আমি খুঁজছি এমন মান।

তবে অন্যান্য সমস্ত ব্রাউজার আমাকে 1280px দেয় ।

(!) উল্লম্ব স্ক্রোলবার ছাড়া পূর্ণস্ক্রিন প্রস্থ পাওয়ার জন্য কি কোনও ক্রস ব্রাউজার উপায় আছে?

Question 2

`.prop("clientWidth")` এবং `.prop("scrollWidth")`

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

মধ্যে জাভাস্ক্রিপ্ট :

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

_{PS: নোট করুন যে scrollWidthনির্ভরযোগ্যভাবে ব্যবহার করতে আপনার উপাদানটি অনুভূমিকভাবে উপচে পড়া উচিত নয়}

jsBin ডেমো

আপনি ব্যবহার করতে পারেন .innerWidth()তবে এটি কেবল bodyউপাদানটিতে কাজ করবে

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar

Question 3

আপনি সহজভাবে লিখে ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন:

var width = el.clientWidth;

আপনি নীচের হিসাবে নথির প্রস্থ পেতে এটি ব্যবহার করতে পারেন:

var docWidth = document.documentElement.clientWidth || document.body.clientWidth;

সূত্র: এমডিএন

আপনি নিম্নলিখিত স্ক্রোলবার সহ পুরো উইন্ডোটির প্রস্থও পেতে পারেন:

var fullWidth = window.innerWidth;

তবে এটি সমস্ত ব্রাউজার দ্বারা সমর্থিত নয়, সুতরাং ফলব্যাক docWidthহিসাবে আপনি উপরের মতো ব্যবহার করতে এবং স্ক্রোলবার প্রস্থে যুক্ত করতে চাইতে পারেন ।

সূত্র: এমডিএন

Question 4

এখানে কিছু উদাহরণ রয়েছে যা ধরে নেওয়া $elementহয় যে একটি jQueryউপাদান:

// Element width including overflow (scrollbar)
$element[0].offsetWidth; // 1280 in your case

// Element width excluding overflow (scrollbar)
$element[0].clientWidth; // 1280 - scrollbarWidth

// Scrollbar width
$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar

Question 5

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

$('body, html').css('overflow', 'hidden');
var screenWidth1 = $(window).width();
$('body, html').css('overflow', 'visible');
var screenWidth2 = $(window).width();
alert(screenWidth1); // Gives the screenwith without scrollbar
alert(screenWidth2); // Gives the screenwith including scrollbar

আপনি এই কোডটি ব্যবহার করে স্ক্রোল বারটি দিয়ে এবং ছাড়াই স্ক্রিনের প্রস্থ পেতে পারেন। এখানে, আমি এর ওভারফ্লো মান পরিবর্তন করেছি bodyএবং স্ক্রোলবার ছাড়াই এবং ছাড়াই প্রস্থ পেয়েছি ।

Question 6

স্ক্রোলবারগুলি ছাড়াই সঠিক প্রস্থ এবং উচ্চতা পাওয়ার সবচেয়ে নিরাপদ জায়গাটি এইচটিএমএল উপাদান থেকে। এটা চেষ্টা কর:

var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight

IE 9 এবং এটি সমর্থন করে ব্রাউজার সমর্থনটি বেশ শালীন। ওল্ড আইইয়ের জন্য, এখানে উল্লিখিত অনেকগুলি ফ্যালব্যাকগুলির মধ্যে একটি ব্যবহার করুন।

Question 7

আমি একটি অনুরূপ সমস্যা অনুভব করেছি এবং width:100%;এটি আমার জন্য সমাধান করেছি। আমি এই প্রশ্নের উত্তরটির চেষ্টা করার পরে এবং বুঝতে পেরেছিলাম যে কোনও একটির খুব প্রকৃতি <iframe>এই জাভাস্ক্রিপ্ট পরিমাপ সরঞ্জামগুলিকে কিছু জটিল কাজ না করেই ভুল করে দেবে c ইফ্রেমে এটির যত্ন নেওয়ার এক 100 টি সহজ উপায়। আমি আপনার সমস্যা সম্পর্কে জানি না যেহেতু আপনি কোন HTML উপাদানগুলি ব্যবহার করছেন তা সম্পর্কে আমি নিশ্চিত নই।

Question 8

এইগুলির কোনও সমাধান আমার পক্ষে কাজ করেনি, তবে আমি প্রশস্ততা নিয়ে এবং স্ক্রোল বারের প্রস্থকে বিয়োগ করে এটি ঠিক করতে সক্ষম হয়েছি । আমি নিশ্চিত নই যে এটি ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ।

Question 9

এখানে আমি ব্যবহার করি

function windowSizes(){
    var e = window,
        a = 'inner';
    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return {
        width: e[a + 'Width'],
        height: e[a + 'Height']
    };  
}

$(window).on('resize', function () {
    console.log( windowSizes().width,windowSizes().height );
});

(বিয়োগ) স্ক্রোলবার ছাড়া স্ক্রিনের প্রস্থ কীভাবে পাবেন?

.prop("clientWidth") এবং .prop("scrollWidth")

`.prop("clientWidth")` এবং `.prop("scrollWidth")`