අනුචලන තීරුව සඟවන්න, නමුත් තවමත් අනුචලනය කිරීමට හැකියාව තිබියදී

මට අවශ්‍ය මුළු පිටුවම අනුචලනය කිරීමට, නමුත් අනුචලන තීරුව පෙන්වීමකින් තොරව.

ගූගල් ක්‍රෝම් හි එය:

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

නමුත් මොසිල්ලා ෆයර්ෆොක්ස් සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් එවැනි ක්‍රියා කරන බවක් නොපෙනේ.

මම මෙය CSS හි ද උත්සාහ කළෙමි:

overflow: hidden;

එය අනුචලන තීරුව සඟවයි, නමුත් මට තවත් අනුචලනය කළ නොහැක.

මුළු පිටුවම අනුචලනය කිරීමට හැකි වන අතරම මට අනුචලන තීරුව ඉවත් කළ හැකි ක්‍රමයක් තිබේද?

කරුණාකර CSS හෝ HTML සමඟ.

හොඳින් ක්‍රියාත්මක වන පරීක්ෂණයක් පමණි.

#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 */
}

වැඩ කරන ෆිදෙල්

JavaScript:

අනුචලන තීරුවේ පළල විවිධ බ්‍රව්සර් වලින් වෙනස් වන බැවින් එය ජාවාස්ක්‍රිප්ට් සමඟ හැසිරවීම වඩා හොඳය. ඔබ එසේ කරන්නේ නම් 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;
}

වැඩ කරන ෆිදෙල්

ජාවාස්ක්‍රිප්ට් ක්‍රියාකාරී ෆෙඩල්

විස්තර:

මෙම පිළිතුර මත පදනම්ව, මම සරල අනුචලන ප්ලගිනයක් නිර්මාණය කළෙමි .

විකල්ප මෝස්තර සහිත වෙබ්කිට් හි එය පහසු ය:

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;
}

සරල CSS ගුණාංග සහිත මෙය මට වැඩ කරයි:

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

ෆයර්ෆොක්ස් හි පැරණි අනුවාද සඳහා, භාවිතා කරන්න: overflow: -moz-scrollbars-none;

යාවත්කාලීන කිරීම:

ෆයර්ෆොක්ස් දැන් සීඑස්එස් සමඟ අනුචලන තීරු සැඟවීමට සහය දක්වයි, එබැවින් සියලුම ප්‍රධාන බ්‍රව්සර් දැන් ආවරණය කර ඇත (ක්‍රෝම්, ෆයර්ෆොක්ස්, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර්, සෆාරි, ආදිය).

ඔබට අනුචලන තීරු ඉවත් කිරීමට අවශ්‍ය මූලද්‍රව්‍යයට පහත CSS යොදන්න:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

මම දැනට දන්නා අවම අනවසර හරස් බ්‍රව්සර් විසඳුම මෙයයි. නිරූපණය බලන්න.

මුල් පිළිතුර:

මෙන්න තවම සඳහන් නොකළ තවත් ක්‍රමයක්. එය සැබවින්ම සරල වන අතර එයට සම්බන්ධ වන්නේ බෙදීම් දෙකක් සහ CSS පමණි. ජාවාස්ක්‍රිප්ට් හෝ හිමිකාර CSS අවශ්‍ය නොවන අතර එය සියලුම බ්‍රව්සර් වල ක්‍රියාත්මක වේ. කන්ටේනරයේ පළල පැහැදිලිවම සැකසීමට අවශ්‍ය නොවන අතර එමඟින් එය තරල බවට පත් වේ.

මෙම ක්‍රමය මඟින් අනුචලන තීරුව මවුපියන්ගෙන් ඉවතට ගෙනයාමට negative ණ ආන්තිකයක් භාවිතා කරයි. තාක්‍ෂණය සිරස්, තිරස් සහ ද්වි-මාර්ග අනුචලනය සඳහා ක්‍රියා කරයි.

නිරූපණ:

• සිරස්
• තිරස්
• දිශාවන් දෙකම

සිරස් අනුවාදය සඳහා උදාහරණ කේතය:

HTML:

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.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>

කිසිදු අනුචලන තීරුවක් නොමැති අතිච්ඡාදනය වන div එකකින් අනුචලන තීරුව තරමක් අතිච්ඡාදනය කිරීම සඳහා මෙය උපක්‍රමයකි:

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

මෙය වෙබ්කිට් බ්‍රව්සර් සඳහා පමණි ... නැතහොත් ඔබට බ්‍රව්සර් විශේෂිත CSS අන්තර්ගතය භාවිතා කළ හැකිය (අනාගතයේදී යමක් තිබේ නම්). සෑම බ්‍රව්සරයකටම ඔවුන්ගේ බාර් සඳහා වෙනස් හා විශේෂිත දේපලක් තිබිය හැකිය.

මයික්රොසොෆ්ට් එජ් භාවිතය සඳහා: -ms-overflow-style: -ms-autohiding-scrollbar;හෝ -ms-overflow-style: none;ලෙස MSDN හි එක් .

ෆයර්ෆොක්ස් සඳහා සමානකමක් නොමැත. මෙය සාක්ෂාත් කර ගැනීම සඳහා jQuery ප්ලගිනයක් තිබුණද, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

මෙම පිළිතුරට කේතය ඇතුළත් නොවේ, එබැවින් පිටුවෙන් විසඳුම මෙන්න :

පිටුවට අනුව, මෙම ප්‍රවේශය වැඩ කිරීම සඳහා අනුචලන තීරුවේ පළල දැන ගැනීමට අවශ්‍ය නොවන අතර විසඳුම සියලු බ්‍රව්සර් සඳහාද ක්‍රියාත්මක වන අතර මෙහි දැකිය හැකිය .

හොඳ දෙය නම්, අනුචලන තීරුව සැඟවීමට ඔබට පෑඩින් හෝ පළල වෙනස්කම් භාවිතා කිරීමට බල නොකිරීමයි.

මෙයද විශාලනය ආරක්ෂිතයි. පැඩින් කිරීම / පළල විසඳුම් අවම වශයෙන් විශාලනය කළ විට අනුචලන තීරුව පෙන්වයි.

ෆයර්ෆොක්ස් නිවැරදි කිරීම: 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>

මෙය මට හරස් බ්‍රව්සරයක් සඳහා ක්‍රියා කරයි. කෙසේ වෙතත්, මෙය ජංගම බ්‍රව්සර්වල ස්වදේශික අනුචලන සඟවන්නේ නැත.

දී SCSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

දී CSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

පහත දැක්වෙන පේළි තුනක් භාවිතා කරන්න, එවිට ඔබේ ගැටළුව විසඳෙනු ඇත:

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

Liaddshapes යනු අනුචලනය පැමිණෙන div හි නමයි.

පහත දැක්වෙන්නේ මා වෙනුවෙන් මයික්‍රොසොෆ්ට්, ක්‍රෝම් සහ මොසිල්ලා හි විශේෂිත වූ අංගයක් සඳහා වැඩ කිරීමයි:

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}

HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

CSS ඒ අනුව යොදන්න.

එය මෙහි පරීක්ෂා කරන්න (ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සහ ෆයර්ෆොක්ස් වලින් පරීක්ෂා කර ඇත).

2018 දෙසැම්බර් 11 වන විට (ෆයර්ෆොක්ස් 64 සහ ඊට වැඩි) ෆයර්ෆොක්ස් 64+ දැන් සීඑස්එස් අනුචලන ශෛලමය පිරිවිතර ක්‍රියාත්මක කරන බැවින් මෙම ප්‍රශ්නයට පිළිතුර ඉතා සරල ය .

පහත දැක්වෙන CSS භාවිතා කරන්න:

scrollbar-width: none;

ෆයර්ෆොක්ස් 64 නිකුතු සටහන් සබැඳිය මෙහි ඇත.

භාවිත:

CSS

#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);
}

HTML

<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
}

ඔබට අනුචලන තීරු පැටවීමට හෝ බෑමට හෝ නැවත පූරණය කිරීමට අවශ්‍ය ඕනෑම ස්ථානයක් සඳහා මෙම කාර්යයන් අමතන්න. මම එය ක්‍රෝම් හි පරීක්‍ෂා කළ පරිදි එය තවමත් ක්‍රෝම් හි අනුචලනය කළ හැකි නමුත් අනෙක් බ්‍රව්සර් ගැන මට විශ්වාස නැත.

මෙය මට වැඩ කරයි:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

අනුචලන තීරුව සැඟවීමට මෙය භාවිතා කරන්න, නමුත් ක්‍රියාකාරීත්වය තබා ගන්න:

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

IE, Edge සහ Firefox සඳහා අනුචලන තීරුව සඟවන්න

.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

නවීන බ්‍රව්සර් මත ඔබට භාවිතා කළ හැකිය 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;
});

මගේ ගැටලුව: මගේ HTML අන්තර්ගතයේ කිසිදු ශෛලියක් මට අවශ්‍ය නැත. මගේ සිරුර කිසිදු අනුචලන තීරුවකින් තොරව කෙලින්ම අනුචලනය කළ හැකි අතර සිරස් අනුචලනය පමණක් CSS ජාල සමඟ වැඩ කිරීමට මට අවශ්‍යය අවශ්‍ය වන අතර ඕනෑම තිර ප්‍රමාණයකට .

මෙම කොටුව-sizing අගය බලපෑම පුරවන හෝ ආන්තිකය විසඳුම්, ඔවුන් සමඟ වැඩ කොටුව-sizing: අන්තර්ගතයට-කොටුව .

මට තවමත් "-moz-scrollbars-none" විධානය අවශ්‍ය වන අතර gdoron සහ Mr_Green මෙන් මට අනුචලන තීරුව සැඟවීමට සිදුවිය. මම උත්සාහ කළා -moz-transformහා-moz-padding-start එකම ෆයර්ෆොක්ස් සඳහා බලපෑමක් කිරීමට, නමුත් ඕනෑවට වඩා වැඩ අවශ්ය බව ප්රතිචාර දක්වන අතුරු ආබාධ ඇති විය.

මෙම විසඳුම HTML ශරීර අන්තර්ගතය සඳහා "display: grid" ශෛලිය සමඟ ක්‍රියා කරන අතර එය ප්‍රතිචාරාත්මක වේ.

/* 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පිටත කොටස මත උපකල්පනය කිරීම) ය.

උදාහරණයක් ලෙස, CSS හි:

.container2 {
    width: calc(100% + 19px);
}

ජාවාස්ක්‍රිප්ට් හි, හරස් බ්‍රව්සරය:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';

තිරස් අනුචලනය සඳහා මම එය කරන්නේ මෙයයි; CSS පමණක් වන අතර Bootstrap / col- * වැනි රාමු සමඟ හොඳින් ක්‍රියා කරයි. එයට අවශ්‍ය වන්නේ අමතර divs දෙකක් පමණක් වන අතර මවුපියන්ට a 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>

පහත දැක්වෙන 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;
  }
}

පිරී ඉතිරී යන අන්තර්ගත භාවිතය සහිත මූලද්‍රව්‍ය සඳහා අනුචලන තීරු සැඟවීමට.

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */

}    

මගේ ව්‍යාපෘතියේ ඉහත විසඳුම් අත්හදා බැලීමට මට සිදු වූ අතර යම් හේතුවක් නිසා කොට් position ාශ ස්ථානගත කිරීම හේතුවෙන් අනුචලන තීරුව සැඟවීමට මට නොහැකි විය. එබැවින්, අනුචලන තීරුව මතුපිටින් ආවරණය වන පරිදි අංශයක් හඳුන්වා දීමෙන් එය සැඟවීමට මම තීරණය කළෙමි. පහත උදාහරණය තිරස් අනුචලන තීරුව සඳහා ය:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

අනුරූප CSS පහත පරිදි වේ:

#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>

මෙය CSS ය:

#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>

CSS:

.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-scrollbar/

අනුචලන තීරුව සැඟවීමට ඔබට පහත කේතය භාවිතා කළ හැකිය, නමුත් තවමත් අනුචලනය කිරීමට හැකියාව තිබියදී:

.element::-webkit-scrollbar { 
    width: 0 !important 
}

තවත් ආකාරයක අනවසර ප්‍රවේශයක් නම්, 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 */
}

වැඩ කරන තවත් සරල ප්‍රහේලිකාවක් :

#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;
    }
  </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