How to stop body scroll but keep the scrollbar?

Question

I'm trying to adjust Bootstrap carousel to work on mousewheel. So far the jQuery looks like this:

$('#thumbnailCarousel').bind('mousewheel', function(e){
  $(this).carousel('next');
});
$('#thumbnailCarousel').mouseover(function() {
  $('body').css('overflow-y','hidden');
});
$('#thumbnailCarousel').mouseleave(function() {
  $('body').css('overflow-y','scroll');
});

The first part makes the gallery scrollable with mousewheel. The problem was that the body was scrolling at the same time, so I gave it "overflow-y: hidden" on mouseover.

It's almost what I want now, except that with overflow:hidden the scrollbar obviously dissapears and the layout jumps to the right. It's really ugly, so is there any way I can prevent the body from scrolling while keeping the scrollbar in place?

put `overflow:hidden` on the `body` while the mouse is inside the carousel — Bobby5193, May 22 '14 at 12:44
@Bobby5193 - it's exactly what I already have now (ok, overflow-y as I want to disable the vertical scroll). This is not what my question was about, please read more carefully. — oneday, May 22 '14 at 12:51
oh, my bad :), then I guess this could help you http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily — Bobby5193, May 22 '14 at 12:52

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

I'm not sure if this is the best solution but you could easily add padding to the body exactly the same width of the scroll bar while it is hidden and that would eliminate the sliding. The following code is an example:

$('#thumbnailCarousel').mouseover(function() {
  $('body').css('overflow-y','hidden');
  $('body').css('padding-right', '17px');
});
$('#thumbnailCarousel').mouseleave(function() {
  $('body').css('overflow-y','scroll'),
  $('body').css('padding-right', '0px');
});

See This Working: http://jsfiddle.net/2gkn9/1/

...with dynamic scroll bar width: http://jsfiddle.net/2gkn9/2/

NOTE - This of course isn't complete because the width of the scroll bar is going to change between browsers and across devices. So, you'll want to make sure you get the width of the scroll bar dynamically. The first solution I found for that was here: How can I get the browser's scrollbar sizes?

Hope that helps!

edited May 23 '17 at 12:20

Community

1
1

answered May 22 '14 at 12:54

drew_w

10,320
4
28
49

I've done the same, only used margin instead and it seems to work, unfortunately different browsers seem to have different scrollbar widths, is there a simple way to detect it and use it in this case? I found some solutions here on stackoverflow but I'm not so good in javascript and I don't really know how to apply them in this case. – oneday May 22 '14 at 12:59
1

@oneday Added an example with the dynamic width from the question I referenced before. Best of luck! – drew_w May 22 '14 at 13:02
Thnx! I'm voting for your answer because I think it's usefull, though I accept graphicdivine's answer because it's really simple and does the same trick. Luck to you too! – oneday May 22 '14 at 13:05

score 1 · Accepted Answer · answered May 22 '14 at 12:56

1

Try:

$('#thumbnailCarousel').bind('mousewheel', function(e){
  $(this).carousel('next');
  e.stopImmediatePropagation();
  e.stopPropagation();
  e.preventDefault();
});

answered May 22 '14 at 12:56

graphicdivine

10,937
7
33
59

How to stop body scroll but keep the scrollbar?

2 Answers2