[Résolu] mettre en place un « scroll snap » (Créer un compte)

Accueil › Forums › Extensions › [Résolu] mettre en place un « scroll snap »
  • WordPress :6.7
  • Statut : résolu
6 sujets de 1 à 6 (sur un total de 6)
  • Auteur
    Messages
  • 3 juin 2025 à 19 h 20 min #2489320
    fifidibosco
    Participant
    Initié WordPress
    28 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 8.2.23
    • Thème utilisé : Kadence
    • Extensions en place : Elementor Free, PDF poster, WP latest posts, Hustle, insert Php code snippet, Premium Addons for Elementor, short code in menu,
    • Nom de l’hébergeur : Local wp
    • Adresse du site : Local wp
    • WordPress : 6.8.1

    Problème(s) rencontré(s) :

    Je voudrais un scroll snap sur ma page d’accueil, je cherche une extension qui pourrait faire la chose. J’ai essyé l’élément « Défilement vertical » de Premium Addons for Elementor mais ça ne fonctionne pas. En fait lorsque je descend dans la page la première fois, ça fonctionne correstement, la page « saute » bien de section en section mais lorsque j’arrive en bas de la page impossible de remonter avec la molette de la souris. Je suis obligé d’utiliser la barre de défilement verticale pour remonter. Une fois en haut de la page ça fonctionne de nouveau, avec la souris, vers le bas de page.

    Ma page d’accueil est ainsi faite :

    • La première section est le header du thème Kadence. (elle est identifiée en section dans le naviguateur) et sa hauteur est « adaptée à l’écran »,
    • Puis il y a quatre containers Elementor dont la hauteur est 100vh chacun,
    • Enfin le pied de page du thème Kadence.

    En fouillant le net j’ai bien trouvé des codes html et Css mais je ne sais pas comment les mettre dans ma page.

    Comment puis-je réaliser, facilement si possible vu mes compétences, ce scroll snap (comment est-ce que ça s’appelle en Français?)

    Par avance merci,

    fifi

    4 juin 2025 à 10 h 07 min #2489325
    Rock4Temps
    Participant
    Maître WordPress
    1224 contributions

    Bonjour,

    Vous pouvez uniquement avec du code css faire votre scroll snap.

    Le code est à renseigner dans le menu:

    Apparence/personnaliser/css additionnel

    Voici un Tuto pour le scroll snap

    4 juin 2025 à 11 h 52 min #2489326
    fifidibosco
    Participant
    Initié WordPress
    28 contributions

    Bonjour Rock4temps et merci pour le coup de main. Je vais tester ça rapidement.

    Bonne journée,

    Fifi

    5 juin 2025 à 20 h 12 min #2489355
    fifidibosco
    Participant
    Initié WordPress
    28 contributions

    bonjour,

    le code css dans le css additionnel de la personnalisation je vois, bien que je ne sache pas lequel utiliser. En revanche la DIV je ne vois vraiment pas ni où ni comment l’insérer.

    fifi

    5 juin 2025 à 20 h 54 min #2489356
    Rock4Temps
    Participant
    Maître WordPress
    1224 contributions

    Vous avez quatre conteneurs de hauteur 100vh
    Dans les paramètres avancés de chaque widget conteneur, vous pouvez
    attribuer une classe CSS par exemple child ( voir image ci-jointe).

    Ensuite vous n’avez plus comme dans l’Exemple 3 : Plein écran vertical
    du tuto renseignez en CSS additionnel le code suivant:

    html {
      scroll-snap-type: mandatory;
      scroll-snap-points-y: repeat(100vh);
      scroll-snap-type: y mandatory;
    }

    .child {
      scroll-snap-align: start;
    }

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    11 juin 2025 à 17 h 58 min #2489507
    fifidibosco
    Participant
    Initié WordPress
    28 contributions

    Bonjour Rock4temps

    sorry pour le délais de réponse;

    J’ai fais comme indiqué et ça fonctionne correctement, merci bien.

    fifi

  • Auteur
    Messages
6 sujets de 1 à 6 (sur un total de 6)
  • Vous devez être connecté pour répondre à ce sujet.