0

Estou tentando fazer um mapa com com uma navbar conforme imagem:

inserir a descrição da imagem aqui

Só que ao mover a imagem no eixo X para ver o restante do conteúdo, a navbar move também conforme a imagem

inserir a descrição da imagem aqui

Como faço para habilitar o scroll somente no eixo X para a div conteiner do mapa?

Segue css:

Mapa:

.mapa, .rota {
  position: absolute;
  height: 100%;
}

.mapa {
  z-index: 1;
}

.rota {
  z-index: 2;
}

Navbar:

nav{
    display: flex;
    height: 100%;
    position: relative;
    height: 70px;
    background-color: rgb(75, 87, 100);
    width: 100%;
    border-bottom: 5px solid rgb(233, 128, 99);
}
.arrow-back{
    width: 25px;
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
}
.nav-search {
    flex-direction: column;
}
3
  • Seu objetivo é que a navbar esteja sempre visível, independente do usuário ter rolado a página pra baixo? Se sim, pode fixar sua navbar: position: fixed; top: 0; left: 0; right: 0;. Lembre-se de colocar o z-index com valor acima do conteúdo da sua aplicação (Costumo colocar 999).
    – LipESprY
    6/12/2018 às 3:59
  • Quero deixar a navbar fixa quando ele rolar para os lados e não para baixo 6/12/2018 às 4:03
  • Amigo o principal que eu o html vc não colocou na pergunta. Edite e coloque o html e o CSS completo se possível. Vc esta usando algum framework tipo Bootstrap ou outro?
    – hugocsl
    6/12/2018 às 9:15

1 Resposta 1

0

Como faço para habilitar o scroll somente no eixo X?

(sic) Quero deixar a navbar fixa quando ele rolar para os lados e não para baixo

div.topo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;

    background-color: rgb(40, 40, 90);
    color: rgb(255, 255, 255);
}
div.conteudo {
    position: absolute;
    top: 70px;
    width: 50%;
    height: 200px;
    overflow-x: scroll;
    overflow-y: scroll; /* PODE ALTERAR PARA "hidden" CASO NÃO QUEIRA SCROLL VERTICAL */
    white-space: nowrap; /* IMPEDE A QUEBRA DE LINHA */
}
div.algo {
    display: inline-block; /* ALINHA OS ELEMENTOS */

    width: 200px;
    height: 150px;

    background-color: rgb(230, 230, 230);
    border: solid 1px rgb(230, 180, 180);
}
<!DOCTYPE html>
<html>
    <head>
        <title>Scroll horizontal - LipESprY</title>
    </head>
    <body>
        <div class="topo">
            Barra topo
        </div>
        <div class="conteudo">
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
            <div class="algo">Alguma coisa...</div>
        </div>
    </body>
</html>

Tome isto como um exemplo. Melhor que isto, só se você postar o código completo do seu projeto, ao invés de prints.

Fiz meu exemplo baseando-me em: How to make a DIV not wrap?

1
  • 1
    Exatamente isso! Obrigado 7/12/2018 às 13:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .