Horizontal scrollbar inside grid

user_16559690 0
Viewed 475

I'm creating 2 parts table, that are connected in between. One part can be scrolled only vertically. Second part is much bigger and can be scrolled vertically (they share vertical scrollbar) and horizontally. Those parts are placed in container that have specific height and width.

.wrapper {
  width: 100vw;
  height: 100vh;
}

.container {
    display: grid;
    grid-template-columns: 30vw 70vw;
    grid-template-rows: 1fr;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.left {
  max-height: 100%;
}

.right {
    max-height: 100%;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
}
<div class="wrapper">
<div class="container">
  <div class="left">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="right">
    <div class="column">
       <div>1</div>
       <div>2</div>
       <div>3</div>
    </div>
    <div class="column">
       <div>1</div>
       <div>2</div>
       <div>3</div>
    </div>
  </div>
</div>
</div>

It is better visible on stackblitz: Example

Desired result

Image

Current result

enter image description here

The code above kind of works, but the scrollbar isn't always visible. It should be stuck to the screen bottom but instead it is stuck to the container bottom. Do you have any idea how to fix this scrollbar?

css html
3 Answers

We can create an outside div container which has the property of scrolling vertically, then create two divs inside, only one of which, scrolly, that has the property of scrolling vertically.

Just a note, open the snippet in fullscreen for the best representaiton of the code:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(0,0,0,.5);
}

         #scroll{
        width: 1000px;
        height: 190px;
        overflow: auto;
        overflow-y: hidden;
        margin: 0 auto;
        white-space: nowrap
    }

    img{
        width: 300px;
        height: 150px;
        margin: 20px 10px;
        display: inline;
    }

    #container{
        width: 1000px;
        height: 190px;
        overflow: auto;
        overflow-x: hidden;
        margin: 0 auto;
        white-space: nowrap
    }

    *{
        margin: 0;
        padding: 0;
    }
    .parent {
        display: flex;
        justify-content: space-around;
    }

    .left {
        border: 1px solid lightgray;
        background-color: red;
        width: 40%;
    }

    .right {
        border: 1px solid lightgray;
        background-color: green;
        width: 40%;
    }
<div id = 'container' class = 'parent'>
    <div class="left">
        <img src='img/idk.jpg'></img>
    </div>
    <div id='scroll' class="right">
        <img src='img/idk.jpg'></img>
        <img src='img/idk.jpg'></img>
        <img src='img/idk.jpg'></img>
        <img src='img/idk.jpg'></img>
        <img src='img/idk.jpg'></img>
        <img src='img/idk.jpg'></img>
    </div>
</div>

I hope this helped! Let me know if you have any further questions or need clarification :)

Edit: Made so that divs are side by side and have color

Edit: If you open the snippet in a new tab, you should get so that both scrollbars are visible at all times. If you don't want the vertical scrollbar visible, just add .right in front of the :: in the css

user_146451010

Just add change overflow: auto; to overflow: scroll; on right. Then you can use .right::-webkit-scrollbar in your CSS to style a scroll bar so it is always visible horizontally and vertically on that div. See below.

Here are the changes I made to your stackblitz

Edit ~ OP wants the left div to scroll with .right vertically but still have a horizontal scrollbar always visible for x and y-axis.

html,
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.container {
  display: grid;
  grid-template-columns: 30vw 70vw;
  grid-template-rows: 1fr;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 70px;
  background-color: rgba(255, 0, 0, 0.1);
}

.left {
  max-height: 100%;
}

.left div {
  height: 300px;
}

.right {
  max-height: 100%;
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  width: 100%;
}

.right div {
  height: 300px;
}

.column {
  min-width: 500px;
}

.right::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
}

.right::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.right::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
<html>

<head>
  <meta charset="UTF-8" />
  <script src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <div class="wrapper">
    <div class="container">
      <div class="left">
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
      <div class="right">
        <div class="column">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>
        <div class="column">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>
        <div class="column">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>
        <div class="column">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>
        <div class="column">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>
        <div class="column">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

user_164963570

maybe not exactly what you wanted but. you should be aware leftContainer and rightContainer css class in my snippet. you can change some width value. if there is anything you are wondering about let me know. I can update answer.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
         overflow: hidden; 
         padding: 0;
         margin: 0;
        }
        .wrapper
        {
            height: 100vh;
            width: 100vw;
            display: flex;
            padding: 0;
            margin: 0;
        }
        .leftContainer {
            height: 100vh;
            width: 30%;
            border: 1px solid blue;
            margin: 0;
            background-color: aqua;
            overflow-y: auto;
        }
        .rightContainer{
            height: 100vh;
            width: 70%;
              margin: 0;
              padding: 0;
              background-color: blueviolet;
              overflow: auto;
        }
        .leftBlocks{
            height: 100px;
            width: auto;
            border: 1px solid red;
            padding: 1px;
            margin: 5px;
            text-align: center;
        }
        .rightBlocks{
            height: 400px;
            width: 400px;
            border: 2px solid yellowgreen;
            padding: 2px;
            margin: 5px;
            text-align: center;
            background-color: bisque;
            display: inline-block;
        }
        .scrollableContainer{
            height: 2000px;
            width: 2000px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="leftContainer">
            <div class="leftBlocks">1</div>
            <div class="leftBlocks">2</div>
            <div class="leftBlocks">3</div>
            <div class="leftBlocks">4</div>
            <div class="leftBlocks">5</div>
            <div class="leftBlocks">6</div>
            <div class="leftBlocks">7</div>
            <div class="leftBlocks">8</div>
            <div class="leftBlocks">9</div>
            <div class="leftBlocks">10</div>
            <div class="leftBlocks">11</div>
            <div class="leftBlocks">12</div>
        </div>
        <div class="rightContainer">
        <div class="scrollableContainer">
            <div class="rightBlocks">1</div>
            <div class="rightBlocks">2</div>
            <div class="rightBlocks">3</div>
            <div class="rightBlocks">4</div>
            <div class="rightBlocks">5</div>
            <div class="rightBlocks">6</div>
            <div class="rightBlocks">7</div>
            <div class="rightBlocks">8</div>
            <div class="rightBlocks">9</div>
            <div class="rightBlocks">10</div>
            <div class="rightBlocks">11</div>
            <div class="rightBlocks">12</div>
        </div>
        </div>
    </div>
</body>
</html>

user_161752270
Related