Paslėpti slinkties juostą, bet vis dar galima slinkti

Noriu, kad būtų galima slinkti per visą puslapį, bet nebūtų rodoma slinkties juosta.

"Google Chrome" tai yra:

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

Tačiau "Mozilla Firefox" ir "Internet Explorer" taip neveikia.

Taip pat bandžiau tai padaryti CSS:

overflow: hidden;

Tai paslepia slinkties juostą, bet aš nebegaliu slinkti.

Ar yra būdas, kaip galėčiau pašalinti slinkties juostą ir tuo pačiu metu galėčiau slinkti visą puslapį?

Prašau, naudokite tik CSS arba HTML.

Peter Mortensen
Redaguotas klausimas priešpietr lapkritis 2019 в 11:47
Programavimas
internet-explorer firefox google-chrome html css
popietr gegužė 2013 в 1:11
27 peržiūros
Sprendimas

Tik bandymas, kuris veikia gerai.

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

[Darbinis smuikas][1]

JavaScript:

Kadangi slinkties juostos plotis skirtingose naršyklėse skiriasi, geriau ją tvarkyti naudojant JavaScript. Jei atliksite Element.offsetWidth - Element.clientWidth, bus matomas tikslus slinkties juostos plotis.

[JavaScript Working Fiddle][2]

arba

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

[Darbinis smuikas][3]

[JavaScript Working Fiddle][4]

Informacija:

Remdamasis šiuo atsakymu, sukūriau paprastą slinkties įskiepį.

Peter Mortensen
Redaguotas atsakymas priešpietr lapkritis 2019 в 11:49
Komentarai (23)

Naudojimas:

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

Tai gudrybė, leidžianti šiek tiek sutapatinti slinkties juostą su persidengiančiu div, kuris neturi jokių slinkties juostų:

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

Tai tinka tik WebKit naršyklėms... Arba galite naudoti konkrečiai naršyklei būdingą CSS turinį (jei ateityje toks bus). Kiekviena naršyklė galėtų turėti skirtingą ir konkrečią savybę atitinkamoms juostoms.

Microsoft Edge atveju naudokite: Naudokite -ms-overflow-style: -ms-autohiding-scrollbar; arba -ms-overflow-style: none; kaip pagal MSDN.

"Firefox" nėra lygiaverčio atitikmens. Nors tam yra jQuery įskiepis, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Peter Mortensen
Redaguotas atsakymas priešpietr balandis 2019 в 2:26
Komentarai (6)

pridėjimas

    overflow: -moz-scrollbars-none;

man padėjo.

Peter Mortensen
Redaguotas atsakymas priešpietr balandis 2019 в 2:26
Komentarai (5)