আমি কীভাবে একটি ডিভের মধ্যে অনুভূমিক স্ক্রোলবারটি সরিয়ে ফেলব?

Question

যখন আমি সেট করি overflow: scroll, আমি অনুভূমিক এবং উল্লম্ব স্ক্রোলবারগুলি পাই।

ডিভের মধ্যে অনুভূমিক স্ক্রোলবারটি সরানোর কোনও উপায় আছে কি?

Answer 1

overflow-x: hidden;

Comments

ধন্যবাদ আপনি অনেক সময় সাশ্রয় করেছেন। কেউ এটি গ্রহণযোগ্য উত্তর plz হিসাবে চিহ্নিত করতে পারেন।

— নাগারাজন এসআর

এটি একটি খারাপ সমাধান। কারণ এই ক্ষেত্রে আপনি কেবল ধারক মধ্যে আনুভূমিক স্ক্রোলটি লুকান hide তবে এই ধারকটি খুব প্রশস্ত হলে আপনার সামগ্রীটি আপনার ধারকটিতে উপযুক্ত হবে না।

— অ্যালেক্স ফিলাটোভ

Answer 2

লিখতে ভুলবেন না overflow-x: hidden;

কোডটি হওয়া উচিত:

overflow-y: scroll;
overflow-x: hidden;

Answer 3

এর সাথে overflow-y: scroll, উল্লম্ব স্ক্রোলবারটি সর্বদা থাকবে না এমনকি এটির প্রয়োজন না হলেও। আপনি যদি চান যে ওয়াই-স্ক্রোলবারটি কেবল তখনই দৃশ্যমান হয় যখন এটি প্রয়োজন হয়, আমি এই কাজগুলি পেয়েছি:

.mydivclass {overflow-x: hidden; overflow-y: auto;}

Answer 4

সিএসএস

overflow-y: scroll;

এটি jsFizz এ দেখুন ।

লক্ষ করুন আপনি যদি সম্পত্তি -yথেকে অপসারণ করেন overflow-yতবে অনুভূমিক স্ক্রোল বারটি প্রদর্শিত হবে।

Answer 5

আপনার সিএসএসে এই কোডটি যুক্ত করুন। এটি অনুভূমিক স্ক্রোলবারটি অক্ষম করবে।

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Answer 6

কোনও স্ক্রোল নেই (x বা y উল্লেখ না করে):

.your-class {
   overflow: hidden;
}

অনুভূমিক স্ক্রোল সরান:

.your-class {
   overflow-x: hidden;
}

উল্লম্ব স্ক্রোল সরান:

.your-class {
   overflow-y: hidden;
}

Comments

— ওপির

Answer 7

অনুভূমিক স্ক্রোলবারটি গোপন করতে, আমরা কেবল প্রয়োজনীয় ডিভের স্ক্রোলবারটি নির্বাচন করতে এবং এটিতে সেট করতে পারি display: none;

একটি বিষয় লক্ষণীয় যে এটি কেবল ওয়েবকিট-ভিত্তিক ব্রাউজারগুলির জন্য কাজ করবে (যেমন ক্রোমের মতো) মোজিলার জন্য এমন কোনও বিকল্প উপলব্ধ নেই।

স্ক্রোলবারটি নির্বাচন করতে, ব্যবহার করুন ::-webkit-scrollbar

সুতরাং চূড়ান্ত কোডটি এরকম হবে:

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

Answer 8

অনুভূমিক স্ক্রোল বারটি সরাতে নিম্নলিখিত কোডটি ব্যবহার করুন। এটি 100% কাজ করে।

html, body {
    overflow-x: hidden;
}

Answer 9

আপনার যদি অনুভূমিকভাবে উপচে পড়া কোনও কিছু না পান তবে আপনি কেবল ব্যবহার করতে পারেন

overflow: auto;

এবং এটি শুধুমাত্র যখন প্রয়োজন হবে তখন স্ক্রোলবারগুলি প্রদর্শন করবে।

দেখুন সিএসএস ওভারফ্লো প্রপার্টি

Answer 10

ব্যবহার করুন:

overflow: auto;

এটি উল্লম্ব স্ক্রোলবারটি প্রদর্শন করবে এবং কেবলমাত্র উল্লম্ব ওভারফ্লো থাকলে তা অন্যথায় লুকানো থাকবে।

আপনার যদি উভয় x এবং y ওভারফ্লো হয় তবে এক্স এবং y উভয় স্ক্রোলবার প্রদর্শিত হবে।

এক্স (অনুভূমিক) স্ক্রোলবারটি গোপন করতে, উপস্থিত থাকলেও কেবল যোগ করুন:

overflow-x: hidden;

body {
    font-family: sans-serif;
}

.nowrap {
    white-space: nowrap;
}

.container {
    height: 200px;
    width: 300px;
    padding 10px;
    border: 1px solid #444;

    overflow: auto;
    overflow-x: hidden;
}

<div class="container">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
</ul>
</div>

Answer 11

লুকানোর জন্য scrollbar, তবে আচরণটি চালিয়ে যান।

div::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

---

এর সীমাবদ্ধতা রয়েছে।

• https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Answer 12

কোডটির এই অংশটি ব্যবহার করুন ..

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

Answer 13

আমি যেখানে ব্যবহার করছিলাম সেখানে আমার সমস্যা ছিল having

overflow: none;

তবে আমি জানতাম যে সিএসএস সত্যই এটি পছন্দ করে না এবং আমি এটি কীভাবে চাই তার জন্য এটি 100% কাজ করে না।

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

overflow: auto;