Discussion :

[oraya]

Bonjour bonjour

J'ai un souci de CSS que j'arrive pas à résoudre et j'aimerai autant que possible éviter d'utilise du JS.

Voici un exemple sur JSFiddle : Exemple

Ce que je voudrait faire, c'est pouvoir scroll dans la <div> (ça pour l'instant c'est bon), mais quand on arrive au début ou a la fin de la <div>, ne pas scroller la page si on continue à sroller. En gros, je veux pourvoir scroller uniquement l'element que je veux (la page OU la div) et pas la page quand la <div> a plus de place. Ya un moyen facile, c'est de mettre overflow: hidden dans le body, mais ça bloquerai du contenu.

Je sais pas si c'est hyper clair xD Demandez moi si il y a besoin de plus d'info
Merci à tous ! ^^

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="main">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis molestie pretium. Phasellus ut magna faucibus, finibus est in, pretium nisi. Suspendisse potenti. Cras facilisis justo metus, at scelerisque ex venenatis vitae. Vestibulum mi neque, feugiat ut dictum eu, tincidunt nec nisi. Curabitur in nisi volutpat, rutrum massa sit amet, rhoncus purus. Aliquam volutpat ante ut purus sagittis, vitae tempor neque feugiat. Donec fringilla ultricies augue vel tristique. Proin suscipit diam nec magna bibendum elementum. Maecenas odio ligula, consectetur eget quam ut, ornare sollicitudin lorem.
 
    <div id="inDiv">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis molestie pretium. Phasellus ut magna faucibus, finibus est in, pretium nisi. Suspendisse potenti. Cras facilisis justo metus, at scelerisque ex venenatis vitae. Vestibulum mi neque, feugiat ut dictum eu, tincidunt nec nisi. Curabitur in nisi volutpat, rutrum massa sit amet, rhoncus purus. Aliquam volutpat ante ut purus sagittis, vitae tempor neque feugiat. Donec fringilla ultricies augue vel tristique. Proin suscipit diam nec magna bibendum elementum. Maecenas odio ligula, consectetur eget quam ut, ornare sollicitudin lorem. Vestibulum auctor enim a laoreet gravida. Aliquam viverra dignissim sollicitudin. Donec ex diam, molestie at feugiat sagittis, interdum ut ex. Nunc lobortis nibh lacus, malesuada varius massa condimentum congue.
    </div>
    Vestibulum auctor enim a laoreet gravida. Aliquam viverra dignissim sollicitudin. Donec ex diam, molestie at feugiat sagittis, interdum ut ex. Nunc lobortis nibh lacus, malesuada varius massa condimentum congue.
 
Nunc sagittis diam diam, at pretium ligula malesuada et. Pellentesque vel nisl ac ipsum dignissim ultrices. Nulla sit amet malesuada erat. Sed mattis pulvinar aliquet. Duis egestas ligula vel turpis aliquam egestas. Maecenas sit amet luctus odio, nec aliquet erat. Vestibulum vel justo vel tellus vulputate pulvinar. Vivamus lacinia quam eu ex maximus, ac egestas enim pellentesque. Sed sit amet nisl nisi. Pellentesque a orci facilisis turpis pellentesque tempor id faucibus purus.
    Donec a augue eu augue ullamcorper dictum sed at turpis. Nullam iaculis vestibulum est non scelerisque. Duis dictum, purus ac consectetur fringilla, lectus sem lobortis purus, in consequat sem nunc sit amet nulla. Pellentesque augue tortor, lobortis sed ultricies non, tincidunt ultrices felis. Proin lacinia in mauris id laoreet. Integer et luctus elit. Nulla facilisi. Praesent in sem at velit porta dapibus. Proin leo metus, hendrerit id leo in, suscipit viverra metus. Donec quis imperdiet orci. Donec quis felis diam.
 
Vivamus id eros diam. Vivamus at fringilla dolor. Donec quam ex, consequat vel commodo id, eleifend eu purus. Mauris eget efficitur erat, id mollis erat. Ut maximus commodo sodales. Nam purus sapien, semper non massa sit amet, dictum sagittis ligula. Praesent nisl mi, placerat non odio vitae, ornare placerat metus. Maecenas mauris nunc, accumsan sit amet velit sit amet, elementum pharetra enim. Curabitur quis pretium dolor.
 
Pellentesque mattis augue eget est consequat consectetur. Aenean elementum libero libero, eget feugiat velit ornare non. Aliquam finibus mattis leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque turpis est, et vehicula arcu maximus ut. Proin non justo non nisi ullamcorper sodales. Curabitur varius, ligula nec lobortis pretium, augue tellus luctus est, ac aliquam nulla urna vitae libero. Integer molestie dolor enim. Vestibulum tempus viverra iaculis. Proin facilisis leo vel tortor fringilla, a ultricies neque pretium. Sed odio turpis, suscipit id mi in, pellentesque pharetra nisl
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
#main {
    height:100%;
    overflow: auto;
}
 
#inDiv{
    height: 100px;
    overflow: auto;
    color: red;
    border: 2px groove red;
}

[Invité]

Bonjour,
je ne vois pas où est le problème.

• Quand le curseur est dans la div, elle SEULE scrolle.
• Quand le curseur est en dehors de la div, c'est la page qui scrolle.

C'est bien le comportement que tu attends, non ?

[oraya]

Oui, mais va jusqu'en bas de la <div> et continue de scroller vers le bas. A ce moment la, c'est la page qui se met à scroller.
Et c'est ça que je veux éviter ^^

[oraya]

C'est probablement dû à mon trackpad
J'ai pas essayé sur une machine fixe ou avec une souris, mais ça doit venir de la

Merci quand meme