web-dev-qa-db-fra.com

Masquer la barre de défilement du div imbriqué, mais toujours le faire défiler

This est une référence que j’ai utilisée, qui explique comment faire défiler une div avec sa barre de défilement masquée. La seule différence est que j'ai des divs imbriqués. Vérifiez mon violon

HTML:

<div id="main">
    <div id="sub-main">
        <div id="content">
            <div id="item-container">
                <div class="item">a</div>
                <div class="item">b</div>
                <div class="item">c</div>
            </div>
        </div>
    </div>
</div>

CSS:

#main {
    width: 500px;
    height: 500px;
}

#sub-main {
    width: 500px;
    height: 500px;
    overflow: hidden;
}

#content {
    background-color: red;
    width: 500px;
    height: 500px;
    overflow: auto;
}

#item-container {
    width: 1500px;
    height: 500px;
}

.item {
    width: 500px;
    height: 500px;
    font-size: 25em;
    text-align: center;
    float: left;
}

Comme ci-dessus, j'ai un div horizontal débordé et je veux masquer sa barre de défilement. Je dois le faire défiler parce que $.scrollTo() ne fonctionnerait pas autrement.

METTRE À JOUR:

J'ai lu toutes les réponses, mais je n'ai toujours pas résolu mon problème et je ne sais pas ce qui le cause. C’est le live qui a des problèmes… .. En gros, j’essaie de suivre ceci presque exactement la même chose, mais il doit y avoir une raison pour laquelle mon site Web ne fonctionne pas comme prévu. Il y a deux problèmes.

  1. Lorsque je définit overflow: hidden sur un conteneur parent d'éléments à faire défiler, je ne peux pas faire défiler (les fonctions de défilement javascript natives ne fonctionnent pas aussi).
  2. Je veux faire défiler uniquement le conteneur débordé, pas la fenêtre entière. Cela peut être fait en définissant une cible dans $.localScroll({ target: '#projects-content' }) mais rien ne défile lorsque je définis la cible. Si je ne le fais pas, le défilement fonctionne tant que overflow:hidden n'est pas appliqué ..__ Encore une fois, toute aide serait grandement appréciée.

HTML:

<div id="projects"> <!-- start of entire projects page -->
  <div id="project-sidebar">
    <a href="#project-first">
      <div class="sidebar-item sidebar-first">first</div>
    </a>
    <a href="#project-second">
      <div class="sidebar-item sidebar-second">second</div>
    </a>
    <a href="#">
      <div class="sidebar-item sidebar-third">third</div>
    </a>
  </div>

  <div id="project-content"> <!-- this must be the scrollable itmes' container, not the entire window -->
    <div id="project-first" class="project-item"> 
      <!-- these items should be scrollable -->
      <div class="project-subitem" id="first-sub1">
        <a href='#first-sub2' class='next'>next</a>
      </div>
      <div class='project-subitem' id='first-sub2'>
        <a href='#first-sub1' class='prev'>prev</a>
      </div>
      <!-- end of scrollable items -->
    </div>
  </div> <!-- end of scroll scroll container -->
</div> <!-- end of entire projects page -->

<script>
  // FIXME: when I set target, nothing scrolls.
  // But I don't want the entire window to scroll
  $('#projects').localScroll({
    //target: '#project-content',
    hash: false
  });
</script>

CSS

#project-content {
  width: 80%;
  height: 100%;
  position: relative;
  float: left;
}

#project-sidebar {
  float: left;
  width: 20%;
  height: 100%;
}

.project-item {
  width: 300%;
  height: 100%;
}

.project-subitem {
  height: 100%;
  width: 33.33%;
  position: relative;
  float: left;
}

Mettre à jour:

Après avoir ajouté overflow:scroll à #project-content, le défilement fonctionne comme prévu. Tout ce dont j'ai besoin maintenant est de faire disparaître les barres de défilement dans #project-content. J'ai essayé d'ajouter overflow:hidden à son parent mais sans succès. J'ai également essayé de l'ajouter à html, body, mais tout le document refuse d'accepter les fonctions de défilement telles que scrollTop().

Toute aide est la bienvenue!

javascripthtmlcssscroll
12
Maximus S

Théorie :

La technique consiste à utiliser un conteneur parent plus court que l'élément enfant avec la barre de défilement. Cette image montre ce que je veux dire:

Hide scollbar

Entraine toi :

Dans votre cas, je suggère d'utiliser le positionnement absolu et la valeur inférieure négative sur #project-content pour qu'il déborde de son conteneur parent (#projects) en bas.

Le point est maintenant quelle valeur négative? Ce doit être la même valeur que le with d'un scroll mais les barres de défilement ne sont jamais de la même largeur selon les navigateurs. Je suggère donc de donner une valeur plus grande: -30pxpour être sûr qu'il est caché. Vous aurez juste besoin de faire attention à ne pas avoir de contenu trop proche du bas qui peut être caché sur les sourcils avec de fines barres de défilement.

Voici le code CSS que vous devez ajouter à votre site Web:

#projects{
    position: relative;
}

#project-content{
    position: absolute;
    top: 0;
    left: 20%;
    bottom: -30px;
    /* remove: 
        height: 100%; 
        position: relative; 
        float: left; 
        padding-bottom: -15px
    /*
}
13
web-tiki

les barres de défilement prennent environ 20 pixels, il suffit donc de vous faire défiler div 20 pixels plus haut et 20 pixels plus large et vos barres de défilement seront masquées

#content {
    background-color: red;
    width: 520px;
    height: 520px;
    overflow: auto;
}

Exemple

4
Pete

C'est un peu tricher mais pourriez-vous le cacher derrière le #content comme ceci DEMO

#content {
    background-color: red;
    width: 500px;
    height: 480px;
    overflow: hidden;
}

#item-container {
    width: 1500px;
    height: 500px;
    overflow: scroll;
}
3
Niklas

Si vous connaissez tous les conteneurs pouvant faire défiler l'écran, vous pouvez masquer la barre de défilement avec CSS et un peu de JS. Pour les navigateurs Webkit (safari, google chrome, opera), seule la solution CSS permet de définir la largeur de la barre de défilement sur 0. Pour IE, Firefox et les autres navigateurs non-Webkit, vous devez calculer la largeur de la barre de défilement qui sera utilisée comme marge négative. juste pour vous le contenu défilable. 

Pour ce faire, vous devez envelopper votre contenu dans div avec overflow-y:scroll pour toujours afficher la barre de défilement verticale et masquer cette barre de défilement avec margin-right:-17px et parent overflow:hidden. Exemple: ici . Pas besoin de définir une largeur fixe, ni une hauteur.

C'est la manière utilisée dans jQuery Scrollbar . Masquer la barre de défilement horizontale est plus compliqué et nécessite de gérer les modifications de contenu pour recalculer la hauteur du conteneur.

3
Gromo

La solution pour rendre le contenu lui-même avec le défilement horizontal.

Il suffit d'augmenter la hauteur de #main et de #content.

#main {
    width: 500px;
    height: 520px;

}

#sub-main {
    overflow: hidden;

}

#content {
    background-color: red;
    width: 500px;
    height: 520px;
    overflow: auto;

}

#item-container {
    width: 1500px;
    height: 500px;
    overflow: hidden;
}

.item {
    width: 500px;
    height: 500px;
    font-size: 25em;
    text-align: center;
    float: left;
}
2
Samuraik

J'ajoute basiquement padding:0 1em 1em 0; à l'élément où il est censé être caché, cela masque les deux barres de défilement si le parent a overflow: hidden. Ajustez padding-bottom ou seulement padding-right, s'il ne faut en cacher qu'un seul.

1em est la largeur moyenne des barres de défilement dans la plupart des navigateurs: http://jsfiddle.net/5GCsJ/912/

2
G-Cyr
  1. Utilisez un script pour créer des barres de défilement personnalisées.

http://manos.malihu.gr/jquery-custom-content-scroller/

  1. Ensuite, utilisez CSS (ou modifiez le script ou modifiez la configuration du script) pour masquer les barres de défilement personnalisées.
1
Pawel

Je l'ai fait grossièrement en utilisant jQuery et votre exemple

Vérifiez ceci violon :

J'ai simplement détecté la direction de la molette et poussé la barre de défilement avec jQuery

$(document).ready(function(){
    $('#content').bind('mousewheel', function(e){
        var curScroll = $("#content").scrollLeft();
        if(e.originalEvent.wheelDelta > 0) {            
            $("#content").scrollLeft(curScroll-500);
        } else {
            $("#content").scrollLeft(curScroll+500);
        }
    });
});

C'est "brut" parce que j'ai codé en dur certaines valeurs comme le montant 500px pour faire défiler, vous pourriez écrire un peu plus de javascript pour détecter de manière dynamique le montant à défiler. De plus, je ne sais pas si la valeur wheelDelta sera +120 pour les versions supérieures et -120 pour les versions antérieures, pour vous et les autres utilisateurs.

Notez également que scrolLeft () peut être animé .. pour des transitions plus douces.

0
petsoukos