Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Enable scroll for specific div and disable scroll for page

Tags:

Is it possible to disable scroll for the page, and only enable for a specific div inside the page?

like image 735
Caspert Avatar asked Aug 23 '13 20:08

Caspert


People also ask

How do I enable scrolling on a div?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.

How do I stop scrolling when scrolling a div element CSS?

mouseleave(function() { $('body'). bind('mousewheel DOMMouseScroll', function() { return true; }); }); This is stopping all scrolling where as I want scrolling to still be possible inside the container.

How do I scroll a specific div?

The scrollTo method: The scrollTo() is used to scroll to the specified element in the browser. Syntax: Here, x-cord specifies the x-coordinate and y-cord specifies the y-coordinate. Example: Using scrollTo() to scroll to an element.

How do I stop Div scrolling?

Disabling scroll with only CSS. There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.


2 Answers

It's ok a css only solution?

If so, just add overflow: hidden to body and overflow: auto to the scrollable div.

body {   overflow: hidden; }  #scroller {   overflow: auto;   height: 100px; } 

Example

like image 31
patrick Avatar answered Sep 27 '22 22:09

patrick


to disable it use:

css

.disableScroll{       overflow-y:hidden;       overflow-x:hidden; } 

just add <body class="disableScroll"> to the disable

inline style <body style="overflow:hidden">

for div use, leave scrolling enabled <div style="overflow:auto;">

Keep in mind that you can use overflow-y for vertical scroll and overflow-x for horizontal scroll properties

like image 155
Tatarin Avatar answered Sep 27 '22 22:09

Tatarin