Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scroll particular DIV contents with browser's main scrollbar

Tags:

html

css

I am working on new layout of my site & I come across GIZMODO site, I found that the site can make use of page scroll bar to scroll part of the contents in the site. How can they make it ? I studied their CSS via Firebug, but I am quite confused.

Here is my testing page 1 : http://raptor.hk/dev/theme/dummy.html (this page can center the contents, but cannot scroll as I want)

Here is my testing page 2 : http://raptor.hk/dev/theme/dummy2.html (this page can scroll as I want, but cannot center)

I just want to make the page with left side content scrolling with page scroll bar, but right side content stays in the original position, plus the whole site should align center, i.e. combining my testing page 1 & 2. Can anyone give me some lights?

like image 728
Raptor Avatar asked Jul 31 '11 02:07

Raptor


People also ask

How do I scroll content inside a div?

To fit all the text inside the div, the bi-directional scrolling method will be used. You can apply it by placing the overflow:scroll and white-space:nowrap in the id lifestyle inside the style tag. Notice the scroll bar at the bottom and right side of the div .

How do I scroll to a specific div in HTML?

If you want to scroll the current document to a particular place, the value of HREF should be the name of the anchor to which to scroll, preceded by the # sign. If you want to open another document at an anchor, give the URL for the document, followed by #, followed by the name of the anchor.

How do I Auto scroll a div?

To auto-scroll to end of div when data is added with JavaScript, we can set the scrollTop of the div to the scrollHeight of the div. window. setInterval(() => { const elem = document. getElementById("data"); elem.

Can div have scrollbar?

You need to add style="overflow-y:scroll;" to the div tag. (This will force a scrollbar on the vertical).


1 Answers

Though your Gizmodo example uses additional scripts for handling of (the vertical scroll bar of) the sidebar (which even doesn't work in all browsers), the effect is perfectly possible with pure CSS and it even is not as difficult as it may seem at first sight.

So you want:

  • A horizontally centered layout, possibly widened or narrowed for different browser window sizes,
  • The main content at the left which is vertically scrollable by the browser's main scroll bar,
  • A sidebar at the right which sticks to the top of the browser window, scrollable separately from the main content, and only showing its scroll bar when the mouse hovers over. When scrolled to the end of the sidebar, the window's scroll bar takes over.

See this demonstration fiddle which does all that.

The style sheet:

html, body, * {     padding: 0;     margin: 0; } .wrapper {     min-width: 500px;     max-width: 700px;     margin: 0 auto; } #content {     margin-right: 260px;  /* = sidebar width + some white space */ } #overlay {     position: fixed;     top: 0;     width: 100%;     height: 100%; } #overlay .wrapper {     height: 100%; } #sidebar {     width: 250px;     float: right;     max-height: 100%; } #sidebar:hover {     overflow-y: auto; } #sidebar>* {     max-width: 225px; /* leave some space for vertical scrollbar */ } 

And the markup:

<div class="wrapper">     <div id="content">     </div> </div> <div id="overlay">     <div class="wrapper">         <div id="sidebar">         </div>     </div> </div> 

Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.

I assumed a fluid width for the main content and a static width for the sidebar, but both can perfectly be fluid, as you like. If you want a static width, then see this demo fiddle which makes the markup more simple.

Update

If I understand your comment correctly, then you want to prevent scrolling of the main content when the mouse is over the sidebar. For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.

I think this new demo fiddle does what you want:

<div id="wrapper">     <div id="content">     </div> </div> <div id="sidebar"> </div> 
like image 119
NGLN Avatar answered Sep 20 '22 23:09

NGLN