ক্রোমের পৃষ্ঠার প্রস্থে স্ক্রোল-বার অ্যাড-আপ করা থেকে বিরত করুন

Question

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

সমস্যাটি হ'ল পৃষ্ঠায় (1) স্ক্রোল-বারগুলি উপাদানগুলিকে বাম দিকে কিছুটা ধাক্কা দেবে বলে মনে হচ্ছে (প্রস্থে অ্যাড আপ?) যখন পৃষ্ঠাটিতে (2) সবকিছুই ভালভাবে প্রদর্শিত হবে

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

Answer 1

আপনি স্ক্রোলবার আকার পেতে পারেন এবং তারপরে ধারকটিতে একটি মার্জিন প্রয়োগ করতে পারেন।

এটার মতো কিছু:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

এইচ-স্ক্রোলবার সরানোর জন্য সিএসএস:

body{
    overflow-x:hidden;
}

এটি একবার দেখার চেষ্টা করুন: http://jsfiddle.net/NQAzt/

Comments

চতুর সমাধান, যদিও আমি 'তবে' শর্তটি বুঝতে পারি না!

— এসেমাদ

স্ক্রোলহাইট কোনও উপাদানটির মোট উচ্চতা। আপনি যা দেখেন এবং কী লুকায়িত। একটি উদাহরণ: আপনার উইন্ডোটি উচ্চতার 500px এর মতো, শরীরে 900px এর সামগ্রী রয়েছে। 500px দেখানো হয়েছে তবে অন্যান্য 400px লুকানো আছে এবং স্ক্রোল বার এই পুনরায় মান পিক্সেলটি দেখানোর জন্য উপস্থিত হবে। সুতরাং শর্তটি "যদি সমস্ত সামগ্রীর উচ্চতা বেশি হয় তবে ভিউপয়েন্টের উচ্চতা, শরীরে মার্জিন যুক্ত করুন"। আমার খারাপ

— ইংরাজির

আমি এখন এটি পেয়েছি, স্পষ্ট ব্যাখ্যার জন্য ধন্যবাদ, আমি এই সমাধানটি চেষ্টা করেছিলাম এবং একটি অতিরিক্ত অনুভূমিক স্ক্রোল-বার পেয়েছি, কেন জানি না।

— এসেমাদ

উত্তরে এটি প্রতিরোধের জন্য আমি

— সিএসএসের

এই সমাধান অক্ষম স্ক্রলিং

— avalanche1

Answer 2

DISCLAIMER পড়ুন : আস্তরণ হয়েছে অবচিত ।
আপনার যদি একেবারে করতে হয় তবে আপনি এটি ব্যবহার করতে পারেন, কিন্তু না করার চেষ্টা করুন।

এটি কেবল ওয়েবকিট ব্রাউজারগুলিতে কাজ করে তবে আমি এটি অনেক পছন্দ করি। autoঅন্যান্য ব্রাউজারগুলির মতো আচরণ করবে ।

.yourContent{
   overflow-y: overlay;
}

এটি স্ক্রোলবারটি কেবল ওভারলে হিসাবে প্রদর্শিত হবে , সুতরাং এটি আপনার উপাদানটির প্রস্থকে প্রভাবিত করবে না !

Comments

এটি আইই 11 এর জন্য কাজ করছে না। আইই-তে কাজ করার জন্য ওভারলে মানটির জন্য কোনও কাজ রয়েছে?

— আনवेश রেড্ডি

যতদূর আমি জানি না, আপনাকে IE এর জন্য এই থ্রেডে প্রস্তাবিত অন্যান্য বিকল্পগুলি করতে হবে

— সাইমনডস

অনেক প্রয়োজন! আমার মার্কআপটি দিয়ে আমি কী ভুল করেছিলাম তা দেখার জন্য আমি আধ ঘন্টারও বেশি সময় নিয়েছি। আমি কোন স্টাইলগুলি অতিরিক্ত ব্যবহার করেছি? এটিও ডিফল্ট হওয়া উচিত।

— কুশলভম

তবে এটি

— অবচয়

আমি প্রতিফলিত সমাধান আপডেট। কিন্ডা দু: খিত: পি

— সাইমনডস

Answer 3

আপনাকে যা করতে হবে তা হ'ল:

html {
    overflow-y: scroll;
}

আপনার সিএসএস ফাইলে এটির মতো স্ক্রোলার থাকবে কারণ এটি প্রয়োজন কিনা বা আপনি সবে স্ক্রল করতে সক্ষম হবেন না

এর অর্থ ভিউপোর্টের উভয়ের জন্য একই প্রস্থ থাকবে

Comments

সুতরাং, আমি উভয় স্ক্রোল-বার যুক্ত করতে বাধ্য? কেবল উল্লম্ব স্ক্রোল-বারের প্রশস্ততা উপেক্ষা করার উপায় নেই? ধন্যবাদ !

— এসেমাদ

সেখানে আমি এ বিষয়ে অবহিত হওয়ার কোনও উপায় নেই তবে আমি যা বলেছিলাম তাতে একটি ট্রিট কাজ করে @ Rockr90

— Hive7

@ d3c0y এটি সত্য এবং আমি উত্তরে এটি উল্লেখ করেছি তবে এটি করার সবচেয়ে সহজ পদ্ধতি। আমি জানি না যে এটি গত 3 বছরে পরিবর্তিত হয়েছে কিনা

— Hive7

@aks। এটি ব্রাউজারকে ভাবতে বাধ্য করে যে আপনি স্ক্রোলবারটি সক্ষম করে যাতে স্ক্রোলবার সক্ষম করে এবং স্ক্রল ওয়াই হ'ল পাশের স্ক্রোলার

— Hive7

ওভারফ্লো-ওয়াই: স্ক্রোল; সমস্ত ভিউপোর্টে স্ক্রোলবার যুক্ত / প্রদর্শন করবে এমনকি কোনও স্ক্রোলযোগ্য উপাদান নেই।

— অভিলাষ

Answer 4

সম্ভবত

html {
    width: 100vw;
}

আপনি যা চান ঠিক তাই

Comments

এটি আমার ইউসকেসটির জন্য দুর্দান্ত কাজ করেছে: gist.github.com/bmcminn/1ab50da18bde75f39bc88e8292a5a847 আমি calc()মূল বিষয়বস্তুর দৃশ্যের প্রস্থ নির্ধারণ করতে ব্যবহার করছি যাতে স্থির অফস্ক্রিন এনএভি ডেস্কটপে স্ক্রিনের বাম দিকটি দখল করতে পারে, সমস্ত সময় নেটিভ সংরক্ষণ করে মোবাইলে স্ক্রোল করুন।

— বিএমসিএমএন

আমি গত ৩ 36 ঘন্টা ধরে আমার স্ক্রোলবারগুলি নিয়ে ঘোরাঘুরি করছি। আমার কয়েকটি ভিন্ন সমাধান হয়েছে যা কাজ করেছে, তবে অন্যান্য সমস্যা উত্থাপন করেছে। এটিই প্রথম সমাধান যা উভয়ই কাজ করে এবং আমাকে অন্য কোথাও একটি সাধারণ স্ক্রোলবার ব্যবহার করার অনুমতি দেয়। ধন্যবাদ.

— কোশার

আপনাকে স্বাগতম! তবে htmlএর প্রস্থের s এর সাথে গোলমাল করাvw কিছুটা হ্যাকি , সুতরাং দয়া করে কিছুটা সাবধানতা অবলম্বন করুন!

— নিউরোট্রান্সমিটার

এটি দুর্দান্ত কাজ করেছে, কেউ কীভাবে এটি কাজ করে তা ব্যাখ্যা করতে পারেন?

— জিউস

সমাধানটি খারাপ নয়, তবে এটি অনুভূমিক স্ক্রোলিং যুক্ত করতে পারে।

— এফডিস্ক

Answer 5

সাফারি এবং ক্রোমের মতো ওয়েবকিট ব্রাউজারগুলি প্রস্থ গণনা করার সময় দৃশ্যমান পৃষ্ঠার প্রস্থ থেকে স্ক্রোল বার প্রস্থকে বিয়োগ করে: 100% বা 100vw। এ আরও ডিএম রাদারফোর্ডের স্ক্রোল করা এবং পৃষ্ঠা প্রস্থ ।

overflow-y: overlayপরিবর্তে ব্যবহার করার চেষ্টা করুন ।

Comments

দয়া করে একাধিক প্রশ্নের একই রকম উত্তর পোস্ট করবেন না। একটি ভাল উত্তর পোস্ট করুন, তারপরে অন্য প্রশ্নগুলিকে সদৃশ হিসাবে বন্ধ করতে ভোট / পতাকা দিন। যদি প্রশ্নটি সদৃশ না হয় তবে আপনার প্রশ্নের উত্তরগুলি শিখুন।

— পল রাউব

এটি কাজ করা উচিত, তবে ওভারলে এখনও স্ট্যান্ডার্ড নয় এটি সমস্ত ব্রাউজারে সমর্থিত নয়।

— জিয়া উল রেহমান মুঘল

দ্রুত

— হিচাপ

Answer 6

আমি যোগ করতে পারলাম

::-webkit-scrollbar { 
display: none; 
}

সরাসরি আমার সিএসএসে এবং এটি স্ক্রোলবারটিকে অদৃশ্য করে তুলবে তবে তবুও আমাকে স্ক্রোল করার অনুমতি দেয় (কমপক্ষে ক্রোমে)। আপনি যখন আপনার পৃষ্ঠায় একটি বিভ্রান্তিকর স্ক্রোলবারটি চান না তখন জন্য ভাল!

Comments

এটা তোলে কিছুটা ঝুঁকিপূর্ণ এবং ক্রস ব্রাউজার সমাধান যদিও stackoverflow.com/questions/9251354/...

— অ্যালেক্স Pyzhianov

Answer 7

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

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

কোডেপেনে একটি উদাহরণ দেখতে এখানে ক্লিক করুন

Answer 8

আমার অন্যান্য উত্তরটি এই মুহুর্তে ঠিক কাজ করছে বলে মনে হচ্ছে না (তবে আমি এটি কার্যকর করার চেষ্টা চালিয়ে যাব)।

তবে মূলত আপনাকে কী করতে হবে এবং এটি গতিশীলভাবে করার চেষ্টা করছিল তা, সামগ্রীর প্রস্থটি পিতামাতার, স্ক্রোলযোগ্য ফলকের চেয়ে কিছুটা কম সেট করা হয়েছে।
যাতে স্ক্রোলবারটি প্রদর্শিত হয় তখন এটি সামগ্রীতে কোনও প্রভাব ফেলবে না affect

এই EXAMPLE টি শো যে লক্ষ্য অর্জনের, hardcoding দ্বারা একটি হল hacky উপায় widthগুলি পরিবর্তে মাধ্যমে আমাদের জন্য এটা করতে ব্রাউজার পেতে চেষ্টা padding।
এটি যদি সম্ভব হয় তবে স্থায়ী স্ক্রোলবারটি না চাইলে এটি সর্বাধিক সহজ সমাধান।

Comments

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

— এসেমাদ

ভাল না হলে (সম্ভাব্যতার সাথে প্রত্যাশার ক্রমে): কেউ আমার অন্য উত্তরটি কীভাবে পাবেন (প্যাডিং বা মার্জিনের সাথে) কীভাবে তা নির্ধারণ করেন; আপনি নির্বাচিতভাবে প্যাডিং প্রয়োগ করতে মিডিয়া প্রশ্নগুলি কোনওভাবে ব্যবহার করতে পারেন ; বা সিএসএস এক্সপ্রেশন কার্যকরভাবে প্যাডিং প্রয়োগ করতে আধুনিক ব্রাউজারগুলিতে প্রয়োগ করা হয়। আমি মনে করি যে কেবল স্থায়ী স্ক্রোলবার বা স্ক্রোলবার সনাক্ত করতে জেএস ব্যবহার করা যাবার উপায়

— হাশব্রাউন

Answer 9

_{সম্পাদনা করুন: এই উত্তরটি এই মুহূর্তে একেবারেই সঠিক নয়, আমি এখানে কী করার চেষ্টা করছি তা দেখতে আমার অন্য উত্তরটি দেখুন। আমি এটি ঠিক করার চেষ্টা করছি, তবে আপনি যদি সহায়তা দিতে পারেন তবে মন্তব্যগুলিতে এটি করুন, ধন্যবাদ!}

ব্যবহার করা padding-rightহঠাৎ স্ক্রোলবারের উপস্থিতি প্রশমিত করবে m

EXAMPLE টি

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

Comments

আপনি কী ওএস এবং ব্রাউজার ব্যবহার করছেন তার উপর নির্ভর করে স্ক্রোলবার প্রস্থ পরিবর্তন করতে পারে। এটি 20px পাশাপাশি 40px

— Lwyrn

ভাল আপনি সমস্ত সম্ভাব্য মান সর্বাধিক ব্যবহার করতে চাই

— হ্যাশব্রাউন

কিছু ডিভাইস / ওএস ব্রাউজারের স্ক্রোলগুলির প্রস্থও নেই।

— সের্গেই গলিনি

Answer 10

.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

যেখানে 300 ডলার আমার ডায়ালগ উইন্ডো প্রস্থের অর্ধেক।

এটি আসলে আমার পক্ষে কাজ করেছে।

Answer 11

ক্রোমেও আমার একই সমস্যা ছিল। এটি কেবল তখনই ঘটেছিল যখন স্ক্রোল বারটি সর্বদা দৃশ্যমান থাকে। (সাধারণ সেটিংসে পাওয়া যায়) আমার একটি মডেল রয়েছে এবং আমি যখন মডেলটি খুলি তখন আমি লক্ষ্য করেছি যে ...

body {
    padding-left: 15px;
}

শরীরে যোগ করা হয়। এটি হওয়া থেকে বিরত রাখতে আমি যুক্ত করেছি

body {
    padding-left: 0px !important;
}

Answer 12

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

if(b.prop('scrollHeight')>b.height()){
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css({marginRight:'-'+scrollw+'px'});
}

বি.প্রপ ('স্ক্রোলহাইট') সর্বদা বি। হাইট () সমান,

আমি মনে করি এটি এর মতো হওয়া উচিত:

if(b.prop('scrollHeight')>window.innerHeight) ...

শেষ পর্যন্ত আমি একটি পদ্ধতির সুপারিশ করছি:

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}