CSS ব্যবহার করে একটি দ্বি উলম্বভাবে স্ক্রোলযোগ্য করা aking

Question

এই

<div id="" style="overflow:scroll; height:400px;">

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

Comments

আছে overflow-xএবং overflow-yসিএসএস 3, যা না আপনি যা চান তা।

— মার্ক বি

Answer 1

আপনি এটিকে ভুল সম্পত্তি ব্যবহার থেকে দূরে রেখেছেন। স্ক্রলবার কোনো সম্পত্তি সঙ্গে আলোড়ন সৃষ্টি করা যেতে পারে overflow, overflow-xঅথবা overflow-yএবং প্রতিটি কোন সেট করা যেতে পারে visible, hidden, scroll, auto, অথবা inherit। আপনি বর্তমানে এই দু'এর দিকে তাকাচ্ছেন:

• auto- এই মানটি বাক্সের প্রস্থ এবং উচ্চতার দিকে নজর দেবে। যদি সেগুলি সংজ্ঞায়িত করা হয় তবে এটি বাক্সটিকে সেই সীমানাগুলির বিস্তৃত হতে দেবে না। পরিবর্তে (যদি বিষয়বস্তুগুলি এই সীমাগুলি অতিক্রম করে), এটি উভয় সীমানা (বা উভয়) এর জন্য একটি স্ক্রোলবার তৈরি করবে যা এর দৈর্ঘ্য অতিক্রম করবে।

• scroll- এই মান বাহিনীর একটি স্ক্রলবার, সেটা ব্যাপার এমনকি যদি বিষয়বস্তু সীমানা সেট অতিক্রম না কি। যদি সামগ্রীটি স্ক্রোল করার প্রয়োজন না হয় তবে বারটি "অক্ষম" বা অ-ইন্টারেক্টিভ হিসাবে উপস্থিত হবে।

আপনি যদি সর্বদা উল্লম্ব স্ক্রোলবারটি প্রদর্শিত চান:

আপনার ব্যবহার করা উচিত overflow-y: scroll। এটি কোনও প্রয়োজন কিনা বা উল্লম্ব অক্ষের জন্য প্রদর্শিত একটি স্ক্রোলবারকে বাধ্য করে । আপনি যদি প্রকৃতপক্ষে প্রসঙ্গটি স্ক্রোল করতে না পারেন তবে এটি "অক্ষম" স্ক্রোলবার হিসাবে উপস্থিত হবে।

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

শুধু ব্যবহার overflow: auto। যেহেতু আপনার কন্টেন্টটি ডিফল্টরূপে কেবলমাত্র পরবর্তী লাইনে বিভক্ত হয় যখন এটি বর্তমান লাইনে ফিট করে না, তাই একটি অনুভূমিক স্ক্রোলবার তৈরি করা হবে না (যদি না এটি এমন কোনও উপাদানের উপরে থাকে যা শব্দ-মোড়ানো অক্ষম করে না)। উল্লম্ব বারের জন্য, এটি সামগ্রীটি আপনার নির্দিষ্ট করা উচ্চতা পর্যন্ত প্রসারিত করতে দেবে। এটি যদি উচ্চতা ছাড়িয়ে যায়, তবে বাকি সামগ্রীগুলি দেখার জন্য এটি একটি উল্লম্ব স্ক্রোলবারটি দেখায়, তবে উচ্চতা অতিক্রম না করলে কোনও স্ক্রোলবার প্রদর্শন করবে না।

Comments

ওভারফ্লো ব্যবহার করে: অটো কোনওভাবে পৃষ্ঠার নীচে একটি বিশাল খালি স্থান তৈরি করে। এটি কি সাধারণ ঘটনা?

— বোকা.ফ্যাট.টি.টি.

Answer 2

এই মত চেষ্টা করুন।

<div style="overflow-y: scroll; height:400px;">

Comments

ভাল সমাধান, তবে উচ্চতা নির্বিশেষে স্ক্রোলটি সর্বদা দৃশ্যমান

— FindOutIslamNow

যদি আপনি ওভারফ্লো-ওয়াই মানটিকে 'অটো' তে সেট করেন তবে স্ক্রোলটি নির্ধারিত উচ্চতার পরে দৃশ্যমান হবে। উদাহরণস্বরূপ <ডিভ স্টাইল = "ওভারফ্লো-ওয়াই: অটো; উচ্চতা: 200">

— উমায়ের গুল

Answer 3

100% ভিউপোর্ট উচ্চতার ব্যবহারের জন্য:

overflow: auto;
max-height: 100vh;

Answer 4

overflow-y: auto;ডিভি ব্যবহার করুন।

এছাড়াও, আপনার প্রস্থটিও ঠিক করা উচিত।

Comments

প্রস্থকে আবশ্যক করা কেন আবশ্যক?

— লিগি

@ লাইগি ডিভের সামগ্রীটি ডিভ সীমানার বাইরে চলে গেছে এবং এভাবে স্ক্রোল সক্ষম করতে হবে কিনা তা গণনা করতে আপনার প্রস্থের প্রয়োজন।

— রবার্তো বনিনি 13

প্রস্থটি কি 100% ডিফল্ট নয়?

— লিগি

@ লিগি না, এটি autoডিফল্টরূপে। সাধারণত, এর অর্থ পিতামাতার প্রস্থের 100%, তবে সবসময় নয়।

— মাদারার ঘোস্ট

Answer 5

পরিবর্তে আপনি এই কোডটি ব্যবহার করতে পারেন।

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

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

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

Answer 6

আপনি overflow-y: scrollউল্লম্ব স্ক্রোলিংয়ের জন্য ব্যবহার করতে পারেন ।

<div  style="overflow-y:scroll; height:400px; background:gray">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
 </div>

Answer 7

আমার জন্য এই উত্তরগুলির সমস্তগুলির সাথে সমস্যা হ'ল তারা প্রতিক্রিয়াশীল ছিল না। পিতামাতার ডিভের জন্য আমার একটি নির্দিষ্ট উচ্চতা থাকতে হয়েছিল যা আমি চাইনি। আমি মিডিয়া প্রশ্নের সাথে প্রায় ডোন সময় কাটাতে চাইনি want আপনি যদি কৌণিক ব্যবহার করছেন তবে আপনি বুটস্ট্র্যাপ ট্যাবসেট ব্যবহার করতে পারেন এবং এটি আপনার জন্য সমস্ত কঠোর পরিশ্রম করবে। আপনি অভ্যন্তরীণ সামগ্রী স্ক্রোল করতে সক্ষম হবেন এবং এটি প্রতিক্রিয়াশীল হবে। আপনি যখন ট্যাবটি সেটআপ করেন, এটি এটির মতো করুন: $scope.tab = { title: '', url: '', theclass: '', ative: true };মূল বিষয়টি হল, আপনি কোনও শিরোনাম বা চিত্রের আইকনটি চান না। তারপরে সিএসের মতো ট্যাবটির বাহ্যরেখাটি লুকান:

.nav-tabs {
   border-bottom:none; 
} 

এবং এটি .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} এবং অবশেষে অদৃশ্য ট্যাবটি সরাতে আপনি যদি এটি প্রয়োগ না করেন তবে আপনি এখনও ক্লিক করতে পারেন:.nav > li > a {padding:0px;margin:0px;}