একটি HTML পৃষ্ঠায় স্ক্রোল বারটি আড়াল করা iding

Question

স্ক্রোল বারটি লুকানোর জন্য সিএসএস ব্যবহার করা যেতে পারে? আপনি এই কিভাবে করবেন?

Comments

@UweKeim সেখানে IE11 জন্য কোন চালাকি

— ডেভ

Answer 1

overflow: hidden;এটির মতো বডি ট্যাগ সেট করুন:

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

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

আপনি যদি কেবল উল্লম্ব স্ক্রোলবারটি আড়াল করতে চান তবে ব্যবহার করুন overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

এবং যদি আপনি কেবল অনুভূমিক স্ক্রোলবারটি আড়াল করতে চান তবে ব্যবহার করুন overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

---

দ্রষ্টব্য: এটি স্ক্রোলিং বৈশিষ্ট্যটিও অক্ষম করবে। আপনি যদি কেবল স্ক্রোল বারটি আড়াল করতে চান তবে নীচের উত্তরগুলি দেখুন তবে স্ক্রোল বৈশিষ্ট্যটি নয়।

Comments

ওভারফ্লো সম্পত্তির জন্য কোনও "কিছুই নয়" বিকল্প নেই। উপলভ্য বিকল্পগুলির মধ্যে রয়েছে: দৃশ্যমান, লুকানো, স্ক্রোল, অটো, উত্তরাধিকারী।

— সের্গেই সোকোলেঙ্কো

আসলে, এটি সম্পূর্ণরূপে সঠিক উত্তর নয়: ওভারফ্লো: লুকানো স্ক্রোলবারটি "আড়াল" করে না। এটি পৃষ্ঠায় স্ক্রোলিং বৈশিষ্ট্যটিও বন্ধ করে দেয়। আমরা যা চাই ঠিক তা নয়।

— অ্যাড্রেডিনেট

ক্রোমে, যখন বডি ওভারফ্লোটি hiddenস্ক্রোলিংয়ে সেট করা থাকে তখন মাউস স্ক্রোলার চাকা দিয়ে কাজ করবে। ফায়ারফক্সে, স্ক্রোলিং মাউস স্ক্রোলার চাকা দিয়ে কাজ করবে না, এটি বের করতে আমার কিছুটা সময় লেগেছে।

— ডগ মোলিনাক্স

আমি দৃ as়তার সাথে দেখছি না যে overflow: hiddenস্ক্রোলিং অক্ষম করে। যদি কেউ স্ক্রোলবারটি আড়াল করতে চান, তবে সম্ভবত তারা নিয়ন্ত্রণটিকে অপ্রয়োজনীয় বলে মনে করেন কারণ প্রথম স্থানে স্ক্রোল করার কোনও সামগ্রী নেই । অথবা সম্ভবত তারা পুরোপুরি স্ক্রোলিংয়ের অনুমতি দিতে চান না ।

— বোল্টক্লক

আমার কাছে এই দাবিটি পুরোপুরি বৈধ, কারণ প্রশ্নটি স্ক্রোলবারটি আড়াল করা , স্ক্রোলিং অক্ষম করার জন্য নয় ।

— sboisse

Answer 2

ওয়েবকিট স্ট্রোলবার সিউডো উপাদানগুলিকে সমর্থন করে যা স্ট্যান্ডার্ড সিএসএস বিধি দিয়ে লুকানো যেতে পারে:

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

আপনি যদি সমস্ত স্ক্রোলবারগুলি গোপন রাখতে চান তবে ব্যবহার করুন

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

আমি পুনরুদ্ধার সম্পর্কে নিশ্চিত নই - এটি কাজ করেছে তবে এটি করার সঠিক উপায় থাকতে পারে:

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

আপনি অবশ্যই সর্বদা ব্যবহার width: 0করতে পারেন , যা সহজেই এর মাধ্যমে পুনরুদ্ধার করা যায় width: autoতবে আমি widthদৃশ্যমানতার টুইটগুলির জন্য গালি দেওয়ার ভক্ত নই ।

ফায়ারফক্স 64 এখন পরীক্ষামূলক স্ক্রোলবার-প্রস্থ সম্পত্তি ডিফল্টরূপে সমর্থন করে (63 সেট করার জন্য একটি কনফিগারেশন পতাকা প্রয়োজন)। ফায়ারফক্স in৪ এ স্ক্রোলবারটি গোপন করতে:

#element {
    scrollbar-width: none;
}

আপনার বর্তমান ব্রাউজারটি সিউডো উপাদানটিকে সমর্থন করে কিনা তা দেখতে scrollbar-width, এই স্নিপেটটি ব্যবহার করে দেখুন:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

---

(দ্রষ্টব্য যে এটি সত্যিকারের প্রশ্নের সঠিক উত্তর নয়, কারণ এটি অনুভূমিক বারগুলিও লুকিয়ে রাখে, তবে গুগল আমাকে এখানে নির্দেশ করার সময় আমি যা খুঁজছিলাম, তাই আমি বুঝতে পেরেছিলাম এটি যেভাবেই পোস্ট করব))

Comments

স্ক্রোলবারগুলি আমি গোপন করতে চেয়েছিলাম তবে উপাদানগুলি এখনও স্ক্রোলযোগ্য (যেমন আপ / ডাউন কী)

— ম্যাথিয়াস

এটি সর্বোত্তম উত্তর হওয়া উচিত যেহেতু অন্যান্য সমাধানগুলি আপনাকে স্ক্রোল করতে দেয় না

— এখন

এটি কি ওয়েবকিট বাদে অন্য ব্রাউজারগুলিকে সমর্থন করে? কারণ এটি মজিলায় কাজ করে না।

— রূপম দত্ত

যদিও মজিলা ট্র্যাকারে একটি বৈশিষ্ট্য অনুরোধ রয়েছে। আপনি এটির জন্য এখানে ভোট দিয়ে বাস্তবায়নকে দ্রুত করতে সক্ষম হতে পারেন :)

— পিটার

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

— লিওন গাবান

Answer 3

হ্যাঁ, সাজানো ..

আপনি যখন এই প্রশ্নটি জিজ্ঞাসা করবেন, "কোনও ব্রাউজারের স্ক্রোল বারগুলি কেবল লুকানো বা ছদ্মবেশযুক্ত না করে" কীভাবে কোনও উপায়ে মুছে ফেলা যায় ", সবাই বলবে" সম্ভব নয় "কারণ একটি ব্রাউজারের সমস্ত ব্রাউজার থেকে স্ক্রোলবারগুলি সরানো সম্ভব নয়। সুসংগত এবং ক্রস-সামঞ্জস্যপূর্ণ উপায় এবং তারপরে ব্যবহারযোগ্যতার পুরো যুক্তি রয়েছে।

তবে আপনি যদি নিজের ওয়েবপৃষ্ঠাকে ওভারফ্লো করতে না দিয়ে থাকেন তবে স্ক্রোলবারগুলি তৈরি ও প্রদর্শন করা প্রয়োজন থেকে ব্রাউজারটিকে কখনও আটকাতে পারা সম্ভব।

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

ওভারফ্লো লুকানো সহ একটি ডিভ তৈরি করুন। ব্যবহারকারী কখন স্ক্রোল করার চেষ্টা করে তা সনাক্ত করুন তবে তা করতে অক্ষম কারণ আমরা ব্রাউজারগুলিকে ওভারফ্লো: গোপন .. দিয়ে স্ক্রোল করার ক্ষমতাটি অক্ষম করে রেখেছি এবং পরিবর্তে জাভা স্ক্রিপ্ট ব্যবহার করে সামগ্রীটি সরিয়ে নিয়ে যায় this ব্রাউজারগুলির ডিফল্ট স্ক্রোলিং ছাড়াই আমাদের নিজস্ব স্ক্রোলিং তৈরি করা বা আইস্ক্রোলের মতো প্লাগইন ব্যবহার করা ।

---

পুরোপুরি হওয়ার জন্য; স্ক্রোল-বারগুলি ম্যানিপুলেট করার সমস্ত বিক্রেতা নির্দিষ্ট উপায়:

ইন্টারনেট এক্সপ্লোরার 5.5+

* এই বৈশিষ্ট্যগুলি কখনই সিএসএসের স্পেসিফিকেশনের অংশ ছিল না, এগুলি কখনও অনুমোদিত বা বিক্রেতার উপসর্গীকৃত হয়নি, তবে তারা ইন্টারনেট এক্সপ্লোরার এবং কনকরার-এ কাজ করে। এগুলি প্রতিটি অ্যাপ্লিকেশনের জন্য ব্যবহারকারীর স্টাইল শীটে স্থানীয়ভাবে সেট করা যেতে পারে। ইন্টারনেট এক্সপ্লোরারে আপনি এটি "অ্যাক্সেসিবিলিটি" ট্যাবের অধীনে, কনকরার-এ "স্টাইলশিট" ট্যাবের অধীনে দেখতে পাবেন।

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

ইন্টারনেট এক্সপ্লোরার 8-এর হিসাবে এই বৈশিষ্ট্যগুলি মাইক্রোসফ্ট দ্বারা উপস্থাপকযুক্ত ছিল, কিন্তু তারা এখনও ডাব্লু 3 সি দ্বারা অনুমোদিত হয় নি ।

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

ইন্টারনেট এক্সপ্লোরার সম্পর্কে আরও বিশদ

ইন্টারনেট এক্সপ্লোরার scrollউপলভ্য করে যা স্ক্রোল বারগুলি অক্ষম করতে বা সক্ষম করে না তা নির্ধারণ করে; এটি স্ক্রোল বারগুলির অবস্থানের মান পেতেও ব্যবহার করা যেতে পারে।

মাইক্রোসফ্ট ইন্টারনেট এক্সপ্লোরার 6 এবং এর পরে, আপনি যখন !DOCTYPEমান-অনুবর্তী মোড নির্দিষ্ট করার জন্য ঘোষণাটি ব্যবহার করেন , এই বৈশিষ্ট্যটি এইচটিএমএল উপাদানটিতে প্রযোজ্য। মান-অনুবর্তী মোড নিদিষ্ট না থাকে, তাহলে Internet Explorer এর আগের ভার্সন এর মতই এগুলো অ্যাট্রিবিউট প্রযোজ্য BODYউপাদান নয়HTML উপাদান।

এটিও লক্ষণীয় যে System.Windows.Controls.Primitivesপ্রেজেন্টেশন ফ্রেমওয়ার্কে .NET স্ক্রোলবার শ্রেণীর সাথে কাজ করার সময় স্ক্রোলবারগুলি রেন্ডারিংয়ের জন্য দায়ী।

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

• দুটিই MSDN। বেসিক ইউআই বৈশিষ্ট্য
• W3C এর। অ-মানক স্ক্রোলবার বৈশিষ্ট্য সম্পর্কে
• দুটিই MSDN। .NET স্ক্রোলবার ক্লাস

---

ওয়েবকিট

স্ক্রোল-বার কাস্টমাইজেশন সম্পর্কিত ওয়েবকিট এক্সটেনশনগুলি হ'ল:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

এগুলি প্রতিটি অতিরিক্ত ছদ্ম-নির্বাচকদের সাথে একত্রিত করা যেতে পারে:

• :horizontal - অনুভূমিক সিউডো-শ্রেণি যে কোনও স্ক্রোলবারের টুকরোতে অনুভূমিক প্রবণতা রয়েছে তার জন্য প্রযোজ্য।
• :vertical - উল্লম্ব সিউডো-বর্গটি যে কোনও স্ক্রোলবারের টুকরোগুলির ক্ষেত্রে প্রযোজ্য যা উলম্ব দিক রয়েছে or
• :decrement- হ্রাসযুক্ত সিউডো-ক্লাস বোতাম এবং ট্র্যাকের টুকরাগুলিতে প্রযোজ্য। এটি বাটন বা ট্র্যাক টুকরা ব্যবহারের সময় দৃশ্যের অবস্থান হ্রাস করবে কিনা তা নির্দেশ করে (যেমন, একটি উল্লম্ব স্ক্রোলবারের উপরে, একটি অনুভূমিক স্ক্রোলবারে বামে)।
• :increment- ইনক্রিমেন্ট সিউডো-ক্লাস বোতাম এবং ট্র্যাকের টুকরাগুলিতে প্রযোজ্য। এটি কোনও বাটন বা ট্র্যাক টুকরা ব্যবহার করার সময় দৃশ্যের অবস্থান বৃদ্ধি করবে কিনা তা নির্দেশ করে (যেমন, উল্লম্ব স্ক্রোলবারের নীচে, অনুভূমিক স্ক্রোলবারের উপরে))
• :start- সূচনা সিউডো-ক্লাস বোতাম এবং ট্র্যাকের টুকরাগুলিতে প্রযোজ্য। এটি নির্দেশ করে যে বস্তুটি থাম্বের আগে স্থাপন করা হয়েছে।
• :end- শেষ সিউডো-ক্লাস বোতাম এবং ট্র্যাক টুকরা প্রয়োগ করে। এটি নির্দেশ করে যে বস্তুটি থাম্বের পরে স্থাপন করা হয়েছে।
• :double-button- ডাবল বোতাম সিউডো-ক্লাস বোতাম এবং ট্র্যাক টুকরা প্রয়োগ করে। এটি কোনও বোতাম কোনও স্ক্রোলবারের একই প্রান্তে একত্রে থাকা বোতামগুলির একটি অংশের অংশ কিনা তা সনাক্ত করতে ব্যবহৃত হয়। ট্র্যাক টুকরোগুলির জন্য এটি ট্র্যাক টুকরা এক বোতামের বোতাম বন্ধ রাখে কিনা তা নির্দেশ করে।
• :single-button- সিঙ্গল-বাটন সিউডো-ক্লাস বোতাম এবং ট্র্যাক টুকরা প্রয়োগ করে। স্ক্রোলবারের শেষে একটি বোতাম নিজেই আছে কিনা তা সনাক্ত করতে এটি ব্যবহার করা হয়। ট্র্যাক টুকরোগুলির জন্য এটি ট্র্যাক টুকরা একটি সিঙ্গলটন বোতাম বন্ধ রাখে কিনা তা নির্দেশ করে।
• :no-button - টুকরোগুলি ট্র্যাক করার ক্ষেত্রে প্রযোজ্য এবং ট্র্যাক টুকরা স্ক্রোলবারের প্রান্তে চলে কিনা তা নির্দেশ করে, অর্থাত্ ট্র্যাকের সেই প্রান্তে কোনও বোতাম নেই।
• :corner-present - সমস্ত স্ক্রোলবার টুকরা প্রয়োগ করে এবং স্ক্রোলবার কোণার উপস্থিত কিনা তা নির্দেশ করে।
• :window-inactive- সমস্ত স্ক্রোলবার টুকরাগুলিতে প্রয়োগ হয় এবং স্ক্রোলবারযুক্ত উইন্ডোটি বর্তমানে সক্রিয় রয়েছে কিনা তা নির্দেশ করে। (সাম্প্রতিক রাত্রে, এই ছদ্ম-শ্রেণি এখন :: নির্বাচনের ক্ষেত্রেও প্রযোজ্য any যে কোনও বিষয়বস্তু নিয়ে কাজ করার জন্য এবং এটিকে একটি নতুন স্ট্যান্ডার্ড ছদ্ম-শ্রেণির প্রস্তাব দেওয়ার জন্য আমরা এটি বাড়ানোর পরিকল্পনা করছি))

এই সংমিশ্রণের উদাহরণ

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

• স্টাইলিং স্ক্রোলবারস - ওয়েবকিট.অর্গ

ক্রোম সম্পর্কে আরও বিশদ

অ্যাড উইন্ডোস্ক্রোলহ্যান্ডলার পাবলিক স্ট্যাটিক হ্যান্ডলার রেজিস্ট্রেশন অ্যাড উইন্ডোস্ক্রোলহ্যান্ডলার (উইন্ডো.স্রোকল হ্যান্ডলার হ্যান্ডলার)

  একটি উইন্ডো যুক্ত করুন cসক্রোলএভেন্ট হ্যান্ডলার পরামিতি: হ্যান্ডলার - হ্যান্ডলার রিটার্নস: হ্যান্ডলার নিবন্ধকরণ [ উত্স ] ফেরত দেয় ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )

---

মোজিলা

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

• -moz-scrollbars-none তারা ওভারফ্লো ব্যবহার করার পরামর্শ দেয়: এর জায়গায় লুকানো।
• -moz-scrollbars-horizontal ওভারফ্লো-এক্স এর অনুরূপ
• -moz-scrollbars-vertical ওভারফ্লো-ওয় এর অনুরূপ

• -moz-hidden-unscrollableশুধুমাত্র ব্যবহারকারীর প্রোফাইল সেটিংসের মধ্যে অভ্যন্তরীণভাবে কাজ করে। এক্সএমএল মূল উপাদানগুলি স্ক্রোলিং অক্ষম করে এবং ওয়েব পৃষ্ঠাগুলি স্ক্রোল করতে তীর কী এবং মাউস হুইল ব্যবহার করে অক্ষম করে।

• 'ওভারফ্লো' তে মজিলা বিকাশকারী ডক্স

মজিলা সম্পর্কে আরও বিশদ

আমি যতদূর জানি এটি সত্যই কার্যকর নয় তবে এটি লক্ষণীয় যে ফায়ারফক্সে স্ক্রোলবারগুলি প্রদর্শিত হবে কিনা তা নিয়ন্ত্রণ করে এমন বৈশিষ্ট্যটি হল ( রেফারেন্স লিঙ্ক ):

• বৈশিষ্ট্য:        স্ক্রোলবারগুলি
• প্রকার:               nsIDOMBarProp
• বর্ণনা:   যে বস্তুটি স্ক্রোলবারগুলি উইন্ডোতে প্রদর্শিত হবে কিনা তা নিয়ন্ত্রণ করে। এই বৈশিষ্ট্যটি জাভাস্ক্রিপ্টে "প্রতিস্থাপনযোগ্য"। শুধুমাত্র পাঠযোগ্য

সর্বশেষ তবে অন্তত নয়, প্যাডিং ম্যাজিকের মতো।

যেমনটি আগে অন্য কয়েকটি উত্তরে উল্লিখিত হয়েছে, এখানে একটি চিত্র রয়েছে যা যথেষ্ট পরিমাণে স্ব-বর্ণনামূলক।

---

ইতিহাস পাঠ

আমি কৌতূহলী হওয়ার কারণে, আমি স্ক্রোলবারগুলির উত্স সম্পর্কে জানতে চেয়েছিলাম এবং এগুলি আমি খুঁজে পেয়েছি সেরা রেফারেন্স।

• স্ক্রোলিং এবং স্ক্রোলবারগুলিতে 10 টি আবিষ্কার
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

বিবিধ

এইচটিএমএল 5 স্পেসিফিকেশন খসড়ায়, seamlessআইফ্রেমে স্ক্রোল-বারগুলি উপস্থিত হওয়া থেকে রোধ করার জন্য বৈশিষ্ট্যটি সংজ্ঞায়িত করা হয়েছিল যাতে তারা কোনও পৃষ্ঠায় আশেপাশের সামগ্রীর সাথে মিশ্রিত হতে পারে । যদিও এই উপাদানটি সর্বশেষ সংশোধনীতে প্রদর্শিত হবে না।

scrollbarBarProp বস্তুর শিশু windowবস্তু এবং ইউজার ইন্টারফেস উপাদান করে একটি স্ক্রলিং প্রক্রিয়া, অথবা কিছু অনুরূপ ইন্টারফেসের ধারণা রয়েছে প্রতিনিধিত্ব করে। স্ক্রোল বারগুলি দৃশ্যমান হলে window.scrollbars.visibleফিরে আসবে true।

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

ইতিহাস এপিআইতে পৃষ্ঠা লোডে স্ক্রোল অবস্থানটি ধরে রাখতে পৃষ্ঠা নেভিগেশনে স্ক্রোল পুনরুদ্ধারের বৈশিষ্ট্যগুলিও রয়েছে।

window.history.scrollRestorationস্ক্রোলেরস্টেরেশনের অবস্থা যাচাই বা তার স্থিতি পরিবর্তন করতে ব্যবহার করা যেতে পারে (সংযোজন ="auto"/"manual"। স্বয়ংক্রিয় ডিফল্ট মান manual আপনার যদি প্রয়োজন হয়, আপনি ইতিহাস.pushState () সহ ইতিহাসের এন্ট্রিগুলিকে ধাক্কা দেওয়ার সাথে সাথে আপনি স্ক্রোলের অবস্থানটি ট্র্যাক করে রাখতে পারেন।

---

আরও পড়া:

• উইকিপিডিয়ায় স্ক্রোলবার
• স্ক্রোল বার (উইন্ডোজ)
• স্ক্রোল পদ্ধতি
• স্ক্রোল পদ্ধতি - মাইক্রোসফ্ট ডেভ নেটওয়ার্ক
• আইথক্রোল গিথুব (উপরের প্রথম বিভাগে রেফারেন্স)
• স্ক্রোলিং এবং স্ক্রোলবারগুলি Jakob Nielsen দ্বারা ব্যবহারযোগ্যতা সম্পর্কে একটি নিবন্ধ

উদাহরণ

• বডি স্ক্রোলবিহীন স্বতন্ত্র স্ক্রোলিং প্যানেলগুলি (কেবল CSS ব্যবহার করে) - বেন ফ্রেন (10-21-2014)

Comments

এই উত্তরটি বর্তমানে আপভোভিত উত্তরের চেয়ে উল্লেখযোগ্যভাবে আরও ব্রাউজারগুলিতে (যেমন আইই) প্রযোজ্য।

— ম্যাট জেনসেন

দুর্দান্ত সংযোজন। বাস্তবে আজ সেই একই সমাধান বাস্তবায়ন! উল্লেখযোগ্য যে অন্য উপাদানটি উপচে পড়া উচিত: লুকানো;

— ম্যাট জেনসেন

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

— নিউশোর্টস

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

— শাইনিংলাইট

ম্যাকস হাই সিয়েরায় ফায়ারফক্স কোয়ান্টাম .0৩.০.১, এমনকি 'ওভারফ্লো: -মজ-স্ক্রোলবারস-নন' রুল দিয়েও স্ক্রোলবারটি আড়াল করে না। এর সমাধান কি কেউ জানে? অন্য সমস্ত ব্রাউজার প্রস্তাবিত সমাধানগুলির সাথে কাজ করে বলে মনে হচ্ছে।

— সিমোনা আদ্রিয়ানি

Answer 4

আপনি এটি একটি মোড়কের সাহায্যে সম্পন্ন করতে পারেন divযার ওভারফ্লো লুকিয়ে রয়েছে এবং অভ্যন্তরীণ divসেটটি এতে রয়েছে auto।

অভ্যন্তরের divস্ক্রোল বারটি সরাতে , আপনি divএটি অভ্যন্তরের অভ্যন্তরে নেতিবাচক মার্জিন প্রয়োগ করে বাইরের ভিউপোর্টের বাইরে টানতে পারেন div। তারপরে অভ্যন্তরীণ ডিভের জন্য সমান প্যাডিং প্রয়োগ করুন যাতে সামগ্রীটি দৃশ্যমান থাকে।

JSFiddle

এইচটিএমএল

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

সিএসএস

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

Comments

এটি গ্রহণযোগ্য উত্তর ইমো হওয়া উচিত। আমি শুধু যোগ করার জন্য ছিল height: inheritedমধ্যে .viewportCSS।

— হেলজগেট

এই উত্তরের সাথে একমাত্র সমস্যা হ'ল সরানো স্ক্রোলবারের "মৃত" স্থানটি, কারণ প্যাডিং থেকে বিয়োগ করতে আমরা আসলে স্ক্রোলবারের প্রস্থটি জানি না।

— ফ্রেন্ডর

এছাড়াও, প্যাডিং এবং মার্জিনগুলির জন্য আপনাকে স্থির মানগুলি ব্যবহার করার দরকার নেই। 100%আরও বহুমুখী এবং কাজ করে।

— ফ্রেন্ডর

আইই ১১, অপেরা এবং ক্রোমে কর্মরত, এখনও ফায়ারফক্স পরীক্ষা করেনি। এটি দুর্দান্ত উত্তর, +1।

— প্রায় এক শিক্ষানবিশ

কেন -100pxএবং 100px??

— ওল্ডবয়

Answer 5

এটি সাধারণ সিএসএস বৈশিষ্ট্য নিয়ে আমার জন্য কাজ করে:

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

ফায়ারফক্সের পুরানো সংস্করণগুলির জন্য, ব্যবহার করুন: overflow: -moz-scrollbars-none;

Comments

দুর্ভাগ্যক্রমে, ম্যাকস সিয়েরায় এটি ফায়ারফক্সে 48.0.2 এ কাজ করে না। আপনি যদি তা করেন overflow: -moz-scrollbars-none;তবে আপনি সফলভাবে স্ক্রোলবারটি সরিয়ে ফেলবেন, তবে আপনি স্ক্রোল করার ক্ষমতাও সরিয়ে ফেলবেন। আপনি পাশাপাশি ঠিক সেট overflow: hiddenকরতে পারেন .container।

— মার্টিন চেম্বারলিন

ওহ, এবং বিকাশকারী.মোজিলা.আর. / -moz-scrollbars-noneএর- ইউএস / ডকস / ওয়েবে / সিএসএস / ওভারফ্লো থেকে আমরা এই সম্পর্কে পড়ি : "এটি একটি অপ্রচলিত এপিআই এবং এটি আর কাজ করার নিশ্চয়তা দেয় না।"

— মার্টিন চেম্বারলিন

ফায়ারফক্সের সর্বশেষ সমর্থন সহ আমি আমার উত্তর আপডেট করেছি :)

— Hristo Eftimov

Answer 6

এখানে আমার সমাধানটি দেওয়া হয়েছে, যা তাত্ত্বিকভাবে সমস্ত আধুনিক ব্রাউজারগুলি কভার করে:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html আপনি যে স্ক্রোলবারটি আড়াল করতে চান তার সাথে প্রতিস্থাপন করা যেতে পারে।

_{দ্রষ্টব্য : আমি পোস্ট করছি যে কোডটি ইতিমধ্যে প্রচ্ছদ করা হয়েছে কিনা তা দেখার জন্য আমি অন্য 19 টি উত্তর স্কিম করে দিয়েছি এবং মনে হয় যে 2019 এ যেমন দাঁড়িয়েছে তেমন কোনও উত্তরই পরিস্থিতিটির সমান নয়, যদিও তাদের বেশিরভাগই বিশদ বিবরণে যায়। এটি অন্য কারো দ্বারা বলা হয়েছে এবং আমি এটি মিস করেছি যদি দুঃখিত।}

Comments

এখানে সবচেয়ে

— আন্ডাররেটেড

কেবলমাত্র সমাধান যা আমার স্ক্রোল-দুঃস্বপ্নকে স্থির করেছে: ডি ধন্যবাদ!

— বুমড্রাক

Answer 7

আমি মনে করি আপনি এখনও আগ্রহী হলে আমি আপনাকে ছেলের জন্য একটি কাজের সন্ধান পেয়েছি। এটি আমার প্রথম সপ্তাহ, তবে এটি আমার জন্য কাজ করেছে ...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

Comments

ক্রোম এবং ফায়ারফক্সে আমার জন্য কাজ করে, আইই বা অন্য কোনও ব্রাউজার পরীক্ষা করেনি। jsfiddle.net/8xtfk729

— বেন ডেভিস

ক্রোমে (কমপক্ষে v54), এটি কোনও কারণে স্ক্রোল হুইলের মাধ্যমে স্ক্রোলিং অক্ষম করে। তীর কীগুলির মাধ্যমে স্ক্রোল করুন, হোম / এন্ড / পিজি ডাউন / পিজি আপ, টাচ ফ্লিক এবং মাউস 3 ক্লিক এন টানুন এখনও কাজ করে।

— 3272

এই উত্তরটি বৈধ, এটি আসলে কাজ করে এবং ব্রাউজারগুলির জুড়ে কাজ করে বলে মনে হয়।

— স্যাম

এটি আমার দিকে গোটা ডিভ লুকিয়ে রাখে

— জনি

Answer 8

আপনি যদি মোবাইল ডিভাইসের জন্য কোনও স্ক্রোলবারটি লুকানোর কোনও সমাধান খুঁজছেন, তবে পিটারের উত্তরটি অনুসরণ করুন !

এখানে একটি jsfiddle , যা নীচের সমাধানটি অনুভূমিক স্ক্রোলবারটি লুকানোর জন্য ব্যবহার করে।

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

এটি অ্যান্ড্রয়েড .4.০.৪ (আইসক্রিম স্যান্ডউইচ, নেটিভ ব্রাউজার এবং ক্রোম উভয়) সহ এবং একটি আইপ্যাডে আইওএস 6 (সাফারি এবং ক্রোম উভয়) সহ পরীক্ষিত হয়েছিল।

Comments

তার উত্তর আইওএস 12.3-এ ক্রোম এবং সাফারিতে কাজ করে না

— ওল্ডবয়

Answer 9

সিএসএস overflowসম্পত্তি ব্যবহার করুন :

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

এখানে আরও কয়েকটি উদাহরণ দেওয়া হল:

• ওভারফ্লো-এক্স, ওভারফ্লো-ওয়াই পরীক্ষা
• সিএসএস ওভারফ্লো সম্পত্তি

Comments

এটি আসলে আইওএস

— oldboy

Answer 10

অন্য লোকেরা ইতিমধ্যে বলেছে, সিএসএস ব্যবহার করুন overflow।

তবে আপনি যদি এখনও চান যে ব্যবহারকারী সেই সামগ্রীটি স্ক্রোল করতে সক্ষম হন (স্ক্রোলবারটি দৃশ্যমান না হয়ে) আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।

সমাধানের জন্য আমার উত্তরটি এখানে দেখুন: মাউস / কীবোর্ডের সাহায্যে স্ক্রোল করতে সক্ষম হওয়া অবস্থায় স্ক্রোলবারটি লুকান

Comments

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

— পিক্সেলপ্যাক্স

Answer 11

পিটারের উত্তর ছাড়াও:

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

এটি ইন্টারনেট এক্সপ্লোরার 10 এর জন্য একই কাজ করবে:

 #element {
      -ms-overflow-style: none;
 }

Answer 12

স্ক্রোলবারটি গোপন করার জন্য ক্রস ব্রাউজারের পদ্ধতি।

এটি এজ, ক্রোম, ফায়ারফক্স এবং সাফারিতে পরীক্ষা করা হয়েছিল

মাউস হুইল দিয়ে স্ক্রোল করতে সক্ষম হওয়া অবস্থায় স্ক্রোলবারটি লুকান!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

Comments

এই কাজগুলি কীভাবে প্রশংসিত হবে সে সম্পর্কে একটি ব্যাখ্যা - স্ক্রোল বারটি আড়াল করতে পিতা-মাতার / সন্তানের দৃশ্যমানতার সাথে

— খেলানো

@ বিশ্বাসী ইনসান্ত আমি আরও ভালভাবে ব্যাখ্যা করার জন্য মন্তব্যগুলি এবং কোডপেন যুক্ত করেছি। আমি আপনার মূল্যায়নের সাথে একমত নই যে দৃশ্যমানতার সাথে খেলানো স্ক্রোলবারটি আড়াল করার একটি ভয়ঙ্কর উপায়। আমি বুঝতে পারি যে এটি হ্যাক but

— ব্লেক প্লাম্ব

আমি আপনার সমাধানের প্রেমে অনুভব করেছি। এটি পুরোপুরি কার্যকর হয় (অ্যাপ্লিকেশনগুলিতে যা আধুনিক ব্রাউজারগুলি দ্বারা ডিজাইনের জন্য ব্যবহৃত হয়) ব্যবহৃত হয়। তোমাকে অনেক ধন্যবাদ!

— ম্যাক্সিম লাফারি

Answer 13

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

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

জন এর কৌশল তিনটি উপাদান ব্যবহার করে:

• স্ক্রোলবারগুলি মাস্ক করার জন্য একটি বাহ্যিক উপাদান।
• স্ক্রোলবারগুলি রাখার জন্য একটি মাঝারি উপাদান।
• এবং উভয়ের জন্য একটি সামগ্রী উপাদান মাঝারি উপাদানটির আকার নির্ধারণ করে এবং এতে স্ক্রোলবার তৈরি করে।

বহিরাগত এবং সামগ্রীর উপাদানগুলির আকারটি একই হিসাবে সেট করা সম্ভব হবে যা শতাংশের ব্যবহার বাদ দেয়, তবে আমি অন্য কোনও কিছুই ভাবতে পারি না যা সঠিক টুইট করে কাজ করবে না।

আমার সবচেয়ে বড় উদ্বেগ হ'ল ব্রাউজারগুলির সমস্ত সংস্করণ দৃশ্যমান উপচে পড়া সামগ্রীকে দৃশ্যমান করে তুলতে স্ক্রোলবার সেট করে কিনা। আমি বর্তমান ব্রাউজারগুলিতে পরীক্ষা করেছি, তবে পুরানোগুলি নয়।

আমার SASS ক্ষমা করুন ; পি

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

পরীক্ষামূলক

ওএস এক্স 10.6.8। উইন্ডোজ হ'ল উইন্ডোজ 7।

• ফায়ারফক্স 32.0 স্ক্রোলবারগুলি গোপন। ফোকাস করতে ক্লিক করার পরেও তীর কীগুলি স্ক্রোল করে না, তবে মাউস হুইল এবং ট্র্যাকপ্যাডে দুটি আঙ্গুলগুলি করে। ওএস এক্স এবং উইন্ডোজ।
• ক্রোম 37.0 স্ক্রোলবারগুলি গোপন। ফোকাস করতে ক্লিক করার পরে তীর কীগুলি কাজ করে। মাউস হুইল এবং ট্র্যাকপ্যাডের কাজ। ওএস এক্স এবং উইন্ডোজ।
• ইন্টারনেট এক্সপ্লোরার 11 স্ক্রোলবারগুলি গোপন। ফোকাস করতে ক্লিক করার পরে তীর কীগুলি কাজ করে। মাউস হুইল কাজ করে। উইন্ডোজ।
• সাফারি 5.1.10 স্ক্রোলবারগুলি গোপন। ফোকাস করতে ক্লিক করার পরে তীর কীগুলি কাজ করে। মাউস হুইল এবং ট্র্যাকপ্যাডের কাজ। ওএস এক্স
• Android 4.4.4 এবং 4.1.2। স্ক্রোলবারগুলি লুকানো আছে। টাচ স্ক্রোলিং কাজ করে। ক্রোম ৩.0.০, ফায়ারফক্স ৩২.০, এবং এইচটিএমএল ভিউয়ারকে ৪.৪.৪ এ চেষ্টা করুন (যা কিছু হোক)। এইচটিএমএল ভিউয়ারে পৃষ্ঠাটি হ'ল মুখোশযুক্ত সামগ্রীর আকার এবং খুব স্ক্রোলও করা যায়! স্ক্রোলিং পৃষ্ঠা জুমিংয়ের সাথে গ্রহণযোগ্যভাবে ইন্টারঅ্যাক্ট করে।

Comments

অনাবন্ধিত নোট (যতদূর প্রশ্ন যায়)। এই উদাহরণস্বরূপ, আপনি @ অন্তর্ভুক্ত বনাম @ এক্সটেন্ড ব্যবহার করা উচিত। এর পরিবর্তে @mixin{}, আপনি %size{}তখন সিএসএস নির্বাচকগুলিতে, কল করবেন @extend %size;। যখন ফল পরিবর্তন করতে আপনার ভেরিয়েবলগুলিতে টানা হয় তখন মিক্সিনগুলি সাধারণত ব্যবহৃত হয়। স্থানধারক (ওরফে @ এক্সটেন্ড) এর অর্থ সরল পুনরাবৃত্ত কোডের জন্য বোঝানো হয় - যেখানে কোনও "ফাংশন" প্রয়োজন হয় না।

— মাইক বারউইক

আমি @ এক্সেট ব্যবহার করার জন্য সম্পাদনা করেছি। ফলাফলটি এমন লোকদের পক্ষে সম্ভবত কম বোধগম্য যারা এসসিএসএস জানেন না, তবে যথেষ্ট ভাল।

— শেঠ ডাব্লু ক্লেইন

Answer 14

আমি কেবল ভেবেছিলাম যে আমি এই প্রশ্নটি পড়তে অন্য কারও দিকে ইঙ্গিত করব যে সেটিংস overflow: hidden(বা ওভারফ্লো-ওয়াই) এর উপরbody উপাদানটিতে আমার জন্য স্ক্রোলবারগুলি গোপন করে না।

আমাকে htmlউপাদানটি ব্যবহার করতে হয়েছিল ।

Comments

আমি কয়েক মাস আগে যেহেতু ঠিক ঠিক তা মনে করতে পারি না তবে আমি বিশ্বাস করি যে শরীরে ওভারফ্লো সেট করা ক্রোমে কাজ করছে, তবে ফায়ারফক্সে (বা তদ্বিপরীত) নয়। যদিও এইচটিএমএল ট্যাগ ব্যবহার করে উভয় ক্ষেত্রেই কাজ হয়েছিল।

— ব্র্যাড আজেভেদো

স্মৃতি থেকে এটি একটি কুইর্কস মোড পার্থক্য হতে পারে।

— থোমাসরুটটার

Answer 15

আমি অটোর আড়ালকরণ , ছোট সংস্করণ , কেবল স্ক্রল- y , বা কেবল-এক্স এর মতো কিছু বিকল্প সহ একটি ওয়েবকিট সংস্করণ লিখেছি :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

Answer 16

স্ক্রোল বারটি লুকানোর জন্য গ্রাহক কোডে এই সিএসএস কোডটি অনুলিপি করুন:

<style>

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

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

</style>

Answer 17

আমার এইচটিএমএল এর মত:

<div class="container">
  <div class="content">
  </div>
</div>

আপনার এই যোগ divযেখানে আপনি স্ক্রলবার লুকাতে চান:

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

এবং এটি পাত্রে যুক্ত করুন

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

Answer 18

উল্লম্ব স্ক্রোল বারটি অক্ষম করতে, কেবল যুক্ত করুন overflow-y:hidden;।

এটি সম্পর্কে আরও অনুসন্ধান করুন: ওভারফ্লো ।

Answer 19

overflow:hidden;JQuery ব্যবহার করার সময়ও আমার উত্তরটি স্ক্রোল করবে :

উদাহরণস্বরূপ, মাউস চাকা দিয়ে অনুভূমিকভাবে স্ক্রোল করুন:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

Comments

স্ক্রোলজ্যাকিং কাজ করে তবে প্রায় সর্বদা দরিদ্র ব্যবহারকারীর অভিজ্ঞতা।

— ব্র্যান্ডন আনজলদি

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

— শাইনিংলাইট

Answer 20

আমি বিশ্বাস করি আপনি এটি overflowসিএসএস অ্যাট্রিবিউট দিয়ে ম্যানিপুলেট করতে পারেন তবে তাদের ব্রাউজার সমর্থন সীমিত রয়েছে। একটি উত্স বলেছিল যে এটি ইন্টারনেট এক্সপ্লোরার 5 (এবং পরবর্তী), ফায়ারফক্স 1.5 (এবং পরবর্তী) এবং সাফারি 3 (এবং পরে) ছিল - সম্ভবত আপনার উদ্দেশ্যে যথেষ্ট।

স্ক্রোলিং, স্ক্রোলিং, স্ক্রোলিংয়ের একটি ভাল আলোচনা হয়েছে।

Comments

ভাল লিঙ্ক। মাল্টি ব্রাউজারগুলিতে কীভাবে ফলাফল হবে তা জেনে ভাল লাগছে। দুর্ভাগ্যক্রমে সমাপ্ত ফলাফলগুলির স্ক্রিনশটের চিত্রটি নষ্ট হয়ে গেছে

— চেতনাবানা

Answer 21

আমি সব কিছু চেষ্টা করেছিলাম এবং আমার সমাধানের জন্য সবচেয়ে ভাল কাজটি হ'ল সর্বদা উল্লম্ব স্ক্রোলবার শো করা এবং তারপরে এটি আড়াল করার জন্য কিছু নেতিবাচক মার্জিন যুক্ত করা উচিত।

body {
  overflow-y: scroll;
  margin-right: -20px;
}