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

What causes the difference in behavior between Firefox and Chrome when it comes to multiple column rendering and the use of overflow

What is the reason behind HTML5Boilerplate and other frameworks opting for a CDN to host their jQuery files

XML, XTL, and HyperText Markup Language (HTML)

Struggling to manipulate the transparency of an image contained within a div element

PHP incorporate diverse files from various subfolders located within the main directory

Are there any pre-existing pop-up methods available for AngularJS?

How to style a sublevel menu to appear next to its parent using CSS

"Creating a responsive design: Setting the width of a :before pseudo element based on the size of

Difference among rows

Having trouble with the HTML5 canvas for loop not rendering the initial object in the array?

An alternative to Beautiful Soup for Python 3.2

Looking for the location of a matching brace in a dataset?

Design a unique border for a div element that extends a top-border all the way through the header and a bottom-border that

javax.el.MethodNotFoundException: JSP method cannot be located

How can you use JavaScript to create hyperlinks for every occurrence of $WORD in a text without altering the original content?

Is there a way to overlay a 'secret' grid on top of a canvas that features a background image?

Is there a way to remove specific elements from an array without using jQuery?

Preserve proportions while resizing the browser window

Managing input jQuery with special characters such as 'ä', 'ö', 'ü' poses a unique challenge

I'm perplexed as to why my webpage displays differently across various browsers