Question 238508 in Html Question posted in
Some basic documentation can be found here.

Html – Scroll overflowed image independent of where the mouse-pointer lies

There is a scrollable background image that takes up the whole page. There is also a div present at the bottom of the page. If I wish to scroll the image, I can only do so when the mouse-pointer rests on the image. I can’t scroll if it is on the bottom div. Is there a way to make the image scrollable from the botttom (or anywhere)?

Here is a JSfiddle describing what I have done so far and what I require.

Tags:

2

Answers


  1. 0

    You can apply pointer-events: none; to .bottom. It might look something like this:

    body {
  margin: 0;
}

.main {
  --bottom-height: 100px;
  width: 450px;
  height: 100vh;
  position: relative;
}

.bottom {
  background-color: red;
  position: absolute;
  height: var(--bottom-height);
  inset: auto 0 0;
  pointer-events: none;
}

.image {
  overflow: auto;
  position: absolute;
  inset: 0;
  padding-bottom: var(--bottom-height);
}

.image img {
  width: 100%;
  height: calc(100% + var(--bottom-height));
  object-fit: cover;
  display: block;
}
    <div class="main">
  <div class="image">
    <img src="https://images.unsplash.com/photo-1684010850063-add4e5fec6a7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60" />
  </div>
  <div class="bottom">
    Doesn't scroll if mouse points here. How to make it so it does?
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Since #bottom is not in the scrolling area, you will need some javascript to

    • capture the scroll event on #bottom
    • prevent the scroll to be captured by #bottom’s parent (here: the document)
    • apply something similar to your scrolling area (actually #image)

    This can be achieved with something like that :

    const image = document.getElementById('image')
const bottom = document.getElementById('bottom')

function onBottomWheel (event) {
  event.preventDefault();
  image.scrollTop = image.scrollTop - event.wheelDeltaY
}

bottom.addEventListener('wheel', onBottomWheel)

    JSFiddle > https://jsfiddle.net/ash_uncover/hgnj0rq2/2/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search