সিএসএস ডিভ উপাদান - কেবলমাত্র অনুভূমিক স্ক্রোল বারগুলি কীভাবে দেখানো হবে?


200

আমার একটি ডিভ কনটেইনার রয়েছে এবং এর স্টাইলটি নীচে সংজ্ঞায়িত করেছি:

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

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

আমি এটা কিভাবে করবো?

উত্তর:


277

আপনি প্রয়োজনীয় সামগ্রীর জন্য যথেষ্ট পরিমাণে বড় না করে আপনি উভয় অনুভূমিক এবং উল্লম্ব স্ক্রোলবারগুলি পান না।

তবে আপনি সাধারণত কোনও বাগের কারণে আই-তে করেন। অন্যান্য ব্রাউজারগুলিতে (ফায়ারফক্স ইত্যাদি) পরীক্ষা করে দেখুন এটি আসলে কেবল আইই করছে কিনা তা জানতে।

আই 6-- (অন্যান্য ব্রাউজারগুলির মধ্যে) প্রস্তাবিত CSS3 এক্সটেনশনটিকে স্বাধীনভাবে স্ক্রোলবার সেট করতে সমর্থন করে, যা আপনি উল্লম্ব স্ক্রোলবারকে দমন করতে ব্যবহার করতে পারেন:

overflow: auto;
overflow-y: hidden;

আইই 8-এর জন্য আপনাকে যুক্ত করতেও পারে:

-ms-overflow-y: hidden;

যেহেতু মাইক্রোসফ্ট আইআর 8 স্ট্যান্ডার্ডস মোডে সমস্ত প্রাক-সিআর-স্ট্যান্ডার্ড সম্পত্তি তাদের নিজস্ব '-ms' বাক্সে স্থানান্তরিত করার হুমকি দিচ্ছে। (তারা যদি সর্বদা সেভাবে এটি করত তবে এটি বুঝতে পারত, তবে এখন সবার পক্ষে অসুবিধা হয়েছে))

অন্যদিকে এটি সম্পূর্ণরূপে সম্ভব IE8 যেভাবেই বাগটি ঠিক করে ফেলবে।


হে আল্লাহ, আপনি আমার দিন বাঁচিয়েছিলেন! যদিও আমি ই -8 অনুমানটি চেষ্টা করে দেখিনি। এটি ঠিক এখন এফএফ এবং আইই -7। এটাই আমার দরকার। আবার ধন্যবাদ !
সত্য কল্লুরি

76

আমাকে শৈলীতেও যুক্ত white-space: nowrap;করতে হয়েছিল, অন্যথায় উপাদানগুলি সেই অঞ্চলে মোড়ানো হবে যেখানে আমরা স্ক্রোল করার ক্ষমতাটি সরিয়ে দিচ্ছি।


8
white-space: nowrap;কী, এটি ব্যতীত আপনার উপাদানগুলি স্ট্যাক / মোড়ানো হবে।
রিকার্ডো জিয়া

সাদা স্পেস: ডিভ ডিসপ্লেটির ভিতরে যে চিত্রগুলি পেয়েছি তার সাথে এখন আরপ ফায়ারফক্স সাফারি বা ক্রোমে কাজ করছে বলে মনে হচ্ছে না: ইনলাইন বা ব্লক হিসাবে

27

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

.container{
    padding:20px;
    border:dotted 1px;
    white-space:nowrap;
    overflow-x:auto;
}

.box{
    width:100px;
    height:180px;
    background-color: red;
    margin:10px;
    display:inline-block
}

ডেমো একবার দেখুন


25

উভয়ই দেখানোর জন্য:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">      </div>

এক্স অক্ষটি লুকান:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">      </div>

ওয়াই অক্ষটি লুকান:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">      </div>

14

আপনি এটি তৈরি করতে পারেন এবং overflow: autoসর্বাধিক নির্দিষ্ট উচ্চতা এবং প্রস্থটি সেভাবে দিতে পারেন, যখন পাঠ্য বা সেখানে যা কিছু আছে, এটি কেবলমাত্র প্রয়োজনীয় স্ক্রোলবারটি প্রদর্শন করবে over


5

আমি সিএসএসের বৈশিষ্ট্যগুলি ব্যবহার করি: 1) " overflow-x: auto"; 2) " overflow-y: hidden"; 3) " white-space: nowrap";

ধারক এবং অভ্যন্তরীণ ডিআইভিএস উপাদান উভয়ের জন্য প্রস্থ নির্ধারণ করতে ভুলবেন না। বৈশিষ্ট্য "সাদা-স্থান: Nowrap" অভ্যন্তরীণ ডিআইভিএসকে একটি ভিন্ন লাইনে না ফেলে।

নিম্নলিখিত এইচটিএমএল বিবেচনা:

<div class="container"> 
  <div class="inner-1"></div>
  <div class="inner-2"></div>
  <div class="inner-3"></div>
</div>

আমি কেবল অনুভূমিক স্ক্রোলটি রাখতে নিম্নলিখিত সিএসএস ব্যবহার করি:

.container {
  height: 80px;
  width: 600px;
  overflow-x: auto;
  overflow-y: hidden; 
  white-space: nowrap;
}
.inner-1,.inner-2,.inner-3 {
  height: 60px;
  max-width: 250px;
 display: inline-block; /* this should fix it */
}

ফিডাল: https://jsfiddle.net/qrjh93x8/ (উপরের কোড দিয়ে কাজ করছে না)


আমি সাদা স্থান যুক্ত করেছি তবে আমার কাজ করছে না: jsfiddle.net/jjq4xgz5/1 । ধন্যবাদ।
সি 8

3

নিম্নলিখিত ব্যবহার

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >

1
.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px;  border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;}


.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;}
.box-author-txt ul li{ list-style-type:none;  width:140px; }

3
আপনার উত্তর ব্যাখ্যা করুন।
hims556

1

CSS3 এর overflow-xসম্পত্তি আছে তবে আমি এটির জন্য দুর্দান্ত সমর্থন আশা করবো না। ইন CSS 2 সব আপনি কি করতে পারেন একটি সাধারণ সেট করা হয় scrollনীতি এবং আপনার কাজ widthsএবং heightsতাদের জগাখিচুড়ি আপ না।


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.