সিএসএস ডিভ এ কাস্টমাইজড স্ক্রোল বার

327

divপুরো পৃষ্ঠার জন্য নয়, তবে কীভাবে আমি সিএসএস (ক্যাসকেডিং স্টাইল শীট) এর মাধ্যমে কোনও স্ক্রোল বারকে কাস্টমাইজ করতে পারি ?

css  html  scrollbar 
— harisdev
সূত্র
overflow:auto;ঠিক এটি প্রয়োগ করুন <div>। আর কোনও ব্যাকগ্রাউন্ডের বিশদ?
— রব ডব্লু
আমি এটি করেছিলাম, তবে আমার কাস্টম স্ক্রোলবার দরকার আছে, হায় .. স্ক্রোলবারের নকশা
— হরিদেব
কাস্টম রঙ? এটি কেবল আইই সমর্থিত, অন্য আধুনিক ব্রাউজারগুলিতে নয়। খাঁটি সিএসএস ব্যবহার করে এটি অর্জন করা যায় না।
— রব ডব্লু
1
সরলতম জেএস সমাধান (সিএসএসের কোনও ক্রস ব্রাউজার সমর্থন নেই) - yaireo.github.io/fakescrol
— vsync
: আমার উত্তর এখানে দেখুন stackoverflow.com/questions/7357203/custom-scrollbars/...
— Buzinas

উত্তর:

688

আমি ভেবেছিলাম স্ক্রোল বার, সিএসএস এবং ব্রাউজারের সামঞ্জস্যের সর্বশেষ তথ্য একীভূত করতে সহায়ক হবে।

স্ক্রোল বার সিএসএস সহায়তা

বর্তমানে, কোনও ক্রস ব্রাউজার স্ক্রোল বার সিএসএস স্টাইলিং সংজ্ঞা নেই exists আমি শেষে ডাব্লু 3 সি নিবন্ধটির নীচের বিবৃতিটি পেয়েছি এবং সম্প্রতি আপডেট করা হয়েছে (10 অক্টোবর 2014):

কিছু ব্রাউজার (আইই, কনকরার) অ-মানক বৈশিষ্ট্যগুলি 'স্ক্রোলবার-শ্যাডো-রঙ', 'স্ক্রোলবার-ট্র্যাক-রঙ' এবং অন্যদের সমর্থন করে। এই বৈশিষ্ট্যগুলি অবৈধ: এগুলি কোনও সিএসএসের নির্দিষ্টকরণে সংজ্ঞায়িত হয় না বা তাদের মালিকানা হিসাবে চিহ্নিত করা হয় না ("উপস্থাপক" দিয়ে তাদের উপসর্গ দ্বারা)

মাইক্রোসফট

অন্যরা যেমন উল্লেখ করেছে, মাইক্রোসফ্ট স্ক্রোল বার স্টাইলিং সমর্থন করে তবে কেবল আইই 8 এবং তারপরের জন্য।

উদাহরণ:

<!-- language: lang-css -->

    .TA {
        scrollbar-3dlight-color:gold;
        scrollbar-arrow-color:blue;
        scrollbar-base-color:;
        scrollbar-darkshadow-color:blue;
        scrollbar-face-color:;
        scrollbar-highlight-color:;
        scrollbar-shadow-color:
    }

ক্রোম এবং সাফারি (ওয়েবকিট)

একইভাবে, ওয়েবকিটের এখন নিজস্ব সংস্করণ রয়েছে:

ফায়ারফক্স (গেকো)

সংস্করণ 64 হিসাবে ফায়ারফক্স বৈশিষ্ট্যগুলির scrollbar-color(আংশিকভাবে, ডাব্লু 3 সি খসড়া ) এবং scrollbar-width( ডাব্লু 3 সি খসড়া ) মাধ্যমে স্ক্রোলবার স্টাইলিং সমর্থন করে । বাস্তবায়ন সম্পর্কে কিছু ভাল তথ্য এই উত্তর পাওয়া যাবে ।

ক্রস ব্রাউজার স্ক্রোল বার স্টাইলিং

জাভাস্ক্রিপ্ট লাইব্রেরি এবং প্লাগইনগুলি ক্রস-ব্রাউজার সমাধান সরবরাহ করতে পারে। অনেক বিকল্প আছে।

তালিকা যেতে পারে। আপনার সেরা বাজি হ'ল আশেপাশে অনুসন্ধান করা, গবেষণা করা এবং উপলভ্য সমাধানগুলি পরীক্ষা করা। আমি নিশ্চিত যে আপনি এমন কিছু সন্ধান করতে সক্ষম হবেন যা আপনার প্রয়োজনের সাথে খাপ খায়।

অবৈধ স্ক্রোল বার স্টাইলিং প্রতিরোধ করুন

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

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

সদৃশ বা অনুরূপ প্রশ্ন / উত্স উপরে সংযুক্ত নেই

দ্রষ্টব্য: এই উত্তরে বিভিন্ন উত্সের তথ্য রয়েছে। যদি কোনও উত্স ব্যবহৃত হয়, তবে এটি এই উত্তরের সাথেও যুক্ত রয়েছে।

— JSuar
সূত্র
227
ওয়েবটি প্রায় দুই দশক ধরে চলছে, এবং এখনও স্ক্রোলবার স্টাইল করার মানক উপায় নেই। বিশ বছরের স্ট্যান্ডার্ড কমিটিগুলি লক্ষ্য করে যে লোকেরা জিনিসগুলি স্ক্রোল করে। ধীর, ব্যঙ্গাত্মক হাততালি দেওয়ার কোনও হার নেই যা পর্যাপ্তরূপে প্রকাশ করবে যে কীভাবে আমাকে অনুভব করে। তবে প্রথম এবং দ্বিতীয় তালির মধ্যে 20 বছরের বিলম্ব, আমার মনে হয়, উপযুক্ত হবে। কিছু দৃষ্টিকোণের জন্য, ডাব্লুডাব্লুডাব্লু বের হওয়ার সময় আমি এখনও জন্মগ্রহণ করি নি, এবং আমি এখন একজন কম্পিউটার প্রকৌশলী। যাওয়ার উপায়, ডাব্লু 3 সি।
— পার্থিয়ান শট
3
কেবল আমার দুটি সেন্ট যুক্ত করতে: জিমেইল এবং ইউটিউব ক্রোমে স্টাইলাইজ করেছে এবং এক্সপ্লোরার এবং ফায়ারফক্সে নেটিভ। যদি সেই মানগুলি তাদের জন্য যথেষ্ট ভাল হয় তবে তা আমার পক্ষেও যথেষ্ট ভাল
— yonatanmn
9
@ পলডি.ওয়েট ঠিক আছে, তবে এটি কোনও কিছুর জন্য প্রয়োগ করা যেতে পারে। এবং সিএসএস একটি ভাষা হিসাবে স্পষ্টভাবে উপস্থিত থাকে যাতে ডিজাইনাররা ডিফল্টকে ওভাররাইড করতে বেছে নিতে পারে। পুরো ধারণাটি হ'ল কোনও খারাপ ইউআই ডিজাইনার যে কোনও উপাদানকে অচেতন করে তুলতে পারে, তবে আপনি যখনই সাইট ডিজাইনারকে অক্ষম মনে করবেন, পৃষ্ঠা কাস্টমাইজেশনকে একেবারে অনুমতি দেওয়ার কী দরকার?
— পার্থিয়ান শট
6
@ PaulD.Waite স্পষ্টতই, এটি এই জিনিসগুলির মধ্যে একটি নয়। আংশিকরূপে এটি স্ক্রিনের অঞ্চলে যা সাইট ডিজাইনারকে পুরোপুরি নিয়ন্ত্রণ করা উচিত, যাইহোক, সুতরাং এটি কোনও সুরক্ষা ঝুঁকি তৈরি করে না এবং আংশিকভাবে কারণ বাস্তবে - এটি একটি নন-ইস্যু। স্ক্রোলবারগুলির মতো দেখতে এবং আচরণ করার জন্য প্রচুর সাইটগুলি তাদের নিজস্ব হ্যাকগুলি প্রয়োগ করে এবং সেগুলি দুর্দান্ত কাজ করে। তারা কেবল সূক্ষ্মভাবে কাজ করে না, এবং আরও ভাল দেখায়, তবে লোকেরা তাদের কীভাবে ব্যবহার করতে হয় তা বুঝতে পারে, এটিই মূল বিষয়। দুর্ভাগ্যক্রমে, কারণ তারা হ্যাক, কখনও কখনও তারা মুদ্রণ কার্যকারিতার মতো জিনিসগুলির সাথে ভাল খেলবে না।
— পার্থিয়ান শট
5
এই উত্তরটি তার প্রশ্নের সম্পূর্ণরূপে সম্বোধন করে না, যা পুরো পৃষ্ঠার পরিবর্তে কোনও নির্দিষ্ট ডিভিতে স্ক্রোলবার শৈলীগুলি কীভাবে প্রয়োগ করা যায় ।
— স্টিয়ার্ট
14

একবার চেষ্টা করে দেখুন

সূত্র: https://nicescrol.areaaperta.com/

সরল বাস্তবায়ন 

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

এটি একটি jQuery প্লাগইন স্ক্রোলবার, সুতরাং আপনার স্ক্রোলবারগুলি নিয়ন্ত্রণযোগ্য এবং বিভিন্ন ওএস এর জুড়ে একই চেহারা।

— দিলুশা গোনাগলা
সূত্র
আমি নিশ্চিত যে এটি সম্ভবত কাস্টমাইজযোগ্য, তবে তাদের পৃষ্ঠায় ডেমোটি খুব ধীর এবং স্ক্রোলবারটি ধরা খুব শক্ত।
— গোস
4
কার্যত সমস্ত jQuery প্লাগইনগুলির মতো - [শুড্ডার্স] - এটি নেটিভ, থ্রেডযুক্ত, জিপিইউ ত্বরণযুক্ত স্ক্রোল বাস্তবায়নের তুলনায় ভীষণ ধীর। গুরুতর অ্যাপ্লিকেশনগুলির জন্য সম্পূর্ণরূপে অনুপযুক্ত এবং ভাল ইউএক্স-এর অন্তরায়। খেলনা ওয়েবসাইট না থাকলে আমি আপনাকে এড়াতে পরামর্শ দিই।
— জন ওয়েইজ
2
লোকে যখন খাঁটি জাভাস্ক্রিপ্ট বলে তখন আমি এটি ঘৃণা করি! একটি jquery প্লাগইন।
— দিনহ ট্রান
আমি নিসক্রোল ব্যবহার করার পরামর্শ দেব না, কারণ এটি ব্রাউজার কার্যকারিতা অক্ষম করে। মিডল ক্লিকের সাথে স্ক্রোলিং নিসক্রোলের সাথে কাজ করে না।
— আলসো
এই সুন্দরস্ক্রোলটি ভালবাসুন, এটি উপাদানটির চারপাশে মোড়ক ডিভ যুক্ত করে না যার অর্থ এটি HTML কাঠামোটি ভেঙে দেয় না
— ডাটদিনহোকোক
11

কাস্টম স্ক্রোল বারগুলি সিএসএসের মাধ্যমে সম্ভব নয়, আপনার কিছু জাভাস্ক্রিপ্ট ম্যাজিক প্রয়োজন।

কিছু ব্রাউজার ::-webkit-scrollbarওয়েবকিট যেমন নন-স্পিক সিএসএস নিয়মকে সমর্থন করে তবে এটি আদর্শ নয় কারণ এটি কেবল ওয়েবকিটেই কাজ করবে। IE এর মতোও কিছু ছিল তবে আমি মনে করি না তারা এটিকে আর সমর্থন করে।

— elclanrs
সূত্র
2
অপ্রচলিত উত্তর
— টি.ডিডুয়া
1
@ টি টিডুয়া এই উত্তরটি কি অপ্রচলিত?
— kojow7
6

অনেক লোকের মতো আমিও এমন কিছু সন্ধান করছিলাম যা ছিল:

  • বেশিরভাগ আধুনিক ব্রাউজারে ধারাবাহিকভাবে স্টাইলযুক্ত এবং কার্যকরী
  • কিছু হাস্যকর নয় 3000-লাইন ব্লাটেড jQuery এক্সটেনশন cr * পি

... কিন্তু হায়রে - কিছুই না!

ভাল যদি কোনও কাজের যোগ্যতা থাকে ... আমি প্রায় 30 মিনিটের মধ্যে কিছু পেতে এবং চালাতে সক্ষম হয়েছি। দাবি অস্বীকার: এটির সাথে বেশ কয়েকটি পরিচিত (এবং সম্ভবত এখনও কিছু অজানা) সমস্যা রয়েছে, তবে এটি আমাকে অবাক করে তোলে যে পৃথিবীতে জেএসের অন্যান্য 2920 লাইনগুলি অনেক প্রস্তাবের জন্য কী আছে!

var dragParams;
	window.addEventListener('load', init_myscroll);

	/* TODO: Much to do for v axis! */

	function bardrag_mousemove(e) {
	  var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
	  pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
	  dragParams.slider.style.left = pos + 'px';
	  updateScrollPosition(dragParams.slider, pos);
	}

	function updateScrollPosition(slider, offsetVal) {
	  var bar = slider.parentNode;
	  var myscroll = bar.parentNode;
	  var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
	  var maxSlide = bar.offsetWidth - slider.offsetWidth;
	  var viewX = maxView * offsetVal / maxSlide;
	  myscroll.scrollLeft = viewX;
	  bar.style.left = viewX + 'px';
	}

	function drag_start(e) {
	  var slider = e.target;
	  var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
	  dragParams = {
	    clientX: e.clientX,
	    offsetLeft: slider.offsetLeft,
	    slider: e.target,
	    maxLeft: maxLeft
	  };
	  e.preventDefault();
	  document.addEventListener('mousemove', bardrag_mousemove);
	}

	function drag_end(e) {
	  e.stopPropagation();
	  document.removeEventListener('mousemove', bardrag_mousemove);
	}

	function bar_clicked(e) {
	  var bar = e.target;
	  var slider = bar.getElementsByClassName('slider')[0];
	  if (bar.className == 'h bar') {
	    var maxSlide = bar.offsetWidth - slider.offsetWidth;
	    var sliderX = e.offsetX - (slider.offsetWidth / 2);
	    sliderX = Math.max(0, Math.min(sliderX, maxSlide));
	    slider.style.left = sliderX + 'px';
	    updateScrollPosition(slider, sliderX);
	  }
	}

	function init_myscroll() {
	  var myscrolls = document.getElementsByClassName('container');
	  for (var i = 0; i < myscrolls.length; i++) {
	    var myscroll = myscrolls[i];
	    var style = window.getComputedStyle(myscroll);
	    if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
	      addScroller(false, myscroll);
	    }
	    if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
	      addScroller(true, myscroll);
	    }
	  }
	}

	function addScroller(isX, myscroll) {
	  myscroll.className += ' myscroll';
	  var bar = document.createElement('div');
	  var slider = document.createElement('div');
	  var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
	  var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
	  var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
	  slider.style.width = 100 * sliderPx / offsetDim + '%';
	  slider.className = 'slider';
	  bar.className = isX ? 'h bar' : 'v bar';
	  bar.appendChild(slider);
	  myscroll.appendChild(bar);

	  bar.addEventListener('click', bar_clicked);
	  slider.addEventListener('mousedown', drag_start);
	  slider.addEventListener('mouseup', drag_end);
	  bar.addEventListener('mouseup', drag_end);
	  document.addEventListener('mouseup', drag_end);
	}
body {
  background-color: #66f;
}
.container {
  background-color: #fff;
  width: 50%;
  margin: auto;
  overflow: auto;
}
.container > div:first-of-type {
  width: 300%;
  height: 100px;
  background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */

.myscroll {
  overflow: hidden;
  position: relative;
}
.myscroll .bar {
  background-color: lightgrey;
  position: absolute;
}
.myscroll {
  padding-bottom: 20px;
}
.myscroll .h {
  height: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.myscroll .slider {
  background-color: grey;
  position: absolute;
}
.myscroll .h .slider {
  height: 100%;
}
<div class="container">
  <div></div>
</div>
স্নিপেট প্রসারিত করুন

— ne1410s
সূত্র
1
পটভূমি: রৈখিক-গ্রেডিয়েন্ট (ডানদিকে, লাল, হলুদ);
— xgqfrms
5

আমি প্রচুর প্লাগইন চেষ্টা করেছি, তাদের বেশিরভাগই সমস্ত ব্রাউজার সমর্থন করে না, আমি এই সমস্ত ব্রাউজারগুলির জন্য আইস্ক্রোল এবং ন্যানোস্ক্রোলার কাজ পছন্দ করি :

  • আইই 11 -> আই 6
  • আইই 10 - ডাব্লুপি 8
  • আইই 9 - ডাব্লুপি 7
  • আইই এক্সবক্স ওয়ান
  • আইই এক্সবক্স 360
  • গুগল ক্রম
  • ফায়ারফক্স
  • অপেরা
  • আফ্রিকায় শিকার অভিযান

তবে আইস্ক্রোল টাচ দিয়ে কাজ করে না!

ডেমো আইস্ক্রোল : http://lab.cubiq.org/iscrol/example/simple/
ডেমো ন্যানোস্ক্রোলার : http://jamesflorentino.github.io/nanoScrollerJS/

— Ouadie
সূত্র
ন্যানো স্ক্রোলার অনুভূমিক স্ক্রোল সমর্থন করে না।
— ফ্লেভারসকেপ
রেপো github.com/cubiq/iscrol সংরক্ষণাগারভুক্ত আমি অন্য বিকল্পগুলি
— সন্ধানের
5

এই লিঙ্কটি চেক করুন। ওয়ার্কিং ডেমো সহ উদাহরণ

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

সিএসএস স্ক্রোল বারগুলি

2
ডেমো জন্য আপনাকে ধন্যবাদ। আমি প্রথম এটি ফায়ারফক্স 58.0.2 (64-বিট, উইন্ডোজ 7 প্রো / 64) দিয়ে চালিয়েছি এবং এর সমস্ত স্ক্রোল বারগুলি অভিন্ন ছিল। তারপরে ক্রোম সংস্করণ 65.0.3325.162 (অফিসিয়াল বিল্ড) (-৪-বিট) দিয়ে দৌড়েছিল এবং তারা সমস্তই আলাদা ছিল। সুতরাং (সম্ভবত অজান্তেই) আপনি -webkit-পদ্ধতির সীমাবদ্ধতা প্রদর্শন করেছেন ।
— কোড 16-এ 14
4

ফায়ারফক্সের নতুন সংস্করণ ()৪) সিএসএস স্ক্রোলবার মডিউল স্তর 1 সমর্থন করে 

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>
স্নিপেট প্রসারিত করুন

সূত্র: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrolbars

ফায়ারফক্স স্ক্রোলবার

https://codepen.io/fatihhayri/pen/pqdrbd

— ফাতিহ হায়রিওলু
সূত্র
3

এখানে একটি ওয়েবকিট উদাহরণ যা ক্রোম এবং সাফারির জন্য কাজ করে:

সিএসএস:

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

আউটপুট:

এখানে চিত্র বর্ণনা লিখুন

— ওয়েসেলস অস্বীকার
সূত্র
3 
.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

আমার মতো একটি সুন্দর মোবাইল / অসক্স দিয়েছে।

— csomakk
সূত্র
1
আরও সংক্ষিপ্ত প্রতিক্রিয়া। আইএমএইচও এটি আসলে ওপি-র প্রশ্নের উত্তর দিয়েছে যা ছিল কীভাবে মাত্র একটি ডিভ স্টাইল করা যায়। খুশী হলাম।
— দানিমাল রিক্স
2

এমন একটি উপায় রয়েছে যার মাধ্যমে আপনি নিজের HTML ডকুমেন্টগুলিতে কাস্টম ডিভ উপাদানগুলিতে কাস্টম স্ক্রোলবারগুলি প্রয়োগ করতে পারেন। এখানে একটি উদাহরণ যা সাহায্য করে। https://codepen.io/adeelibr/pen/dKqZNb তবে এর সংক্ষেপে। আপনি এরকম কিছু করতে পারেন।

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

সিএসএস ফাইলটি দেখতে এমন দেখাচ্ছে।

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}

#style-1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}
— আদিল ইমরান
সূত্র
2

গুগল দীর্ঘকাল ধরে এর কয়েকটি অ্যাপ্লিকেশনটিতে এটি ব্যবহার করে। কোডটিতে দেখুন যে আপনি যদি পরবর্তী ক্লাস প্রয়োগ করেন তবে তারা ক্রোমে স্ক্রোলবারটি কোনওভাবে লুকিয়ে রাখে তবে এটি এখনও কার্যকর হয়।

ক্লাস আছে jfk-scrollbar, jfk-scrollbar-borderlessএবংjfk-scrollbar-dark

.testg{ border:1px solid black;  max-height:150px;  overflow-y: scroll; overflow-x: hidden; width: 250px;}
.content{ height: 700px}

/* The google css code for scrollbars */
::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
    background: transparent
}
body::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
.jfk-scrollbar::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
.jfk-scrollbar::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
.jfk-scrollbar::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar::-webkit-scrollbar-corner {
    background: transparent
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body.jfk-scrollbar::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
<div class="testg">
    <div class="content">
        Look Ma'  my scrollbars doesn't have arrows <br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
<br/>
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">
    <div class="content">
        Look Ma'  my scrollbars dissapear in chrome<br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
স্নিপেট প্রসারিত করুন

http://jsfiddle.net/76kcuem0/32/

আমি সবে স্ক্রোলবারগুলি থেকে তীরগুলি সরাতে দরকারী বলে মনে করেছি। 2015 এর হিসাবে এটি গুগল ম্যাপে ব্যবহৃত হয়েছে যখন এর উপাদান নকশা ইউআই এর ফলাফলের তালিকার স্থানগুলি অনুসন্ধান করছে।

— le0diaz
সূত্র
1

ওয়েবকিট স্ক্রোলবার বেশিরভাগ ব্রাউজারগুলিতে সমর্থন করে না।

ক্রোম সমর্থন করে

ওয়েবকিট স্ক্রোলবার ওয়েবকিট স্ক্রোলবার ডেমোর জন্য এখানে একটি ডেমো রয়েছে

আপনি যদি আরও উদাহরণের সন্ধান করছেন তবে এটি আরও পরীক্ষা করে দেখুন

আরেকটি পদ্ধতি হ'ল জ্যাকুরি স্ক্রোল বার প্লাগইন

এটি সমস্ত ব্রাউজারগুলিতে সমর্থন করে এবং প্রয়োগ করা সহজ

ডাউনলোড এখানে থেকে প্লাগইন ডাউনলোড করুন

কীভাবে ব্যবহার করবেন এবং আরও বিকল্পের জন্য এটি দেখুন

ডেমো

— Nikz
সূত্র
1

আমি জেএস এবং সিএসএস স্ক্রোলটির প্রচুর চেষ্টা করেছি এবং আমি দেখতে পেলাম যে এটি ব্যবহার করা খুব সহজ এবং IE এবং সাফারি এবং এফএফ-তে পরীক্ষা করা এবং ভাল কাজ করেছে

AS @thebluefox পরামর্শ দেয়

এটা যেভাবে কাজ করে

নীচে স্ক্রিপ্ট যুক্ত করুন 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

এবং এটি এখানে অনুচ্ছেদে যেখানে আপনাকে স্ক্রোল করতে হবে

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

আরও তথ্যের জন্য প্লাগইন পৃষ্ঠা দেখুন

ফেসস্ক্রোল কাস্টম স্ক্রোলবার

আশা করি এটা সাহায্য করবে

— ইউসুফ আলতাফ
সূত্র
0

লোকেরা এখনও একটি ভাল সমাধান খুঁজছেন কেবল আমি এই প্লাগইন সিম্পলবারটিটি সন্ধান করি

নেটিভ স্ক্রোল সহ কাস্টম স্ক্রোলবার ভ্যানিলা জাভাস্ক্রিপ্ট লাইব্রেরি, সাধারণ, হালকা ওজনের, সহজেই ব্যবহারযোগ্য এবং ক্রস ব্রাউজার।

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

— ManBearPig
সূত্র
0

ওয়েবকিট ব্রাউজারগুলি (যেমন ক্রোম, সাফারি এবং অপেরা) অ-মানক :: - ওয়েবকিট-স্ক্রোলবার সিউডো উপাদানটিকে সমর্থন করে , যা আমাদের ব্রাউজারের স্ক্রোলবারের চেহারা পরিবর্তন করতে দেয়।

নোট: :: - WebKit-স্ক্রলবার ফায়ারফক্স বা IE এবং এজ দ্বারা সমর্থিত নয়।

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

div {
  width: 15rem;
  height: 8rem;
  padding: .5rem;
  border: 1px solid #aaa;
  margin-bottom: 1rem;
  overflow: auto;
}

.box::-webkit-scrollbar {
  width: .8em;
}

.box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
 
.box::-webkit-scrollbar-thumb {
  background-color: dodgerblue;
}
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>
স্নিপেট প্রসারিত করুন

তথ্যসূত্র: কীভাবে একটি কাস্টম স্ক্রোলবার তৈরি করবেন

— বিশাল
সূত্র
0

ধরুন আপনার যেমন ডিভ আছে 

<div class="custom_scroll"> ... </div>

সিএসএস স্টাইলগুলি প্রয়োগ করুন 

//custom scroll style definitions
.custom_scroll
{
  overflow-y: scroll;
}

//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar
{
    width: 5px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    opacity: 0.5;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    //background-color: #555;
}

ফলাফল স্ক্রোল হিসাবে প্রদর্শিত হবে

এখানে চিত্র বর্ণনা লিখুন

— Saumyajit
সূত্র
-1

বা এই জাতীয় কিছু ব্যবহার করুন:

var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};

এবং আরম্ভ করুন:

<body onload="new MiniScroll(this);"></body>

এবং কাস্টমাইজ করুন:

.scroll-place { // ... // }
.scroll { // ... // }
— Владимирович Владимирович
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.