Div with fixed header, content scrollable while hovered over header-CodePudding

I have a scrollable content div with a fixed header on the top. The issue is when the user is hovering over the header and tries to scroll, the content doesn't scroll. How can I keep the header fixed to the top while being able to scroll the content on header hover?

body {
        margin: 0;
    }
    .wrapper {
        width: 60%;
    }
    .header {
        position: fixed;
        top: 0;
        width: calc(60% - 2em);
        padding: 1em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #e5e5e5;
    }
    .content {
        max-height: 300px;
        overflow-y: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: 3.5em;
    }
    a.tile {
        width: calc(33.333% - 32px);
        height: 200px;
        margin-bottom: 6px;
        padding: 12px;
        text-align: center;
        border-radius: 12px;
        border: 1px solid #efefef;
    }

<body>
    <div >
        <div >
            <span>9 of 25</span>
            <div >
                <a href="#" disabled>Previous</a>
                <a href="#">Next</a>
            </div>
        </div>
        <div >
            <a href="#" >Tile 1</a>
            <a href="#" >Tile 2</a>
            <a href="#" >Tile 3</a>
            <a href="#" >Tile 4</a>
            <a href="#" >Tile 5</a>
            <a href="#" >Tile 6</a>
            <a href="#" >Tile 7</a>
            <a href="#" >Tile 8</a>
            <a href="#" >Tile 9</a>
        </div>
    </div>
</body>

You can see in the example the body will scroll when hovered over the header, but not the content div. Issue is seen better in full screen view.

CodePudding user response：

The reason why scrolling when the cursor is over the header doesn't work is because the header element is not a child of the scrollable element: therefore scroll events will not work.

If you are allowed to change the DOM, I'd suggest moving the header into the overflowing container instead: then scroll events are handled automatically. Moreover, using position: sticky on it will ensure the browser reserves sufficient space for the element, without you needing to define a top padding: see proof-of-concept below:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.wrapper {
  width: 60%;
}

.header {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e5e5e5;
}

.content {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

a.tile {
  width: calc(33.333% - 32px);
  height: 200px;
  margin-bottom: 6px;
  padding: 12px;
  text-align: center;
  border-radius: 12px;
  border: 1px solid #efefef;
}

<body>
  <div >
    <div >
      <div >
        <span>9 of 25</span>
        <div >
          <a href="#" disabled>Previous</a>
          <a href="#">Next</a>
        </div>
      </div>
      <a href="#" >Tile 1</a>
      <a href="#" >Tile 2</a>
      <a href="#" >Tile 3</a>
      <a href="#" >Tile 4</a>
      <a href="#" >Tile 5</a>
      <a href="#" >Tile 6</a>
      <a href="#" >Tile 7</a>
      <a href="#" >Tile 8</a>
      <a href="#" >Tile 9</a>
    </div>
  </div>
</body>