web-dev-qa-db-fra.com

Comment toujours afficher la barre de défilement verticale dans un navigateur?

Je veux toujours afficher la barre de défilement verticale dans ma page Web. Est-il possible d'utiliser javascript? Je pense qu'il est possible d'utiliser javascript ou jQuery. Je veux une barre de défilement verticale s’il ya suffisamment de contenu à afficher ou non. 

merci.

htmlcssbrowser
48
gautamlakum

jQuery ne devrait pas être nécessaire. Vous pouvez essayer d'ajouter le CSS:

body    {overflow-y:scroll;}

Cela fonctionne sur les derniers navigateurs, même IE6.

119
Coin_op

Juste une remarque: Dans OS X Lion, le débordement défini sur "scroll" se comporte davantage comme automatique, les barres de défilement n'apparaissant que lorsqu'elles sont utilisées. Ils disparaîtront s'ils ne sont pas utilisés. Donc, si l'une des solutions ci-dessus ne semble pas fonctionner, c'est peut-être pour cela.

Voici ce dont vous aurez besoin pour le réparer:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

Vous pouvez le coiffer en conséquence.

28
molls223

Il suffit d'utiliser CSS.

body {
  overflow-y: scroll;
}
13
Júlio Santos

définissez la propriété overflow d'un div contenant sur scroll.

3
jambox

essayez d'appeler une fonction sur la méthode onload de votre balise body et modifiez ainsi le style du corps comme ceci: document.body.style.overflow = 'scroll'; De plus, vous devrez peut-être définir la largeur de votre code HTML car cela affichera les barres de défilement horizontales.

votre fichier html ressemblera à quelque chose comme ça

<script language="javascript">
    function showscroll() {
        document.body.style.overflow = 'scroll';
    }
</script>
</head>
<body onload="showscroll()">
2
megha

Voici une méthode. Cela fournira non seulement un conteneur de barre de défilement, mais affichera également la barre de défilement même si le contenu n’est pas suffisant (selon vos besoins). Cela fonctionnerait aussi sur Iphone et les appareils Android aussi ..

<style>
    .scrollholder {
        position: relative;
        width: 310px; height: 350px;
        overflow: auto;
        z-index: 1;
    }
</style>

<script>
    function isTouchDevice() {
        try {
            document.createEvent("TouchEvent");
            return true;
        } catch (e) {
            return false;
        }
    }

    function touchScroll(id) {
        if (isTouchDevice()) { //if touch events exist...
            var el = document.getElementById(id);
            var scrollStartPos = 0;

            document.getElementById(id).addEventListener("touchstart", function (event) {
                scrollStartPos = this.scrollTop + event.touches[0].pageY;
                event.preventDefault();
            }, false);

            document.getElementById(id).addEventListener("touchmove", function (event) {
                this.scrollTop = scrollStartPos - event.touches[0].pageY;
                event.preventDefault();
            }, false);
        }
    }
</script>

<body onload="touchScroll('scrollMe')">

    <!-- title -->
    <!-- <div class="title" onselectstart="return false">Alarms</div> -->
    <div class="scrollholder" id="scrollMe">

</div>
</body>
0
SandBag_1996

Ajoutez la classe à la div que vous voulez faire défiler.

overflow-x: caché; masque la barre de défilement horizontale . Pendant que overflow-y: scroll; vous permet de faire défiler verticalement.

<!DOCTYPE html>
<html>
<head>
<style>
.scroll {
    width: 500px;
    height: 300px;
    overflow-x: hidden; 
    overflow-y: scroll;
}


</style>
</head>
<body>

<div class="scroll"><h1> DATA </h1></div>
0
Sarat Chandra