0

I have a fixed sidebar on the left hand side of the page, and the main content is on the right hand side of the page. The sidebar can have very large items to display and has a scroll bar to overcome the problem of items being off the page. The scroll bar is hidden when the cursor is not over the sidebar.

Everything works correctly in FireFox, but in other browsers, when scrolling on the sidebar, once the bottom of the sidebar is reached, the content scrolls. Or when the top of the sidebar is reached, the content scrolls. The sidebar would never scroll when at the top or bottom of the content though.

What can be done to make the other section not scroll when scrolling at the very top or bottom of the current section?

Here is my HTML and CSS:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Fixed Sidebar</title>
<style type="text/css">
#leftCol {
    position: fixed;
    width: 200px;
    background-color: #DDD; 
    overflow-y: scroll;
    top: 0;
    bottom: 0;
}

#content {
    position: relative;            
    margin-left: 200px;
}

div.mousescroll {
    overflow: hidden;
}
div.mousescroll:hover {
    overflow-y: scroll;
}

</style>
</head>
<body>

    <div id="leftCol" class="mousescroll">
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
    </div>

    <div id="content">

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

    </div>

</body>
</html>

Here is a JSFiddle as a demonstration.

peak
  • 105,803
  • 17
  • 152
  • 177
Sachin
  • 1,646
  • 3
  • 22
  • 59
  • I get the same behavior in all three browsers so I am not sure what you mean. – mattdevio Feb 14 '16 at 05:59
  • Oh i think you didn't get my point. When you use mouse wheel for scrolling by hovering your mouse on sidebar then the content of right hand side scrolls too. This doesn't happen in FF but only in Chrome and IE. Is it a common bug in these two browsers? – Sachin Feb 14 '16 at 06:24
  • Actually, FF does that too, if you rest and then scroll again. – Daniel Cheung Feb 14 '16 at 09:56
  • Wow! what a super observation. Yes true. I have never noticed this before you told me. – Sachin Feb 14 '16 at 10:03

2 Answers2

1

Just recreate the left column in the right column.

https://jsfiddle.net/yt2mty5L/8/

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Fixed Sidebar</title>
<style type="text/css">
    #leftCol {
    position: fixed;
    width: 200px;
    background-color: #DDD; 
    top: 0;
    bottom: 0;
}

#content {
    position: fixed;            
    left: 200px;
    top: 0;
    bottom: 0;
    margin-left: 10px;
    width: calc(100% - 200px);
    overflow-y: scroll;
}

div.mousescroll {
    overflow: hidden;
}
div.mousescroll:hover {
    overflow-y: scroll;
}
</style>
</head>
<body>

    <div id="leftCol" class="mousescroll">
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
        <p>This is a line.</p>
    </div>

    <div id="content">

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatumzzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

    </div>

</body>
</html>

This works as you have requested so that once the left column is done scrolling, the right doesn't start scrolling and once the right column is done scrolling, the left doesn't start scrolling. Please make sure that your meaning is clear and people can understand it next time and avoid using slang terms such as "plz". Type out the entire word, "Please".

Josh
  • 86
  • 1
  • 2
  • 14
  • Plz check the code in action in chrome and IE. Put your mouse over left hand sidebar and scroll. You will see as soon as the scrolling stops either on top or on bottom, the right hand content starts scrolling while the mouse is still over the left sidebar. This behavior is not seen in FF but only in chrome and IE. – Sachin Feb 14 '16 at 07:05
  • Ok so it finally worked. You used `position:fixed` to overcome the problem of main content being scrolled. I had not any issue with my left sidebar scrolling. It was fine. A strange thing I saw in your modified code is `width: 100%-200px;`. Do you think it should work? I don't see this in firebug. So I think this calculation doesn't work in CSS. Anyways, thank you for question editing and pointing out me for using slang terms. Actually I got this bad habit from online chatting. I will keep your suggestion in my mind next time. :) – Sachin Feb 14 '16 at 09:54
  • I am pretty sure that CSS supports subtraction like that. https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=css%20percent%20minus%20pixels Google Searched it. http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels Ah well it does, but I forgot the calc() part... – Josh Feb 14 '16 at 17:56
  • Actually, I tried it just now without the -200px, and it goes 200px off the edge of the screen. So I guess it's supported by default without the calc() function (is that what it would be called in CSS?) in FireFox, Google Chrome, Microsoft Edge and Internet Explorer. – Josh Feb 14 '16 at 17:59
  • If the problem is solved, please mark the solution as the answer to thank the person who submitted the answer and to make it easier for others in the future to find the solution! – Josh Feb 14 '16 at 18:00
  • I knew it already you forgot function calc() but i just thought you came up with some new unknown idea as far as my knowledge is considered. – Sachin Feb 15 '16 at 14:04
  • The strange thing about that is that I've never had a problem without it. I had forgotten the function even existed because it always worked correctly. I've tested on Windows 7 and Windows 10, FireFox, Chrome, Internet Explorer and Edge (Windows 10 Only) As Well as iOS Safari and Android Browser, Chrome and AdBlockPlus Browser. – Josh Feb 15 '16 at 22:50
  • Ok sure. But I think as per W3C guidlines, we should use that function although it works even without it. – Sachin Feb 16 '16 at 05:12
1

I've tested with Firefox and it still scrolls the right hand side if you rest a bit and scroll again.

The reason of the problem

The reason is because the leftbar is inside <body> and when the leftbar can't be scrolled, the browser then tries to scroll its parent, the <body>.

The fix

Using the logic, if <body> can't be scrolled, then the page won't move. So I've added these CSS:

/*This is to make sure that the body can't be scrolled because we are setting the #content to have a 100% height*/
body {
  padding: 0;
  margin:0;
}

/*We are transferring the scrollbar from the body to the #content div*/
#content {
    position: relative;            
    margin-left: 200px;
    max-height:100vh; /*This means 100% of the page's height*/
    overflow:auto;
}

Fiddle: https://jsfiddle.net/danvim/yt2mty5L/5/

Daniel Cheung
  • 4,779
  • 1
  • 30
  • 63
  • Looks like it's working but I still guess its some sort of hack. – Sachin Feb 14 '16 at 10:38
  • @user5307298 Trust me, it is not. When using Chrome or IE and trying to scroll, you are scrolling on the `` the whole time, just because your cursor is on `#leftCol`, it tried to scroll it **first** before continue scrolling down the `` – Daniel Cheung Feb 14 '16 at 10:41