ซ่อนแถบเลื่อน แต่ในขณะที่ยังคงสามารถเลื่อนได้

ฉันต้องการที่จะเลื่อนดูทั้งหน้า แต่ไม่มีแถบเลื่อนที่แสดง

ใน Google Chrome มันคือ:

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

แต่ Mozilla Firefox และ Internet Explorer ดูเหมือนจะไม่ทำงานเช่นนั้น

ฉันยังลองใน 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 */
}

Fiddle ทำงาน

JavaScript:

เนื่องจากความกว้างของแถบเลื่อนแตกต่างกันไปในเบราว์เซอร์ที่แตกต่างกันจึงควรจัดการกับ 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;
}

Fiddle ทำงาน

ซอทำจาวาสคริปต์ทำงาน

ข้อมูล:

ขึ้นอยู่กับคำตอบนี้ฉันสร้างปลั๊กอินเลื่อนง่าย

มันง่ายใน WebKit ด้วยการใส่สไตล์ที่เป็นตัวเลือก:

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

สำหรับ Firefox เวอร์ชันเก่าให้ใช้: overflow: -moz-scrollbars-none;

UPDATE:

Firefox รองรับการซ่อนแถบเลื่อนด้วย CSS ดังนั้นเบราว์เซอร์หลักทั้งหมดจึงได้รับการคุ้มครอง (Chrome, Firefox, Internet Explorer, Safari เป็นต้น)

เพียงใช้ CSS ต่อไปนี้กับองค์ประกอบที่คุณต้องการลบแถบเลื่อนออก:

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

นี่เป็นโซลูชันเบราว์เซอร์ข้ามแฮ็กน้อยที่สุดที่ฉันรู้อยู่ในปัจจุบัน ตรวจสอบตัวอย่าง

คำตอบเดิม:

นี่เป็นอีกวิธีที่ยังไม่ได้กล่าวถึง มันง่ายมากและมีเพียงแค่สอง divs และ CSS เท่านั้น ไม่จำเป็นต้องใช้ JavaScript หรือ CSS ที่เป็นกรรมสิทธิ์และสามารถใช้ได้กับทุกเบราว์เซอร์ ไม่จำเป็นต้องตั้งค่าความกว้างของภาชนะอย่างชัดเจนจึงทำให้เป็นของเหลว

วิธีนี้ใช้ระยะขอบติดลบเพื่อย้ายแถบเลื่อนออกจากพาเรนต์จากนั้นใช้ระยะห่างเท่ากันเพื่อดันเนื้อหากลับไปที่ตำแหน่งเดิม เทคนิคนี้ใช้ได้กับการเลื่อนแนวตั้งแนวนอนและสองทิศทาง

สาธิตการใช้งาน:

• แนวตั้ง
• ตามแนวนอน
• ทั้งสองทิศทาง

โค้ดตัวอย่างสำหรับรุ่นแนวตั้ง:

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

สิ่งนี้ใช้สำหรับเบราว์เซอร์WebKitเท่านั้น... หรือคุณสามารถใช้เนื้อหา CSS เฉพาะเบราว์เซอร์ (หากมีในอนาคต) เบราว์เซอร์ทุกตัวอาจมีคุณสมบัติที่แตกต่างกันและเฉพาะเจาะจงสำหรับแถบที่เกี่ยวข้อง

สำหรับการใช้งานไมโครซอฟท์ขอบ: -ms-overflow-style: -ms-autohiding-scrollbar;หรือ-ms-overflow-style: none;เป็นต่อ MSDN

ไม่มีเทียบเท่าสำหรับ Firefox แม้ว่าจะมีปลั๊กอิน jQuery เพื่อให้บรรลุสิ่งนี้ http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

คำตอบนี้ไม่รวมรหัสดังนั้นนี่คือทางออกจากหน้า :

ตามหน้านี้วิธีการนี้ไม่จำเป็นต้องทราบความกว้างของแถบเลื่อนก่อนเวลาเพื่อที่จะทำงานและวิธีแก้ปัญหาก็ใช้ได้กับเบราว์เซอร์ทั้งหมดเช่นกันและสามารถดูได้ที่นี่ที่นี่

สิ่งที่ดีคือคุณไม่ได้ถูกบังคับให้ใช้ความแตกต่างของการเติมเต็มหรือความกว้างเพื่อซ่อนแถบเลื่อน

นี่คือซูมปลอดภัย โซลูชันการเติมเต็ม / ความกว้างแสดงแถบเลื่อนเมื่อซูมไปที่ต่ำสุด

แก้ไข Firefox: 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>

เพียงใช้สามบรรทัดต่อไปนี้และปัญหาของคุณจะได้รับการแก้ไข:

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

ตำแหน่งที่ liaddshapes เป็นชื่อของ 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;
}

ต่อไปนี้ทำงานให้ฉันบน Microsoft, Chrome และ Mozilla สำหรับองค์ประกอบ 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 ตามนั้น

ตรวจสอบที่นี่ (ทดสอบใน Internet Explorer และ Firefox)

ณ 11 ธันวาคม 2018 (Firefox 64 ขึ้นไป) คำตอบสำหรับคำถามนี้เป็นเรื่องง่ายมากอย่างแน่นอนเป็น Firefox 64+ ตอนนี้ดำเนินการCSS เลื่อนจัดแต่งทรงผมสเปค

เพียงใช้ CSS ต่อไปนี้:

scrollbar-width: none;

Firefox ลิงค์โน้ต 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
}

เรียกใช้ฟังก์ชันเหล่านี้ในทุกจุดที่คุณต้องการโหลดหรือยกเลิกการโหลดหรือโหลดแถบเลื่อนใหม่ มันยังคงเลื่อนได้ใน Chrome เมื่อฉันทดสอบใน Chrome แต่ฉันไม่แน่ใจเกี่ยวกับเบราว์เซอร์อื่น

สิ่งนี้ใช้ได้กับฉัน:

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

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

บนเบราว์เซอร์สมัยใหม่คุณสามารถใช้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สำหรับทุกขนาดหน้าจอ

กล่องขนาดผลกระทบค่า padding หรือคิดเป็นอัตราการแก้ปัญหาที่พวกเขาทำงานร่วมกับกล่องปรับขนาด: เนื้อหากล่อง

ฉันยังต้องการคำสั่ง "-moz-scrollbars-none" และเช่นเดียวกับ gdoron และ Mr_Green ฉันต้องซ่อนแถบเลื่อน ฉันพยายาม-moz-transformและ-moz-padding-startมีผลกระทบกับ Firefox เท่านั้น แต่มีผลข้างเคียงที่ตอบสนองซึ่งต้องการการทำงานมากเกินไป

วิธีนี้ใช้ได้กับเนื้อหาเนื้อหา 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;
}

การเพิ่มขยายไปยังด้านในขณะที่คำตอบที่ได้รับการยอมรับในขณะนี้จะไม่ทำงานถ้าด้วยเหตุผลบางอย่างที่คุณต้องการที่จะใช้divbox-model: border-box

สิ่งที่ทำงานในทั้งสองกรณีคือการเพิ่มความกว้างของด้านในdivเป็น 100% บวกกับความกว้างของแถบเลื่อน (สมมติว่าoverflow: hiddenใน div ภายนอก)

ตัวอย่างเช่นใน CSS:

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

ใน JavaScript เบราว์เซอร์ข้าม:

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

นี่คือวิธีที่ฉันทำเพื่อเลื่อนแนวนอน CSS เท่านั้นและทำงานได้ดีกับเฟรมเวิร์กเช่น Bootstrap / col- * มันต้องการเพียงสองพิเศษ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>

สไตล์SASSต่อไปนี้ควรทำให้แถบเลื่อนของคุณโปร่งใสในเบราว์เซอร์ส่วนใหญ่ (ไม่รองรับ Firefox):

.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 ดังนั้นฉันจึงตัดสินใจซ่อนแถบเลื่อนโดยแนะนำ div ที่ครอบคลุมมันอย่างเผินๆ ตัวอย่างด้านล่างสำหรับแถบเลื่อนแนวนอน:

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

นี่เป็นวิธีแก้ปัญหา divitis-esque ซึ่งควรใช้ได้กับทุกเบราว์เซอร์ ...

มาร์กอัปมีดังต่อไปนี้และจำเป็นต้องอยู่ภายในบางสิ่งบางอย่างที่มีตำแหน่งสัมพัทธ์ (และควรตั้งค่าความกว้างของมันเช่น 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

เป็นโซลูชั่นที่ใช้เอกสาร JavaScript ที่ครบถ้วนและสมบูรณ์สำหรับปัญหาการเลื่อน

หน้าสาธิต: http://noraesae.github.io/perfect-scrollbar/

วิธีการแฮ็กอีกประเภทหนึ่งคือทำ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เหตุการณ์ในบล็อกของ deepmikoto สิ่งนี้อาจได้ผลสำหรับคุณ แต่ก็ไม่ใช่วิธีแก้ไขปัญหาที่ชัดเจน

ฉันแค่ต้องการแชร์ตัวอย่างรวมเพื่อซ่อนแถบเลื่อนที่ฉันใช้เมื่อพัฒนา มันเป็นคอลเลกชันของตัวอย่างเล็ก ๆ ที่พบบนอินเทอร์เน็ตที่เหมาะกับฉัน:

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

คุณสามารถใช้รหัสด้านล่างเพื่อซ่อนแถบเลื่อน แต่ในขณะที่ยังสามารถเลื่อนได้:

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

ในการซ่อนแถบเลื่อนสำหรับองค์ประกอบที่มีการใช้เนื้อหามากเกินไป

.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

เพียงแค่ตั้งค่าความกว้างของความกว้างของเด็กเป็น 100%, padding เป็น 15 พิกเซลoverflow-xเพื่อเลื่อนและoverflow:hiddenสำหรับผู้ปกครองและความกว้างที่คุณต้องการ

มันทำงานได้อย่างสมบูรณ์บนเบราว์เซอร์หลักทั้งหมดรวมถึง Internet Explorer และ Edge ยกเว้น Internet Explorer 8 และต่ำกว่า