Div that scrolls independently without affecting the position of other elements

Question

Div that scrolls independently without affecting the position of other elements

<div class="col-10 content" id="content">
         <ul>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
          <li>News</li>
        </ul>
        </div>

.content
{
      overflow:auto;
      overflow-x:hidden;
      height:96%;
      width:100%;
    }

Hello there! I recently created a Div with a collection of news items. My goal is to have the Div scroll while keeping the header and left menu fixed in their positions. Currently, the Div only scrolls when the mouse pointer is inside it, but I want it to scroll continuously regardless of cursor position and have the scrollbar hidden. I've tried various approaches without success. Any suggestions on achieving this without fixing all other elements?

Thank you, Markus

html css scroll

Answer 1

Answer №1

One way to achieve this is by attaching the mouse wheel event to a function that allows you to scroll a specific div.

document.getElementById("mybody").addEventListener("wheel", customScrollFunction);
function customScrollFunction() {
 //Implement your logic to scroll the div
}

I hope this solution proves helpful.

Answer 2

One way to achieve this is by attaching the mouse wheel event to a function that allows you to scroll a specific div.

document.getElementById("mybody").addEventListener("wheel", customScrollFunction);
function customScrollFunction() {
 //Implement your logic to scroll the div
}

I hope this solution proves helpful.

Div that scrolls independently without affecting the position of other elements

Answer №1

Similar questions

Ways to conceal specific content within a text using CSS

Managing various choices in a Select menu using a single submit button

Organize your items vertically using jQuery Mobile's list feature

Ways to evenly distribute divs into rows

Vertical stacks of DIVs suddenly vanish

The novice image slideshow script in JavaScript is causing all images to disappear and generating errors

Issues with displaying or hiding a DIV using javascript - popup box unresponsive

The styling of HTML elements is ineffective when using scoped styles

CSS-enhanced automatic scrolling

Tips for adjusting the duration of a background in jQuery

XSLT selecting the remaining elements in a tokenized array

Saving a dynamically generated table in a PHP session to display every time the current user logs in

What is the most efficient way to transmit an HTML document element from a client to a server in Node JS

Python code encountering issues within Django framework

In Javascript, navigate to a specific section by scrolling down

What causes my paragraph textContent to vanish after briefly displaying its value?

Tips for adding style to a group of SVG elements:

What's causing ng-show to malfunction in IE11 on AngularJS?

Stop the floating left div from wrapping onto a new line

Tips for disabling default browser input validation in React