[Résolu] Scrollbar

Bonjour, un petit problème de scrollbar comme indiqué dans le titre...

En fait j'ai un scrollbar:auto sur une div limitée en hauteur. Le défilement se fait donc dans cette div, la barre de défilement apparait donc à droite selon la largeur de ma div.

Or j'aurai souhaité que le défilement de ma div se fasse avec la scrollbar automatique du navigateur, pour éviter l'apparition de deux scrollbars selon les navigateurs.

J'espère être assez claire, voici un bout de code pour mieux comprendre :

div id="contenu-page">
        
        <div id="texte-page">
bla bla bla

</div>
</div>

#contenu-page{
	margin:0px 0 0 250px;
	font-size:15px;
	height:400px;
	width:935px;
	z-index:1;
	padding-top:85px;
}

#texte-page{
	margin-top:5px;
	height:440px;
	overflow:auto;
	overflow-x:hidden;
}

Merci !

Salut,

overflow-y:scroll ?

Bonjour Elizeuh

je n'ai pas compris. Tu aurais un lien ou une capture écran ? Si la hauteur de ta div texte est limitée tu ne devrais pas avoir de double scroll... sauf en cas de petites résolutions c'est de ça dont tu parles ?
Modifié par S'Rvo (10 Oct 2012 - 11:45)

Oui c'est bien en cas de petites résolutions, sur certains navigateurs ou écran une double scroll apparait. J'aimerai donc qu'il n'y ait que la barre du navigateur.

Pour le overflow-y:scroll la barre de défilement reste au même endroit.

Merci !

Dans ce cas tu peux éventuellement vérifier en js la résolution de l'utilisateur et en fonction du résultat, supprimer toujours en js le overflow placé sur ta div texte.
Modifié par S'Rvo (10 Oct 2012 - 11:53)

hm peut-être mais dans ce cas est-ce possible d'avoir de l'aide pour créer cela ? Je ne sais pas coder en js...

Mets ça avant la fermeture de ton body pour tester.

<script type="text/javascript" charset="utf-8">
var resHeight = screen.height;
if(resHeight<600){
document.getElementById('texte-page').style.height="auto";
}
</script>

Dis moi si ça fonctionne et si ça te convient comme alternative. J'ai mis 600 comme hauteur de résolution mais tu peux mettre ce que tu veux.

A priori cela ne fonctionne pas... j'ai du coup supprimé le scroll du css c'est bien cela qu'il faut faire ? j'ai de toute façon essayé avec et sans et le résultat est le même...

non les styles css ne bougent pas. Tu les laisses tels que tu les as écrit. Il faut simplement insérer le script js. Le script vérifie la résolution de l'utilisateur et, selon le résultat, va transformer height:440 en height:auto ce qui a pour but de supprimer le scroll de la div texte-page et laisser le scroll du navigateur faire son travail. C'est clair ou pas ?
Le script cible une div id="texte-page". L'id correspond bien à celui de ta div ?
Modifié par S'Rvo (10 Oct 2012 - 14:51)

Oui oui j'ai copié tel que tu me la donné le texte, sans bouger le css et l'id est bien celui de ma div... pourtant rien ne change. Je code sur un fichier en .php, ça ne change rien ?

Il ne faut pas un fichier .js à part à aller chercher ?

Et ne faut-il pas mettre le code dans le head plutot ?

merci pour ta patience

si tu peux mais là c'est pour tester rapidement. Quelle est la résolution d'écran ou tu vois apparaitre le scroll de ta div et le scroll du navigateur ?

je ne sais pas exactement, sur un écran d'ordinateur portable ou bien quand je réduit la taille de la fenêtre je vois deux scrollbar...

ah oui quand tu réduis la fenetre. Dans ce cas si tu veux que le scroll de ta div disparaisse au redimenssionnement de ta fenetre ce n'est plus seulement un pb de résolution qu'il faut prendre en compte. Avant de voir ça, remplace le 600 que j'ai mis ds le script par 1500 et dis moi ce qui se passe.
Modifié par S'Rvo (10 Oct 2012 - 15:18)

le scroll du css est annulé mais non remplacé par le scroll du navigateur, les images sortent de la div.

ok c'est un premier pas Y a pas moyen de voir ta page en ligne ? Mets en commentaire height:400px; de contenu page.
Modifié par S'Rvo (10 Oct 2012 - 15:24)

http://www.idergo.fr/agence-equipe-idergo.php

Ou veux-tu que je mette height:400px en commentaire ?

#contenu-page{
margin:0px 0 0 250px;
font-size:15px;
/*height:400px;*/
width:935px;
z-index:1;
padding-top:85px;
}

ça ne change rien ^^

tu as toujours 2 scrolls ou tu n'as toujours pas le scroll du navigateur ?
Modifié par S'Rvo (10 Oct 2012 - 15:36)