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

Html – How to ensure that a central column can still scroll when the mouse is over a different column

I have a 3-column web page. The left and right columns have fixed width, and the central column uses the remaining width available. I’ve included a simplified version of it in the snippet below.

All columns are set to overflow: auto, to allow the user to scroll vertically.

I would like to make it so that when the user’s mouse is inside the right column, once they scroll to the bottom of that column, the central column will start to scroll.

The reason for this is that the right column will often not have enough content to need to scroll vertically. When this is the case, the web page will appear "broken" if the user happens to have their mouse over the right column, and tries to scroll down with their mouse wheel.

Is there a way to achieve this, and does it require javascript?

Note: the web version of X (Twitter) is exactly how I’d like it to work, but I’m not quite sure how that site is achieving it.

function addText(id) {
  let elem = document.getElementById(id);
  for(let i=0; i<50; i++){
    let child = document.createElement('div');
    child.innerText = `${i%10}`.repeat(200);
    elem.appendChild(child);
  }
}
['a','b','c'].forEach(addText);
.container {
  display: flex;
  position: fixed;
  inset: 0;
  background-color: green;
  width: 100%;
}
.col {
  position: relative;
  height: 100%;
  overflow: auto;
}
#a {
  width: 200px;
  background-color: blue;
}
#b {
  width: 100%;
  background-color: lightgrey;
}
#c {
  width: 200px;
  background-color: red;
}
<div class="container">
  <div class="col" id="a"></div>
  <div class="col" id="b"></div>
  <div class="col" id="c"></div>
</div>
Tags:

2

Answers


  1. 0

    To achieve the desired scrolling effect, you should listen for the wheel event and use WheelEvent.deltaY. If the other columns have been scrolled to their bottom, add this value to the scrollTop property of the center column. It’s also important to check if WheelEvent.deltaY is positive or negative. This way, you can prevent the center column from scrolling when transitioning from bottom to top, and vice versa.

    Please note: I’m not sure if this solution is compatible with mobile devices.

    JS (+JQuery [optional])

    $(document).ready(function(){
    $('.myCol').bind('wheel',chk_scroll);
});


function chk_scroll(e)
{
    var elem = $(e.currentTarget);
    var center = $('#center');
    if ((elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight() && e.originalEvent.deltaY > 0 )|| ( elem.scrollTop() == 0 && e.originalEvent.deltaY < 0)) 
    {
        center.scrollTop(center.scrollTop() +  e.originalEvent.deltaY); 
    }

}

    HTML

    <div style="display: flex;">
  <div class="myCol" style='overflow:auto;height:90px;width:160px'>
    Moby-Dick, also known as The Whale,[1] is a novel first published in 1851 by American author Herman Melville. Moby-Dick is widely considered to be a Great American Novel and a treasure of world literature. The story tells the adventures of the wandering sailor Ishmael, and his voyage on the whaleship Pequod, commanded by Captain Ahab. Ishmael soon learns that Ahab seeks one specific whale: Moby Dick, a ferocious, enigmatic white sperm whale. In a previous encounter, the whale destroyed Ahab's boat and bit off his leg. Ahab intends to take revenge.
    
</div>
<div class="myCol" id="center" style='overflow:auto;height:90px;width:160px'>
    Moby-Dick, also known as The Whale,[1] is a novel first published in 1851 by American author Herman Melville. Moby-Dick is widely considered to be a Great American Novel and a treasure of world literature. The story tells the adventures of the wandering sailor Ishmael, and his voyage on the whaleship Pequod, commanded by Captain Ahab. Ishmael soon learns that Ahab seeks one specific whale: Moby Dick, a ferocious, enigmatic white sperm whale. In a previous encounter, the whale destroyed Ahab's boat and bit off his leg. Ahab intends to take revenge.
    
</div>
<div class="myCol" style='overflow:auto;height:90px;width:160px'>
    Moby-Dick, also known as The Whale,[1] is a novel first published in 1851 by American author Herman Melville. Moby-Dick is widely considered to be a Great American Novel and a treasure of world literature. The story tells the adventures of the wandering sailor Ishmael, and his voyage on the whaleship Pequod, commanded by Captain Ahab. Ishmael soon learns that Ahab seeks one specific whale: Moby Dick, a ferocious, enigmatic white sperm whale. In a previous encounter, the whale destroyed Ahab's boat and bit off his leg. Ahab intends to take revenge.
    
</div>
</div>
    Login or Signup to reply.
  2. 0

    You can do this without js if the sidebars have a fixed position. Somehow:

    body {
  margin: 0;
}

.container {
  background-color: green;
  overflow-y: auto;
  --sidebar-width: min(200px, 25vw);
}

#a {
  width: var(--sidebar-width);
  background-color: blue;
  position: fixed;
  inset: 0 auto 0 0;
  overflow-y: auto;
}

#b {
  margin: 0 var(--sidebar-width);
  background-color: lightgrey;
}

#c {
  width: var(--sidebar-width);
  background-color: red;
  position:fixed;
  inset:0 0 0 auto;
  overflow-y: auto;
}
    <div class="container">
  <div id="a">
    <div style="min-height:200vh">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, quas, ipsum asperiores rerum at voluptate quo laudantium quia repellendus debitis.</div>
  </div>
  <div id="b">
    <div style="min-height:200vh">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, expedita, eveniet hic sed eos at excepturi repellendus non saepe odit voluptatibus possimus deserunt atque. Possimus, alias, velit, labore minus perferendis voluptatum quae fugit dolores eum assumenda ipsa eaque itaque. Corporis neque culpa laudantium omnis possimus eum magnam temporibus tempore aliquid. Molestiae, minima, nisi, sed, amet dignissimos iure laboriosam ducimus neque sit nihil qui ut distinctio consequatur voluptas natus quaerat ipsum dicta assumenda itaque ad consectetur illo saepe voluptate nobis non. Atque, reiciendis, earum quisquam est alias possimus asperiores fugit neque provident accusantium exercitationem iure quidem deserunt consequuntur qui quam excepturi repellat veniam soluta fugiat accusamus odit veritatis error repudiandae delectus inventore tenetur? Eligendi, provident, et, sint, cumque quas maiores incidunt quidem rerum dolorem tempora doloribus nemo optio illum ullam animi delectus iure alias distinctio consequatur odio laboriosam quis pariatur minima assumenda obcaecati beatae nihil vel iusto unde culpa eveniet sit ipsum minus laudantium itaque officiis voluptates! Expedita consequatur quam harum sint laboriosam odit error dolor recusandae optio possimus. Qui, non, facere, quam, commodi vel sint expedita nostrum natus dolorem excepturi inventore doloremque. Odio corrupti at pariatur delectus quisquam accusamus a aspernatur explicabo consequatur voluptates. Quae quibusdam quidem provident accusamus facilis?</div>
  </div>
  <div id="c">
    <div style="min-height:200vh">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, quas, ipsum asperiores rerum at voluptate quo laudantium quia repellendus debitis.</div>
  </div>
</div>

    P.S. You should also note that the mousewheel event will not work on touch devices and mobile devices

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

Back To Top
Search