html

Ik wil door de hele pagina kunnen scrollen, maar zonder dat de schuifbalk wordt weergegeven.

In Google Chrome is het:

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

Maar Mozilla Firefox en Internet Explorer lijken niet zo te werken.

Ik heb dit ook geprobeerd in CSS:

overflow: hidden;

Dat verbergt de schuifbalk, maar ik kan niet meer scrollen.

Is er een manier waarop ik de schuifbalk kan verwijderen terwijl ik toch door de hele pagina kan scrollen?

Met alleen CSS of HTML, alstublieft.

Antwoord 1, autoriteit 100%

Gewoon een test die goed werkt.

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

Werkende viool

JavaScript:

Omdat de breedte van de schuifbalk in verschillende browsers verschilt, is het beter om deze met JavaScript af te handelen. Als u Element.offsetWidth - Element.clientWidthdoet, wordt de exacte breedte van de schuifbalk weergegeven.

JavaScript-werkviool

Of

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

Werkende viool

JavaScript-werkviool

Informatie:

Op basis van dit antwoord heb ik een simple scroll-plug-ingemaakt.

Antwoord 2, autoriteit 53%

Het is gemakkelijk in WebKit, met optionele styling:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

Antwoord 3, autoriteit 50%

Dit werkt voor mij met eenvoudige CSS-eigenschappen:

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

Gebruik voor oudere versies van Firefox: overflow: -moz-scrollbars-none;

Antwoord 4, autoriteit 47%

UPDATE:

Firefox ondersteunt nu het verbergen van schuifbalken met CSS, dus alle belangrijke browsers zijn nu gedekt (Chrome, Firefox, Internet Explorer, Safari, enz.).

Pas eenvoudig de volgende CSS toe op het element waarvan u de schuifbalken wilt verwijderen:

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

Dit is de minst hacky cross-browser-oplossing die ik momenteel ken. Bekijk de demo.

ORIGINEEL ANTWOORD:

Hier is nog een andere manier die nog niet is genoemd. Het is heel eenvoudig en omvat slechts twee div’s en CSS. Er is geen JavaScript of eigen CSS nodig en het werkt in alle browsers. Het vereist ook niet expliciet de breedte van de container in te stellen, waardoor het vloeiend wordt.

Deze methode gebruikt een negatieve marge om de schuifbalk uit de bovenliggende positie te verplaatsen en vervolgens dezelfde hoeveelheid opvulling om de inhoud terug te duwen naar de oorspronkelijke positie. De techniek werkt voor verticaal, horizontaal en in twee richtingen scrollen.

Demo’s:

Voorbeeldcode voor de verticale versie:

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

Antwoord 5, autoriteit 10%

Gebruik:

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

Dit is een truc om de schuifbalk enigszins te overlappen met een overlappende div die geen schuifbalken heeft:

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

Dit is alleen voor WebKit-browsers…
Of u kunt browserspecifieke CSS-inhoud gebruiken (als die er in de toekomst is). Elke browser kan een andere en specifieke eigenschap hebben voor hun respectievelijke balken.

Gebruik voor Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar;of -ms-overflow-style: none;als per MSDN.

Er is geen equivalent voor Firefox.
Hoewel er een jQuery-plug-in is om dit te bereiken,
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Antwoord 6, autoriteit 4%

Dit antwoordbevat geen code, dus hier is de oplossing van pagina:

Volgens de pagina hoeft deze aanpak de breedte van de schuifbalk van tevoren niet te kennen om te werken en de oplossing werkt ook voor alle browsers, en kan het worden gezien hier .

Het goede is dat u niet gedwongen bent om vulling- of breedteverschillen te gebruiken om de schuifbalk te verbergen.

Dit is ook zoom veilig. Vulling / breedte-oplossingen tonen de schuifbalk wanneer ingezoomd tot minimum.

Firefox-fix: 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>

Antwoord 7, Autoriteit 3%

Dit werkt voor mij cross-browser. Dit verbergt echter geen native scrollbars op mobiele browsers.

In SCSS

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

In CSS

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

Antwoord 8, Autoriteit 3%

Bovendien scrollen zonder schuifbalk voor alle browsers.

CSS

.keep-scrolling {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll y axis*/
}
/* Hide scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.keep-scrolling {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

SCSS

.keep-scrolling {
      background-color: #eee;
      width: 200px;
      height: 100px;
      border: 1px dotted black;
      overflow-y: scroll; /* Add the ability to scroll y axis*/
     /* Hide scrollbar for IE, Edge and Firefox */
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
      /* Hide scrollbar for Chrome, Safari and Opera */
      &::-webkit-scrollbar {
        display: none;
      }
    }

HTML

<div class="keep-scrolling">
</div>

Antwoord 9, Autoriteit 3%

Gebruik gewoon na drie regels en uw probleem zal worden opgelost:

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

Waar LiaddShapes de naam is van de div waar de scroll eraan komt.

Antwoord 10, Autoriteit 2%

Gebruik dit om de schuifbalk te verbergen, maar houd functionaliteit:

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

Scrollbar verbergen voor IE, Edge en Firefox

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

Antwoord 11

Het volgende werkte voor mij op Microsoft, Chrome en Mozilla voor een specifiek div-element:

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

Antwoord 12

Vanaf 11 december 2018 (Firefox 64 en hoger) is het antwoord op deze vraag inderdaad heel eenvoudig, aangezien Firefox 64+ nu de CSS Scrollbar Styling-specificatie.

Gebruik gewoon de volgende CSS:

scrollbar-width: none;

Link voor Firefox 64 release-opmerking hier.

Antwoord 13

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

Pas de CSS dienovereenkomstig toe.

Controleer het hier
(getest in Internet Explorer en Firefox).

Antwoord 14

Gebruik om schuifbalken te verbergen voor elementen met overlopende inhoud.

.div{
  scrollbar-width: none; /* The most elegant way for Firefox */
}

Antwoord 15

Gebruik:

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

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>

Antwoord 16

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

Alles wat je hebt geschreven is correct, behalve “overflow”.
webkit voor Chrome en andere browsers

overflow-y: scroll;

of

overflow-y: auto;

Voor Firefox en Edge

scrollbar-width: none;

of

scrollbar-width: thin;

Antwoord 17

 scrollbar-width: none;

werkt voor mij

Antwoord 18

Gebruik

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
}

Roep deze functies aan voor elk punt dat u wilt laden of lossen of de schuifbalken opnieuw laden. Het is nog steeds scrollbaar in Chrome zoals ik het in Chrome heb getest, maar ik ben niet zeker van de andere browsers.

Antwoord 19

In moderne browsers kun je 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;
});

Antwoord 20

Dit werkt voor mij:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}
scroll-content::-webkit-scrollbar {
    width: 0;
}

Antwoord 21

Dit is hoe ik het doe voor horizontaal scrollen; alleen CSS en werkt goed met frameworks zoals Bootstrap / col-*. Het heeft slechts twee extra diven nodig en de ouder met een widthof max-widthset:

Je kunt de tekst selecteren om deze te laten scrollen of met je vingers scrollen als je een touchscreen hebt.

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

Antwoord 22

Mijn probleem: ik wil geen stijl in mijn HTML-inhoud. Ik wil dat mijn lichaam direct kan scrollen zonder enige schuifbalk, en alleen een verticale scroll, werkend met CSS-rastersvoor elk schermformaat.

De Box-sizing Waarde-impactpadding of margin-oplossingen, ze werken met Box-Sizing: Content-Box .

Ik heb nog steeds de “-Moz-Scrollbars-None” -richtlijn nodig, en zoals Gdoron en Mr_Green, moest ik de schuifbalk verbergen. Ik heb het -moz-transformen -moz-padding-start, om alleen invloed te hebben op Firefox, maar er waren reagerende bijwerkingen die te veel werk nodig hadden.

Deze oplossing werkt voor HTML-lichaamsinhoud met “Display: Grid” -stijl, en het is responsief.

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

Antwoord 23

Opvulling toevoegen aan een binnenste div, zoals in het momenteel geaccepteerde antwoord, werkt niet als u om de een of andere reden box-model: border-boxwilt gebruiken .

Wat in beide gevallen wel werkt, is het vergroten van de breedte van de binnenste divtot 100% plus de breedte van de schuifbalk (ervan uitgaande dat overflow: hiddenop de buitenste div).

Bijvoorbeeld in CSS:

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

In JavaScript, meerdere browsers:

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

Antwoord 24

De volgende SASS-stijl zou je schuifbalk in de meeste browsers transparant moeten maken (Firefox wordt niet ondersteund):

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  &::-webkit-scrollbar {
    width: 1px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

Antwoord 25

Ik heb de bovenstaande oplossingen in mijn project geprobeerd en om de een of andere reden kon ik de schuifbalk niet verbergen vanwege de positionering van de div. Daarom besloot ik de schuifbalk te verbergen door een div te introduceren die deze oppervlakkig bedekt. Het onderstaande voorbeeld is voor een horizontale schuifbalk:

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

Overeenkomende CSS is als volgt:

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

Antwoord 26

Dit zal bij de body zijn:

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

En dit is de CSS:

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}
#child
{
    background: white;
    height:500px;
}

Antwoord 27

Dit is een divitis-achtige oplossing die niettemin voor alle browsers zou moeten werken…

De opmaak is als volgt en moet binnen iets met relatieve positionering staan (en de breedte moet worden ingesteld, bijvoorbeeld 400 pixels):

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">
        </div>
    </div>
</div>

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

Antwoord 28

Ik wilde alleen een gecombineerd fragment delen voor het verbergen van de schuifbalk die ik gebruik bij het ontwikkelen. Het is een verzameling van verschillende fragmenten die op internet zijn gevonden en die voor mij werkt:

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

Antwoord 29

U kunt de onderstaande code gebruiken om de schuifbalk te verbergen, maar u kunt nog steeds scrollen:

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

Antwoord 30

Een ander soort hacky-aanpak is om overflow-y: hiddente doen en vervolgens handmatig door het element te scrollen met zoiets als dit:

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

Er is een geweldig artikel over het detecteren en omgaan met onmousewheel-gebeurtenissen in deepmikoto’sblog.
Dit kan voor jou werken, maar het is absoluut geen elegante oplossing.

Previous articleWebForms UnobtrusiveValidationMode vereist een ScriptResourceMapping voor ‘jQuery’. Voeg een ScriptResourceMapping toe met de naam jQuery(hoofdlettergevoelig)

Next articleGebruik van ‘printf’ op een variabele in C

Scrollbalk verbergen, maar toch kunnen scrollen