Set navbar and scroll horizontally in content

Question

Set navbar and scroll horizontally in content

Navigation

#1 by (0 votes)

0

I'm trying to map with a navbar as picture:

ButbymovingtheimageontheXaxistoseetherestofthecontent,navbaralsomovesaccordingtotheimage

How do I enable scroll only on the X axis for the div map container?

Follow css:

Map:

.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;
}

css rolamento

asked by anonymous 06.12.2018 / 03:29

1 answer

Get table HTML data by JSP [closed] What is the reason for the "This view is not constrained ..." error in ConstraintLayout?

score 0 · Accepted Answer

How do I enable scrolling on the X axis only?

(sic) I want to leave the navbar fixed when it rolls sideways and not down

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>

Take this as an example. Better than this, only if you post the complete code of your project, rather than prints.

I made my example based on: How to make a DIV not wrap?