Barre de défillement verticale

**lelectronique.com** · 19/10/2009, 18h34

Bonsoir,
J'essaye de faire défiler un div avec une barre dé défilement j'ai bien trouver la propriété overflow du div mais je n'aime pas trop la barre

est ce posible d'une autre maniere avec jquery par exemple ou rendre plus belle cette barre de navigation
merci d'avance
bonne soirée
Ludo

**onirisme** · 19/10/2009, 20h50

Bonjour,

Si c'est un plugin que tu cherches, il existe celui là :

http://www.kelvinluck.com/assets/jqu...crollPane.html

Si tu souhaites développer ta propre scrollbar, jete un coup d'oeil sur le widget "slider" :

http://jqueryui.com/demos/slider/

Dis moi si tu as des problèmes pour la mise en place.

**danielhagnoul** · 19/10/2009, 23h20

Bonsoir.

Avec jQuery, il est possible de réaliser un « scrolling » sur une <div style="overflow:hidden ;"> et sans barre de défilement. Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
        div#affiche {
            width:300px;
            height:300px;
            overflow:hidden;
            margin:12px;
            padding:6px;
            border:1px solid #999999;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
 
            /*
            * On peut faire un scroll sur la div affiche
            * Même si overflow = hidden
            */
            var offset = 60;
            var obj = $("#affiche");
 
            $("#btnMonte").click(function(){
                if (obj.scrollTop() < obj.innerHeight()){
                    obj.scrollTop(obj.scrollTop() + offset);
                    $("#resultat").text("top = " + obj.scrollTop());
                }
            });
 
            $("#btnDescend").click(function(){
                if (obj.scrollTop() > 0){
                    obj.scrollTop(obj.scrollTop() - offset);
                    $("#resultat").text("top = " + obj.scrollTop());
                }
            });
 
            // Firebug
            //console.log($("#affiche").innerHeight());
 
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <p>
            <button style="margin-left:36px;" id="btnMonte" type="button">Monter</button>
            <span style="margin-left:24px; margin-right:24px;" id="resultat">top = 0</span>
            <button id="btnDescend" type="button">Descendre</button>
        </p>
        <div id="affiche">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
            </p>
            <p>
                Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
            </p>
        </div>
    </div>
</body>
</html>

Barre de défillement verticale

jQuery

Vue hybride

Discussions similaires

Partager

Partager