0

Estoy trabajando en mi portafolio de título, el cual consiste en una landing page con páginas horizontales en WordPress utilizando un tema vacío (underscores). Sin embargo, estoy enfrentando un problema con los saltos bruscos que ocurren al hacer clic en los íconos de flechas y enlaces del menú de navegación para ir a la siguiente sección. Aunque he utilizado la propiedad "scroll-behavior: smooth;" en el article que tiene la clase contenedor para suavizar el desplazamiento, este problema persiste en navegadores distintos a Firefox. Además, he intentado probar diferentes librerías de desplazamiento sin éxito.

https://arabello.laboratoriodiseno.cl/portafolio/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


html, body {
    font-size: 100%;
}
/*
    * =================== HEADER ===================
*/
.bg-body-tertiary{
    background-color: transparent;
}
div#navbarNav{
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
}
ul#menu-principal-menu{
    margin: 0;
    text-align: center;
}
a.custom-logo-link{
    max-width: 150px;
    height: auto;
}
div.site-branding{
    background-color: #F8F9FA;
}
/*
    * =================== MAIN ARTICLE ===================
*/
article.contenedor {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (100vw)[3];
    grid-template-columns: repeat(3, 100vw); 
    grid-auto-rows: auto;
   
    overflow-x: scroll;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    background-image: url('../img/fondo-portafolio.jpg');
    margin-bottom: 0;
    scroll-behavior: smooth;
  }
  .slide {
    scroll-snap-align: center;
  } 
  .page{
    margin-bottom: 0;
  }
.content-card-portfolio, .contenedor-habilidades{
    gap: .5em;
}
  .prueba{
    width: 50%;
    margin: 0 auto;
    position: relative;
    margin: auto;
  }
  .prueba2{
    width: 65%;
    margin: 0 auto;
    position: relative;
  }
  a.flechaIzq{
    position: absolute;
    top: 50%;
    left: -20%;
    font-size: 3rem;
    display: block;
  }
  a.flechaDerec{
    position: absolute;
    top: 50%;
    right: -20%;
    font-size: 3rem;
    display: block;
  }
  .verProyecto{
    align-items: center;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 3px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  }
  .verProyecto:active, .verProyecto:hover{
    outline: 0;
  }
  .verProyecto span{
    background-color: rgb(5, 6, 45);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
  }
  .verProyecto:hover span {
    background: none;
  }
  
  /*
    * =================== MAQUINA ESCRIBIR SECCION1 MAIN ===================
*/
.maquinaEscribir{
    white-space: nowrap;
    border-right: 4px solid;
    width: 19ch;
    -webkit-animation: typing 2s steps(19), blink .5s infinite step-end alternate;
            animation: typing 2s steps(19), blink .5s infinite step-end alternate;
    overflow: hidden;
}
@-webkit-keyframes typing {
    from {width: 0}
}
@keyframes typing {
    from {width: 0}
}
@-webkit-keyframes blink {
    50% {border-color: transparent}
}
@keyframes blink {
    50% {border-color: transparent}
}
@media screen and (max-width: 992px) {
    .contenedor{
        display: block;
    }
    a.flechaIzq, a.flechaDerec{
        display: none;
    }
    .prueba, .prueba2{
        width: 100%;
    }
  }
<?php

/**
 * Template part for displaying page slide in page.php
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package portafolio
 */

?>

//este article tiene la clase contenedor para que vean los estilos que tiene
<article id="post-<?php the_ID(); ?>" <?php post_class('contenedor row'); ?>>


    <div class="prueba" id="inicio">
        <a href="#contacto" class="flechaIzq smooth-scroll">
            <i class="fa-solid fa-arrow-left"></i>
        </a>
        <section class="slide">
            <header>
                <h1 class="maquinaEscribir">Hola, soy Arath Abello.</h1>
            </header>
            <article>
                <header>
                    <h2>Soy un desarrollador web frontend y diseñador del instituto DuocUC.</h2>
                </header>
                <p>Soy un apasionado por la tecnología y los videojuegos. Desde mi adolescencia me hacía preguntas sobre ¿Cómo estaban creados los sitios web? Quería explorar ese terreno desconocido y emocionante. Y qué mejor que satisfacer la curiosidad con el autoconocimiento adquirido por mi propia voluntad y dar lo mejor de mí para poder cumplir uno de mis objetivos. &#128512;</p>
                <div class="row m-0 justify-content-between contenedor-habilidades">
                    <?php include get_template_directory() . '/assets/modulos/modulo-portafolio/carpeta-habilidades/loop-habilidades.php' ?>
                </div>
            </article>
        </section>
        <a href="#proyectos" class="flechaDerec smooth-scroll">
            <i class="fa-solid fa-arrow-right"></i>
        </a>
    </div>

    <div class="prueba2" id="proyectos">
    <a href="#inicio" class="flechaIzq smooth-scroll">
            <i class="fa-solid fa-arrow-left"></i>
        </a>
        <section class="slide">
            <header>
                <h2>Proyectos</h2>
            </header>
            <article>
                <header>
                    <h3>Revisa más información de mis proyectos pulsando el botón 'Leer más' o visita y prueba el proyecto completo pulsando el botón 'Ver proyecto'.</h3>
                </header>
                <div class="row m-0 content-card-portfolio">
                    <?php include get_template_directory() . '/assets/modulos/modulo-portafolio/carpeta-portafolio/loop-portafolio.php' ?>
                </div>
            </article>
        </section>
        <a href="#contacto" class="flechaDerec smooth-scroll">
            <i class="fa-solid fa-arrow-right"></i>
        </a>
    </div>


    <div class="prueba" id="contacto">
    <a href="#proyectos" class="flechaIzq smooth-scroll">
            <i class="fa-solid fa-arrow-left"></i>
        </a>
        <section class="slide">
            <header>
                <h2>Contacto</h2>
            </header>
            <article>
                <header>
                    <h3>Para todas las consultas o solicitudes de mis servicios, te invito a llenar este formulario. &#9997; </h3>
                </header>
                <form action="#" method="post" class="formulario">
                    <div class="mb-3">
                        <label for="exampleFormControlInput1" class="form-label">Email</label>
                        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Escribe tu email" name="email">
                    </div>
                    <div class="mb-3">
                        <label for="exampleFormControlTextarea1" class="form-label">Mensaje</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="mensaje" placeholder="Escribe tu mensaje"></textarea>
                    </div>
                    <div>
                        <button type="submit" class="btn btn-primary">Enviar</button>
                    </div>
                </form>
            </article>
        </section>
        <a href="#inicio" class="flechaDerec smooth-scroll">
            <i class="fa-solid fa-arrow-right"></i>
        </a>
    </div>




</article><!-- #post-<?php the_ID(); ?> -->

2 respuestas 2

0

Como puedes ver en este link ésta en propiedad es compatible con la mayoría de los navegadores (a ecepción de Internet Explorer), puedes encotrar un ejemplo de su funcionamiento aqui; sería algo asi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        html{
            scroll-behavior: smooth;
        }

    </style>
</head>
<body>
    <a href="#Seccion1">Seccion 1</a>    
    <a href="#Seccion2">Seccion 2</a>    
    <a href="#Seccion3">Seccion 3</a>    

    <section id="Seccion">
        ...
    </section>
    <section id="Seccion">
        ...
    </section>
    <section id="Seccion">
        ...
    </section>
</body>
</html>

otra opción sería usar javascript haciendo que se haga scroll hasta el elemento en cuestión:

let seccion1 = document.querySellector("#seccion1").

window.scrollTo({
  top: seccion.getBoundingClientRect().top + scrollY,
  left: 0,
  behavior: "smooth",
});
2
  • en el selector .contenedor le puse el scroll-behavior ¿Por qué lo puse ahí? pues porque .contenedor tiene 3 columnas de un ancho de 100vw y eso crea un scroll horizontal y el scroll-behavior funciona en firefox, pero en otros navegadores no y ese es el problema :c
    – phantom
    Commented el 27 jun. 2023 a las 4:39
  • También vi que los navegadores lo traen por defecto desactivado y tengo que activarlo manualmente para que haga efecto el scroll-behavior, pero entonces ¿Cómo hago para que a cada persona se les active el efecto cuando visiten mi sitio?
    – phantom
    Commented el 28 jun. 2023 a las 18:10
0

SOLUCIONADO!! Por si a alguien más le ocurre, lo único que hice fue ir a sistemas -> opciones avanzadas y configuración de rendimiento. Y aquí viene lo importante pues el efecto no aplicaba porque lo tenia en modo rendimiento que este modo le quita todo, efectos, etc. Así que lo puse en el modo predeterminado y así se arreglo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.