ফায়ারফক্সের জন্য কাস্টম সিএসএস স্ক্রোলবার


313

আমি সিএসএস সহ একটি স্ক্রোলবার কাস্টমাইজ করতে চাই।

আমি এই ওয়েবকিট সিএসএস কোডটি ব্যবহার করি যা সাফারি এবং ক্রোমের পক্ষে ভাল কাজ করে:

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

ফায়ারফক্সে আমি কীভাবে একই জিনিস করতে পারি?

আমি জানি আমি jQuery ব্যবহার করে এটি সহজেই করতে পারি, তবে আমি এটি করতে সক্ষম হলে খাঁটি সিএসএস দিয়ে এটি করতে পছন্দ করব।

কারও বিশেষজ্ঞের পরামর্শের জন্য কৃতজ্ঞ হবে!


1
আপনি jQuery ব্যবহার করে এটি কীভাবে করতে পারেন দয়া করে ভাগ করুন। আমি একই সমস্যার মুখোমুখি হয়েছি কিন্তু ওয়েবকিটের জন্য এটি ঠিক করতে সিএসএস ব্যবহার করেছি। তবে, ফায়ারফক্স এমন একটি সমস্যা তৈরি করেছে যা আপনার jQuery সমাধানটি সাহায্য করতে সক্ষম হতে পারে।
আইগবানাম

1
আমি jscrollpane jQuery প্লাগইন ব্যবহার করার পরামর্শ দিচ্ছি।
দিমিত্রি ভোরন্টজভ

ফায়ারফক্সে jScrollPane নিয়ে একটি সমস্যা আছে। jScrollPane ক্রোমে পুরোপুরি কাজ করে তবে ফায়ারফক্সে আপনার কাছে jScrollPane স্ক্রোলবারের ডানদিকে একটি ফাঁকা সিস্টেম স্ক্রোলবার রয়েছে। কেবলমাত্র একটি স্ক্রোলবার থাকা উচিত
আইগবানাম

1
সত্য না. যদি তা থাকে তবে আপনি কোথাও কিছু ভুল করেছেন।
দিমিত্রি ভোরন্টজভ

: আমার উত্তর এখানে দেখুন stackoverflow.com/questions/7357203/custom-scrollbars/...
Buzinas

উত্তর:


239

2018 এর শেষ অবধি, ফায়ারফক্সে এখন সীমিত কাস্টমাইজেশন উপলব্ধ!

এই উত্তরগুলি দেখুন:

এবং এটি পটভূমির তথ্যের জন্য: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109


::-webkit-scrollbarবন্ধু এবং বন্ধুদের সাথে কোনও ফায়ারফক্স নেই ।

আপনাকে জাভাস্ক্রিপ্টের সাথে লেগে থাকতে হবে।

প্রচুর লোকেরা এই বৈশিষ্ট্যটি পছন্দ করতে পারেন, দেখুন: https://bugzilla.mozilla.org/show_bug.cgi?id=77790


জাভাস্ক্রিপ্ট প্রতিস্থাপন যতদূর যায়, আপনি চেষ্টা করতে পারেন:


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

2
দুর্ভাগ্যক্রমে, সম্ভাব্য মানগুলির কোনওটিই সহায়তা -moz-appearanceকরতে পারে না। "The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme."- আপনি কেবল একটি নেটিভ স্ক্রোলবার পাবেন।
ত্রিশটি

15
এটি পড়ার জন্য যদি কারওর ব্যবহারিক সমাধানের প্রয়োজন হয় তবে আমি jscrollpane jQuery প্লাগইন ব্যবহার করে শেষ করেছি।
দিমিত্রি ভোরন্টজভ

1
@ জ্যাকসস ম্যাথিয়েউ, আমি আপনাকে বোঝাতে চাইছি। যদিও এটি ব্যারনের দোষ নয়, যদি আমি পৃষ্ঠাটি ডাউনলোড করি এবং ব্যারনটিকে আরম্ভ করা থেকে বিরত করি, তবুও ত্রুটিটি ঘটে। সুতরাং ক্রোমের মতো দেখতে এটি এখানে দোষ রয়েছে।
thephpdev

3
drafts.csswg.org/css-scrolbars-1 অনুমানের প্রথম পর্যায়ে এটি ফায়ারফক্স নাইটে এখন ডিফল্টরূপে বক্সের বাইরে সক্ষম হয়েছে enabled
15

53

ফায়ারফক্স 64৪ সিএসএস স্ক্রোলবার মডিউল স্তর স্তর ১-এর স্পাফিক ড্রাফ্টের জন্য সমর্থন যোগ করে , যা দুটি নতুন বৈশিষ্ট্য যুক্ত করে scrollbar-widthএবং scrollbar-colorস্ক্রোলবারগুলি কীভাবে প্রদর্শিত হয় তার উপর কিছু নিয়ন্ত্রণ দেয়।

আপনি scrollbar-colorনিম্নলিখিত মানগুলির মধ্যে একটিতে সেট করতে পারেন (এমডিএন থেকে বর্ণনা):

  • auto অন্য কোনও সম্পর্কিত স্ক্রোলবার রঙের বৈশিষ্ট্যের অভাবে স্ক্রোলবারের ট্র্যাক অংশের জন্য ডিফল্ট প্ল্যাটফর্ম রেন্ডারিং।
  • dark একটি গা dark় স্ক্রোলবার দেখান, যা প্ল্যাটফর্মের সরবরাহিত স্ক্রোলবারের গা var় বৈকল্পিক হতে পারে বা গা dark় রঙের একটি কাস্টম স্ক্রোলবার হতে পারে।
  • light একটি হালকা স্ক্রোলবার দেখান, যা প্ল্যাটফর্মের সরবরাহিত স্ক্রোলবারের হালকা বৈকল্পিক বা হালকা রঙের কাস্টম স্ক্রোলবার হতে পারে।
  • <color> <color> স্ক্রোলবার থাম্বটিতে প্রথম রঙ প্রয়োগ করে, দ্বিতীয়টি স্ক্রোলবার ট্র্যাকটিতে।

নোট করুন darkএবং lightমানগুলি বর্তমানে ফায়ারফক্সে প্রয়োগ করা হয়নি

ম্যাকোস নোট:

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

ভিজ্যুয়াল ডেমো:

আপনি scrollbar-widthনিম্নলিখিত মানগুলির মধ্যে একটিতে সেট করতে পারেন (এমডিএন থেকে বর্ণনা):

  • auto প্ল্যাটফর্মের জন্য ডিফল্ট স্ক্রোলবার প্রস্থ।
  • thin প্ল্যাটফর্মগুলিতে একটি পাতলা স্ক্রোলবার প্রস্থের বৈকল্পিক যা ডিফল্ট প্ল্যাটফর্মের স্ক্রোলবার প্রস্থের চেয়ে একটি পাতলা স্ক্রোলবার provide
  • none কোনও স্ক্রোলবার দেখানো হয়নি, তবে উপাদানটি এখনও স্ক্রোলযোগ্য হবে।

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

scrollbar-widthভবিষ্যতের খসড়াটিতে দৈর্ঘ্যের মান বিকল্প এবং পুরো সম্পত্তি অপসারণের জন্য বিবেচিত হচ্ছে এবং এটি ঘটলে সম্ভবত ভবিষ্যতের সংস্করণে এই বিশেষ সম্পত্তি ফায়ারফক্স থেকে অপসারণ করা যেতে পারে not

ভিজ্যুয়াল ডেমো:


এই উত্তরের জন্য ধন্যবাদ। আমি এটির প্রচারের জন্য আমার গৃহীত উত্তর আপডেট করেছি (এবং অন্যান্য প্রাসঙ্গিক উত্তর) যাতে লোকেরা এটি দেখার সম্ভাবনা বেশি করে থাকে।
ত্রিশডট

1
এটি তিন সপ্তাহ আগে লুসার উত্তরটিকে নকল করে ।
জোশ হাবদাস

@ জোশহাবদাস এই উত্তরে প্রায় ততটা সামঞ্জস্যতা বা ব্যবহারের তথ্য নেই। আমি এই উত্তরটি তৈরি করেছিলাম কারণ অন্য উত্তরে আমি যে গুরুত্বপূর্ণ তথ্য খুঁজছিলাম তা ছিল না।
আলেকজান্ডার ও'মারারা

1
আপনি তাদের ক্রেডিট দিতে পারেন, প্রতিক্রিয়া জানাতে বা তাদের উত্তর সম্পাদনার বিষয়ে বিবেচনা করতে পারেন।
জোশ হাবদাস

2
@ জোশহাবদাস ওয়েল, 5 জন ইতিমধ্যে এটি দরকারী বলে মনে করেছেন এবং এতে ওয়েবে অন্য কোথাও পাওয়া যায়নি এমন তথ্য রয়েছে, তাই আমি দ্বিমত পোষণ করছি।
আলেকজান্ডার ও'মারা

43

আমি কি বিকল্প প্রস্তাব দিতে পারি?

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

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

ডেমো এবং আরও কিছুটা গভীরতার জন্য, এখানে পরীক্ষা করুন ...

jsfiddle.net/aj7bxtjz/1/


7
দুর্ভাগ্যক্রমে, এই প্রশ্নের উত্তর দেয় না। দিমিত্রি স্ক্রোলবারটি আড়াল না করে স্টাইল করার চেষ্টা করছেন।
stvnrynlds

14
এটি 4 বছর আগে ছিল (আমি এটি সম্পর্কে অবহিত) সুতরাং আমি নিশ্চিত যে তিনি ইতিমধ্যে ইতিমধ্যে কিছু করেছেন। তবে বিষয়টি আজও প্রাসঙ্গিক - অন্য ব্রাউজারগুলি যখন স্ক্রোলবারগুলিকে কিছু ধরণের "অবৈধ" পরিবর্তনের অনুমতি দেয় তখনও এফএফ দেয় না। এই কারণেই আমি এটি পোস্ট করার সিদ্ধান্ত নিয়েছি nd এবং এর সামনের ফলাফলটি দৃশ্যত স্ট্রোল স্ক্রোলবার হয়, এটি করার উপায়টি নির্বিশেষে এটি এর অংশটি লুকিয়ে রাখছে।
তোমাজ

আমি এই সমাধানটিকে পরম পজিশনিং (ভেরিয়েবল সাইজের স্টাফগুলিকে একটি দুঃস্বপ্ন করে তোলে) ব্যতীত এই সমাধানটি পছন্দ করি এবং আপনি আসলে স্টাইলটি পরিবর্তন করতে পারবেন না, আপনি কেবল বিদ্যমান স্ক্রোলারের উপাদানগুলি মাস্কিং / লুকিয়ে রাখছেন - আমি সবুজ বার চাইলে খুব খারাপ!
রোজা

3
হ্যাঁ, চার বছর পরে, এটি ওপির প্রশ্নের উত্তরটির বিষয়ে নয় যতটা এটি সম্প্রদায়কে অবদান রাখছে।
tmthyjames

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

36

আমি ভেবেছিলাম যে কেউ যদি কাজটি করার জন্য কোনও জিকুয়েরি প্লাগইন বিবেচনা করে তবে আমি আমার অনুসন্ধানগুলি ভাগ করব।

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

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

পিএস আমি জেএসক্রোলপ্যানে এক ঝলক দেখেছি, তবে @ সিমোন ঠিক আছে, এটি এখন কিছুটা তারিখ এবং পিটা A


3
আছে এছাড়াও ট্র্যাকপ্যাড স্ক্রল এমুলেটর - এটা কি twitch.tv ব্যবহারসমূহ আছে।
ফরিভাল

1
পারফেক্ট স্ক্রোলবারটি আসলেই খুব ভাল। অন্যান্য অনেক অপশন ক্লান্ত করার পরে, আমি এটি সেরা সমাধান হিসাবে খুঁজে পেয়েছি। এটি পরামর্শ দেওয়ার জন্য ধন্যবাদ।
লিওনার্ড টিও

ন্যানোস্ক্রোলারও সত্যই ভাল এবং তুলনামূলকভাবে হাতাশালী। jamesflorentino.github.io/nanoScrollerJS ভারী জেএস প্লাগইনগুলির বিরোধিতা করে, এইটি কেবল নেটিভ স্ক্রোলারটিকে আড়াল করে এবং স্থানীয় 'স্ক্রোল' ইভেন্টটি ব্যবহার করে একটি বিকল্প স্ক্রোলার দেখায়
ড্যানি আর

1
আমি সমস্ত jquery সমাধানগুলি এড়িয়ে চলেছি, যেহেতু তারা সকলেই চাপের মধ্যে ধীর গতিতে মেশিন বা মেশিনে পিছিয়ে পড়েছে তবে পিএস একটি বিজয়ীর মতো দেখাচ্ছে
রোজা

31

যেহেতু ফায়ারফক্স 64৪ , একটি সাধারণ স্ক্রোলবার স্টাইলিংয়ের জন্য নতুন চশমা ব্যবহার করা সম্ভব ( বিক্রেতার উপসর্গযুক্ত ক্রোমের মতো সম্পূর্ণ নয় )।

ইন এই উদাহরণে একটি সমাধান করে একটি অনুরূপ (সমান নয়) চূড়ান্ত ফলাফল (উদাহরণস্বরূপ ব্যবহার আপনার মূল ক্রোম নিয়ম) সঙ্গে ঠিকানা উভয় ফায়ারফক্স এবং Chrome বিভিন্ন নিয়ম একত্রিত দেখতে সম্ভব:

মূল নিয়মগুলি হ'ল:

ফায়ারফক্সের জন্য

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

ক্রোমের জন্য

.scroller::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.scroller::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

দয়া করে নোট করুন যে আপনার সমাধানের প্রতি শ্রদ্ধা, নিম্নলিখিত হিসাবে আরও সহজ ক্রোম বিধি ব্যবহার করা সম্ভব:

.scroller::-webkit-scrollbar-track  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: #0A4C95;
}

অবশেষে, ফায়ারফক্সেও স্ক্রোলবারগুলিতে তীরগুলি আড়াল করার জন্য, নিম্নলিখিত নিয়মের সাহায্যে বর্তমানে এটি " পাতলা " হিসাবে সেট করা প্রয়োজনীয়scrollbar-width: thin;


1
আই 5.5 এর মতো দেখে মনে হচ্ছে কিছু ঠিক আছে। :)
জোশ হাবদাস


0

এটি ব্যবহারকারীর স্টাইলে কাজ করে এবং ওয়েব পৃষ্ঠাগুলিতে এটি কাজ করে না বলে মনে হয়। আমি এটি সম্পর্কে মজিলা থেকে অফিসিয়াল দিকনির্দেশ পাইনি। যদিও এটি কোনও পর্যায়ে কাজ করেছে, ফায়ারফক্সের এটির জন্য সরকারী সমর্থন নেই। এই বাগটি এখনও https://bugzilla.mozilla.org/show_bug.cgi?id=77790 খোলা আছে

scrollbar {
/*  clear useragent default style*/
   -moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
   -moz-appearance: none !important;
}
/* the sliding part*/
thumb{
   -moz-appearance: none !important;
}
scrollcorner {
   -moz-appearance: none !important;
   resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
    color:silver;
}

পরীক্ষা http://codemug.com/html/custom-scrollbars-using-css/ বিস্তারিত জানার জন্য।


2
আপনি যেমন লিখেছেন তেমন চেষ্টা করেছি, তবে এফএফ-তে এটি আমার পক্ষে কাজ করছে না, jsfiddle.net/gGbkY/1 দেখুন কি আমি কিছু মিস করছি?
সতিন্দর সিংহ

এটি ব্যবহারকারীর স্টাইলে কাজ করে এবং ওয়েব পৃষ্ঠাগুলিতে এটি কাজ করে না বলে মনে হয়। আমি এটি সম্পর্কে মজিলা থেকে অফিসিয়াল দিকনির্দেশ পাইনি।
ipirlo

1
দয়া করে একই লিঙ্কটি দেখুন: এটি আর কাজ করে না
ক্রুনাল শাহ

3
ব্যবহারকারী শৈলী কি?
মেরেকি

আপনার সংযুক্ত বাগটি 17 বছর আগে রিপোর্ট করা হয়েছিল এবং এখনও নির্ধারিত হয়নি। আমি মনে করি এটি নিরাপদ যে এফএফ কখনও নেটিভ স্ক্রোলবারগুলি লুকানোর পক্ষে সমর্থন করবে না support
স্টার্লিং বোর্ন

-2
@-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
       display: none !important;
    }
    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}

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