আমি পুরো পৃষ্ঠায় স্ক্রোল করতে সক্ষম হতে চাই, তবে স্ক্রোলবারটি দেখানো ছাড়াই।
গুগল ক্রোমে এটি:
::-webkit-scrollbar {
display: none;
}
তবে মোজিলা ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরার এর মতো কাজ করবে বলে মনে হয় না।
আমি সিএসএসেও এটি চেষ্টা করেছি:
overflow: hidden;এটি স্ক্রোলবারটি আড়াল করে, তবে আমি আর কোনও স্ক্রোল করতে পারি না।
এখনও পুরো পৃষ্ঠাটি স্ক্রোল করতে সক্ষম হয়ে আমি কী কোনও উপায় স্ক্রোলবার সরিয়ে ফেলতে পারি?
দয়া করে কেবল সিএসএস বা এইচটিএমএল দিয়ে।
উত্তর:
ঠিক একটি পরীক্ষা যা ঠিক কাজ করছে।
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
যেহেতু স্ক্রোলবারের প্রস্থ বিভিন্ন ব্রাউজারে আলাদা হয় তাই এটি জাভাস্ক্রিপ্টের সাহায্যে পরিচালনা করা ভাল। আপনি যদি করেন Element.offsetWidth - Element.clientWidthতবে সঠিক স্ক্রোলবার প্রস্থটি প্রদর্শিত হবে।
ব্যবহার Position: absolute,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
এই উত্তরের ভিত্তিতে, আমি একটি সাধারণ স্ক্রোল প্লাগইন তৈরি করেছি ।
box-sizing: border-box; width: calc(100% + 50px);প্যাডিংয়ের জন্য ঠিক সেট এবং একই মান। কোনও ব্রাউজারের 50px স্ক্রোলবার প্রস্থ / উচ্চতা নেই, সুতরাং এটি কেবল তাদের
Kচ্ছিক স্টাইলিং সহ এটি ওয়েবকিটে সহজ:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
cordovaঅ্যাপ্লিকেশন এ চেষ্টা , ভাল কাজ। overflow:scrollউপাদান প্রয়োগ করতে হয়েছিল।
-webkit-overflow-scrolling: touch
এটি সাধারণ সিএসএস বৈশিষ্ট্য নিয়ে আমার জন্য কাজ করে:
.container {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}ফায়ারফক্সের পুরানো সংস্করণগুলির জন্য, ব্যবহার করুন: overflow: -moz-scrollbars-none;
overflow: -moz-scrollbars-noneফায়ারবক্সে স্ক্রোলবারগুলি লুকিয়ে রাখে তবে স্ক্রোলিং অক্ষম করে। আপনি কি এমন কোনও ডেমো সরবরাহ করতে পারেন যেখানে এটি আপনার জন্য কাজ করছে?
-moz-scrollbars-noneসম্পত্তিটি ফায়ারফক্সের নতুন সংস্করণগুলির জন্য মুছে ফেলা হয়েছে: developer.mozilla.org/en-US/docs/Web/CSS/overflow
-webkit-overflow-scrolling: touch
-moz-scrollbars-noneআপনি ব্যবহার করতে পারেন @-moz-document url-prefix() { .container { overflow: hidden; } }। স্ট্যাকওভারফ্লো . com/ প্রশ্নগুলি / 952861/ … দেখুন ।
হালনাগাদ:
ফায়ারফক্স এখন সিএসএসের সাহায্যে স্ক্রোলবারগুলি আড়াল করে সমর্থন করে, তাই সমস্ত বড় ব্রাউজারগুলি এখন coveredাকা থাকে (ক্রোম, ফায়ারফক্স, ইন্টারনেট এক্সপ্লোরার, সাফারি ইত্যাদি)।
আপনি যে উপাদান থেকে স্ক্রোলবারগুলি সরাতে চান সেটিতে কেবল নিম্নলিখিত সিএসএস প্রয়োগ করুন:
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}এটি হ'ল ন্যূনতম ক্রস ব্রাউজার সমাধান যা আমি বর্তমানে অবগত। ডেমো দেখুন।
মূল উত্তর:
এখানে অন্য উপায় যা এখনও উল্লেখ করা হয়নি। এটি সত্যই সহজ এবং কেবল দুটি ডিভ এবং সিএসএস জড়িত। কোনও জাভাস্ক্রিপ্ট বা স্বত্বাধিকারী সিএসএসের প্রয়োজন নেই এবং এটি সমস্ত ব্রাউজারে কাজ করে। এটি পরিষ্কারভাবে ধারকটির প্রস্থটি নির্ধারণের প্রয়োজন হয় না, সুতরাং এটি তরল হয়ে যায়।
এই পদ্ধতিটি পিতামাতার বাইরে স্ক্রোলবারটি সরানোর জন্য একটি নেতিবাচক মার্জিন এবং তারপরে সামগ্রীটিকে মূল অবস্থানে ফিরিয়ে আনতে একই পরিমাণ প্যাডিং ব্যবহার করে। কৌশলটি উল্লম্ব, অনুভূমিক এবং দ্বিপথ স্ক্রোলিংয়ের জন্য কাজ করে।
ডেমোস:
উল্লম্ব সংস্করণের উদাহরণ কোড:
এইচটিএমএল:
<div class="parent">
<div class="child">
Your content.
</div>
</div>সিএসএস:
.parent {
width: 400px;
height: 200px;
border: 1px solid #AAA;
overflow: hidden;
}
.child {
height: 100%;
margin-right: -50px; /* Maximum width of scrollbar */
padding-right: 50px; /* Maximum width of scrollbar */
overflow-y: scroll;
}ব্যবহার করুন:
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>এটি কোনও ওভারল্যাপিং ডিভের সাথে স্ক্রোলবারকে কিছুটা ওভারল্যাপ করার কৌশল যাতে কোনও স্ক্রোল বার নেই:
::-webkit-scrollbar {
display: none;
}এটি কেবল ওয়েবকিট ব্রাউজারগুলির জন্য ... বা আপনি ব্রাউজার-নির্দিষ্ট সিএসএস সামগ্রী ব্যবহার করতে পারেন (যদি ভবিষ্যতে কোনও থাকে)। প্রতিটি ব্রাউজারের নিজ নিজ বারগুলির জন্য আলাদা এবং নির্দিষ্ট সম্পত্তি থাকতে পারে।
মাইক্রোসফট এজ ব্যবহারের জন্য: -ms-overflow-style: -ms-autohiding-scrollbar;বা -ms-overflow-style: none;যেমন দুটিই MSDN প্রতি ।
ফায়ারফক্সের সমতুল্য নেই। যদিও এটি অর্জনের জন্য একটি jQuery প্লাগইন রয়েছে, http://manos.malihu.gr/tuts/jquery_custom_scrolbar.html
::-webkit-scrollbar { display: none; } .ui-content { -webkit-overflow-scrolling: touch; } // jQuery মোবাইল অনমোবাইলইনিট () $.mobile.touchOverflowEnabled = true;
এই উত্তরে কোডটি অন্তর্ভুক্ত নয়, সুতরাং পৃষ্ঠা থেকে সমাধানটি এখানে দেওয়া হয়েছে :
পৃষ্ঠা অনুসারে কাজ করার জন্য এই পদ্ধতির আগে স্ক্রোলবারের প্রস্থটি জানতে হবে না এবং সমাধানটি সমস্ত ব্রাউজারের জন্যও কাজ করে এবং এখানে দেখা যায় ।
ভাল জিনিস হ'ল আপনি স্ক্রোলবারটি আড়াল করতে প্যাডিং বা প্রস্থের পার্থক্য ব্যবহার করতে বাধ্য হন না।
এটি জুম নিরাপদ। সর্বনিম্ন জুম করা হলে প্যাডিং / প্রস্থের সমাধানগুলি স্ক্রোলবারটি দেখায়।
ফায়ারফক্স ফিক্স: http://jsbin.com/mugiqoveko/1/edit?output
.element,
.outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
display: none;
}<div class="outer-container">
<div class="inner-container">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
</div>
</div>
</div>::-webkit-scrollbar {}
padding-right: 150px;সংশোধন করে। এফএফ, ক্রোম, সাফারি এবং এজতে পরীক্ষিত। বড় ডান-প্যাডিংয়ের কারণে কম জুম স্তরেও কাজ করে।
html { -ms-overflow-style: none;}। এই ব্রাউজারগুলিতে প্যাডিং-হ্যাক ব্যবহার করার দরকার নেই।
overflow-y: scrollএডজ 23 এ কাজ করার জন্য @ টিমোর উত্তর এবং স্ক্রোলের আচরণ পেতে তবে লুকানো (ক্রোমের মতো) ব্যবহার করতে হয়েছিল।
কেবলমাত্র নিম্নলিখিত তিনটি লাইন ব্যবহার করুন এবং আপনার সমস্যার সমাধান হবে:
#liaddshapes::-webkit-scrollbar {
width: 0 !important;
}লিডড্যাশপস যেখানে ডিভের নাম যেখানে স্ক্রোল আসছে।
এটি আমার পক্ষে ক্রস ব্রাউজারে কাজ করে। তবে এটি মোবাইল ব্রাউজারগুলিতে নেটিভ স্ক্রোলবারগুলি গোপন করে না।
ইন SCSS
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* Internet Explorer 11 */
&::-webkit-scrollbar { /** WebKit */
display: none;
}
}ইন সিএসএস
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
display: none;
}{}অর্থ কী? কীভাবে তা ব্যাখ্যা করা যায়? আর &? আপনার উত্তর সম্ভবত বিস্তারিত?
&::-webkit-scrollbar.hide-native-scrollbar::-webkit-scrollbar { }
{ width: 0; height: 0;}পরিবর্তে কেবল :: - ওয়েবকিট-স্ক্রোলবারের display: noneজন্য করুন।
নিম্নলিখিতটি একটি নির্দিষ্ট ডিভ উপাদানটির জন্য মাইক্রোসফ্ট, ক্রোম এবং মজিলায় আমার জন্য কাজ করছিল:
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}scrollbar-width(কেবলমাত্র এফএফ) "পরীক্ষামূলক" হিসাবে পতাকাঙ্কিত হয়েছে
এইচটিএমএল:
<div class="parent">
<div class="child">
</div>
</div>সিএসএস:
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
.child {
height: 150px;
width: 318px;
overflow-y: scroll;
}সেই অনুযায়ী সিএসএস প্রয়োগ করুন।
এটি এখানে পরীক্ষা করুন (ইন্টারনেট এক্সপ্লোরার এবং ফায়ারফক্সে পরীক্ষিত)।
11 ই ডিসেম্বর 2018 (ফায়ারফক্স and৪ এবং তার বেশি) হিসাবে, ফায়ারফক্স +৪+ এখন সিএসএস স্ক্রোলবার স্টাইলিং স্পেকটি প্রয়োগ করে কারণ এই প্রশ্নের উত্তরটি খুব সহজ ।
কেবলমাত্র নিম্নলিখিত সিএসএস ব্যবহার করুন:
scrollbar-width: none;ফায়ারফক্স 64 রিলিজ নোট লিঙ্ক এখানে ।
ব্যবহার করুন:
#subparent {
overflow: hidden;
width: 500px;
border: 1px rgba(0, 0, 0, 1.00) solid;
}
#parent {
width: 515px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
opacity: 10%;
}
#child {
width: 511px;
background-color: rgba(123, 8, 10, 0.42);
}<body>
<div id="subparent">
<div id="parent">
<div id="child">
<!- Code here for scroll ->
</div>
</div>
</div>
</body>ব্যবহার
function reloadScrollBars() {
document.documentElement.style.overflow = 'auto'; // Firefox, Chrome
document.body.scroll = "yes"; // Internet Explorer only
}
function unloadScrollBars() {
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // Internet Explorer only
}আপনি যে কোনও পয়েন্টের জন্য লোড বা আনলোড বা স্ক্রোলবারগুলি পুনরায় লোড করতে চান এই ফাংশনগুলিতে কল করুন। এটি ক্রোমে পরীক্ষিত হওয়ার সাথে সাথে এটি ক্রোমে স্ক্রোলযোগ্য, তবে আমি অন্যান্য ব্রাউজারগুলির সম্পর্কে নিশ্চিত নই।
আধুনিক ব্রাউজারগুলিতে আপনি ব্যবহার করতে পারেন wheel event:
// Content is the element you want to apply the wheel scroll effect to
content.addEventListener('wheel', function(e) {
const step = 100; // How many pixels to scroll
if (e.deltaY > 0) // Scroll down
content.scrollTop += step;
else // Scroll up
content.scrollTop -= step;
});overflow: hiddenএবং এই কোডটি mat-card-content(অবশ্যই কৌণিক 5 তে) স্ক্রোলযোগ্য হওয়ার জন্য এবং এগুলি আমার সমস্যার সমাধান করেছে। দ্রষ্টব্য: আমি e.deltaYআমার হিসাবে stepএটি ব্যবহার করেছি এবং এটি সাধারণ স্ক্রোলিংয়ের মতো কাজ করেছে, তাই আমি সাধারণত স্ক্রোলিংয়ের জন্য মনে করি তবে স্ক্রোলবারটি লুকিয়ে থাকি, এটি সেরা ম্যাচ।
আমার সমস্যা: আমি আমার HTML বিষয়বস্তুতে কোনও স্টাইল চাই না style আমি আমার শরীরটি কোনও স্ক্রোলবার ছাড়াই সরাসরি স্ক্রোলযোগ্য এবং সিএসএস গ্রিডের সাথে কাজ করে কেবল একটি উল্লম্ব স্ক্রোল চাই কোনও পর্দার আকারের জন্য ।
বক্স নির্ধারন মান প্রভাব প্যাডিং বা মার্জিন সমাধান, তারা সঙ্গে কাজ করে বক্স নির্ধারন: সামগ্রী বাক্স ।
আমার এখনও "-মোজ-স্ক্রোলবার-না-না" নির্দেশিকা দরকার এবং জিডোরন এবং মিস্টার_গ্রিনের মতো আমাকেও স্ক্রোলবারটি আড়াল করতে হয়েছিল। আমি চেষ্টা করেছি -moz-transformএবং-moz-padding-start শুধুমাত্র ফায়ারফক্সকে প্রভাবিত করতে, তবে প্রতিক্রিয়াশীল পার্শ্ব প্রতিক্রিয়া ছিল যা খুব বেশি কাজের প্রয়োজন।
এই সমাধানটি "ডিসপ্লে: গ্রিড" স্টাইল সহ এইচটিএমএল বডি কনটেন্টের জন্য কাজ করে এবং এটি প্রতিক্রিয়াশীল।
/* Hide HTML and body scroll bar in CSS grid context */
html, body {
position: static; /* Or relative or fixed ... */
box-sizing: content-box; /* Important for hidding scrollbar */
display: grid; /* For CSS grid */
/* Full screen */
width: 100vw;
min-width: 100vw;
max-width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
margin: 0;
padding: 0;
}
html {
-ms-overflow-style: none; /* Internet Explorer 10+ */
overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}
/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none; /* Might be enough */
background: transparent;
visibility: hidden;
width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
/* Make HTML with overflow hidden */
html {
overflow: hidden;
}
/* Make body max height auto */
/* Set right scroll bar out the screen */
body {
/* Enable scrolling content */
max-height: auto;
/* 100vw +15px: trick to set the scroll bar out the screen */
width: calc(100vw + 15px);
min-width: calc(100vw + 15px);
max-width: calc(100vw + 15px);
/* Set back the content inside the screen */
padding-right: 15px;
}
}
body {
/* Allow vertical scroll */
overflow-y: scroll;
}কোনও অভ্যন্তরে প্যাডিং যুক্ত করা div, বর্তমানে গৃহীত উত্তরের মতো, আপনি যদি কোনও কারণে ব্যবহার করতে চান তবে কাজ করবে না box-model: border-box।
উভয় ক্ষেত্রে যা কাজ করে তা অভ্যন্তরের প্রস্থকে div100% প্লাসের সাথে স্ক্রোলবারের প্রস্থে ( overflow: hiddenবাইরের ডিভকে ধরে রেখে) বাড়িয়ে দিচ্ছে ।
উদাহরণস্বরূপ, সিএসএসে:
.container2 {
width: calc(100% + 19px);
}জাভাস্ক্রিপ্টে, ক্রস ব্রাউজার:
var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';অনুভূমিক স্ক্রোলের জন্য এটি আমি এভাবেই করি; কেবল সিএসএস এবং বুটস্ট্র্যাপ / কল- * এর মতো ফ্রেমওয়ার্কগুলির সাথে ভাল কাজ করে। এটির জন্য কেবল দুটি অতিরিক্ত divএস এবং একটি widthবা max-widthসেট সহ পিতামাতার প্রয়োজন :
আপনি যদি কোনও টাচস্ক্রিন থাকে তবে আপনি এটিকে স্ক্রোল করতে বা আঙ্গুল দিয়ে স্ক্রোল করতে পাঠ্য নির্বাচন করতে পারেন।
.overflow-x-scroll-no-scrollbar {
overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
overflow-x: hidden;
margin-bottom: -17px;
overflow-y: hidden;
width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x: auto;
width: 100%;
padding-bottom: 17px;
white-space: nowrap;
cursor: pointer
}
/* The following classes are only here to make the example looks nicer */
.row {
width: 100%
}
.col-xs-4 {
width: 33%;
float: left
}
.col-xs-3 {
width:25%;
float:left
}
.bg-gray {
background-color: #DDDDDD
}
.bg-orange {
background-color:#FF9966
}
.bg-blue {
background-color: #6699FF
}
.bg-orange-light{
background-color: #FFAA88
}
.bg-blue-light{
background-color: #88AAFF
}<html><body>
<div class="row">
<div class="col-xs-4 bg-orange">Column 1</div>
<div class="col-xs-3 bg-gray">Column 2</div>
<div class="col-xs-4 bg-blue">Column 3</div>
</div>
<div class="row">
<div class="col-xs-4 bg-orange-light">Content 1</div>
<div class="col-xs-3 overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
<div class="col-xs-4 bg-blue-light">Content 3</div>
</div>
</body></html>অলস লোকদের জন্য সংক্ষিপ্ত সংস্করণ:
.overflow-x-scroll-no-scrollbar {
overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
overflow-x: hidden;
margin-bottom: -17px;
overflow-y: hidden;
width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x: auto;
width: 100%;
padding-bottom: 17px;
white-space: nowrap;
cursor:pointer
}
/* The following classes are only here to make the example looks nicer */
.parent-style {
width: 100px;
background-color: #FF9966
}<div class="parent-style overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>margin-bottomহওয়া ভাল padding-bottomতবে একই মান সহ। এটি নীচের অংশের জন্য স্থানের নীচে খাবে না। এটি ওভারল্যাপিং প্রতিরোধ করে।
margin-bottomনেতিবাচক, আমার ধারণা এটি এটিকে কোনও হিসাবে পরিবর্তন করা padding-bottomযায় না, যা নেতিবাচক মানগুলি পরিচালনা করতে পারে না
আমি আমার প্রকল্পে উপরের সমাধানগুলি চেষ্টা করে দেখছি এবং কোনও কারণে ডিভি অবস্থানের কারণে আমি স্ক্রোল বারটি আড়াল করতে পারিনি। অতএব, আমি সিদ্ধান্ত নিয়েছি স্ক্রোল বারটি একটি স্তরের সাথে পরিচয় করিয়ে দিয়ে একটি ডিভের পরিচয় করিয়ে দিয়ে hide নীচে উদাহরণ একটি অনুভূমিক স্ক্রোল বারের জন্য:
<div id="container">
<div id="content">
My content that could overflow horizontally
</div>
<div id="scroll-cover">
</div>
</div>সংশ্লিষ্ট সিএসএস নিম্নরূপ:
#container{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#content{
width: 100%;
height: 100%;
overflow-x: scroll;
}
#scroll-cover{
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
background-color: #fff; /*change this to match color of page*/
}এটি দেহে থাকবে:
<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>এবং এটি সিএসএস:
#maincontainer
{
background: grey;
width: 101%;
height: 101%;
overflow: auto;
position: fixed;
}
#child
{
background: white;
height:500px;
}এটি একটি ডিভায়াইটিস-এস্কু সমাধান যা তবুও সমস্ত ব্রাউজারের জন্য কাজ করা উচিত ...
মার্কআপটি নীচে রয়েছে এবং আপেক্ষিক অবস্থানের সাথে কোনও কিছুর ভিতরে থাকা প্রয়োজন (এবং এর প্রস্থটি সেট করা উচিত, উদাহরণস্বরূপ 400 পিক্সেল):
<div class="hide-scrollbar">
<div class="scrollbar">
<div class="scrollbar-inner">
</div>
</div>
</div>সিএসএস:
.hide-scrollbar {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.scrollbar {
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
right: -50px;
bottom: 0;
}
.scrollbar-inner {
width: 400px;
}perfect-scrollbarপ্লাগ-ইন যেতে উপায় মনে করা হয়, দেখুন: https://github.com/noraesae/perfect-scrollbar
এটি স্ক্রোলবার ইস্যুটির জন্য একটি ভাল-ডকুমেন্টেড এবং সম্পূর্ণ জাভাস্ক্রিপ্ট-ভিত্তিক সমাধান।
ডেমো পৃষ্ঠা: http://noraesae.github.io/perfect-scrolbar/
নিম্নলিখিত SASS স্টাইলিংটি বেশিরভাগ ব্রাউজারগুলিতে আপনার স্ক্রোলবারকে স্বচ্ছ করতে হবে (ফায়ারফক্স সমর্থিত নয়):
.hide-scrollbar {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
&::-webkit-scrollbar {
width: 1px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
}হ্যাকি পদ্ধতির অন্য ধরণের পদ্ধতিটি হ'ল overflow-y: hiddenম্যানুয়ালি এটিকে উপাদানটির সাথে এই জাতীয় কিছু দিয়ে স্ক্রোল করুন:
function detectMouseWheelDirection(e) {
var delta = null, direction = false;
if (!e) { // If the event is not provided, we get it from the window object
e = window.event;
}
if (e.wheelDelta) { // Will work in most cases
delta = e.wheelDelta / 60;
} else if (e.detail) { // Fallback for Firefox
delta = -e.detail / 2;
}
if (delta !== null) {
direction = delta > 0 ? -200 : 200;
}
return direction;
}
if (element.addEventListener) {
element.addEventListener('DOMMouseScroll', function(e) {
element.scrollBy({
top: detectMouseWheelDirection(e),
left: 0,
behavior: 'smooth'
});
});
}ডিপমিকোটোর ব্লগে কীভাবেonmousewheel ইভেন্টগুলি সনাক্ত করতে হবে এবং সেগুলি মোকাবেলা করতে হবে সে সম্পর্কে একটি দুর্দান্ত নিবন্ধ রয়েছে । এটি আপনার পক্ষে কাজ করতে পারে তবে এটি অবশ্যই মার্জিত সমাধান নয়।
বিকাশ করার সময় আমি যে স্ক্রোলবারটি ব্যবহার করি তা গোপন করার জন্য আমি কেবল একটি সংযুক্ত স্নিপেট ভাগ করতে চেয়েছিলাম। এটি ইন্টারনেটে পাওয়া বেশ কয়েকটি স্নিপেটের সংকলন যা আমার পক্ষে কাজ করে:
.container {
overflow-x: scroll; /* For horiz. scroll, otherwise overflow-y: scroll; */
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}উপচে পড়া সামগ্রী ব্যবহারের সাথে উপাদানগুলির জন্য স্ক্রোল বারগুলি আড়াল করতে।
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
} আর একটি সাধারণ কাজ করার মেলা :
#maincontainer {
background: orange;
width: 200px;
height: 200px;
overflow: hidden;
}
#childcontainer {
background: yellow;
position: relative;
width: 200px;
height: 200px;
top: 20px;
left: 20px;
overflow: auto;
}অভিভাবক পাত্রে ওভারফ্লো লুকানো এবং শিশু ধারকটিতে ওভারফ্লো অটো। সহজ।
এই জটিল সমাধান এমনকি পুরানো IE ওয়েব ব্রাউজারেও কাজ করে
এটি [ উল্লম্ব স্ক্রোলবার ] এর মত কাজ
<html>
<head>
<style>
html,body{
overflow:-moz-scrollbars-vertical;
overflow-x:hidden;
overflow-y:hidden;
height:100%;
margin:0 0 0 0
}
</style>
</head>
<body id=body
style="overflow:auto;
height:100%"
onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
//your stuff here
</body>
</html>এটি চেষ্টা করুন: jsfiddle
overflow-xস্ক্রোল করতে এবং 15 পিক্সেলে প্যাডিং করে, কেবলমাত্র সন্তানের প্রস্থের প্রস্থটি 100% এ সেট করুনoverflow:hidden পিতামাতার জন্য এবং আপনি যে প্রস্থটি চান তা
এটি ইন্টারনেট এক্সপ্লোরার 8 এবং এর চেয়ে কম ব্যতীত ইন্টারনেট এক্সপ্লোরার এবং এজ সহ সমস্ত বড় ব্রাউজারগুলিতে পুরোপুরি কাজ করে।
!importantতাই আমি তাদের সকলকে সরিয়ে ফেলেছি