1

Im having a bit of trouble with this. How do I prevent the browser from scrolling when an element (a div) is shown.

I have a button (positioned on the bottom of the webpage) to show an element (positioned on the top of the webpage). If I scroll to the bottom of the page to click the button the browser automatically scrolls on top where the element is positioned. How do I prevent this?

Basically, when I scroll to the bottom of the webpage to show the element, I want to retain the browser's position in the bottom of the page. Is there anyway to do this?

Nitche x Kris
  • 47
  • 7
  • Hi Nitche, when you say show the element, does it mean explicitly changing the display mode of the element? Could you please share the code. I guess you can implement $when(/*Code to show the element*/).done(function(){ /*Lock or disable the scroll*/}); It would be helpful If you could please share the code snippet. – ajaysinghdav10d Jul 11 '16 at 18:21
  • you can add $(your_element_here).css('display','none'); to hide it OR $(your_element_here).css('display','block'); to show it. Basically its the same nature of $(your_element_here).show(); and $(your_element_here).hide();. If this is what you mean? – Nitche x Kris Jul 11 '16 at 19:24
  • if you want to trigger something after the element is shown or hide maybe you can refer to this: http://stackoverflow.com/questions/178325/checking-if-an-element-is-hidden – Nitche x Kris Jul 11 '16 at 19:32

3 Answers3

1

Just figured it out. It turns out that the answer I was looking for was in here: https://forum.jquery.com/topic/show-and-hide-causing-page-to-scroll-top

Then you use hide() it hides the element (using display:none) therefore stops taking space in the webpage. THe show() behaves as display:block and therefore starts taking space in the webpage. By doing this, the browser adjusts by teleporting (or scrolling) into the position where the element was shown or hide.

To prevent this from happening, the following methods can be used:

  • Give a fixed height dimension to the container, so if the contained element disappears, the height remains the same therefore no adjustments from the browser will trigger.

  • Add a 1 x (element_height) transparent gif next to the element

  • Use visibility:hidden and visibility:visible instead. (But this still takes up space even if the element is invisible)

Using the 1st option worked for me. Hope this helps :)

Nitche x Kris
  • 47
  • 7
0

Set the CSS of the the HTML and BODY elements during this period to:

$("body,html").css({"overflow":"hidden"});

And after the event finishes, add the following jquery:

$("body,html").css({"overflow":"auto"});

This will disable the scrollBar during your event, and show it after it is done.

Arnav Borborah
  • 9,956
  • 4
  • 32
  • 69
  • thanks for answering Arnav, unfortunately it still doesn't work. Im guessing the way show() behaves is different. Because i tried not adding the latter code and still teleports to the top even without a scrollbar – Nitche x Kris Jul 11 '16 at 18:16
  • you may want to change your animation to a jQuery `.css` function for width and height, instead of `.show()` . Set the initial width and height to 0, and then change then `.css` them to your desired width and height. – Arnav Borborah Jul 11 '16 at 18:50
  • already tried $(element).css('display','none'); and $(element).css('display','block'); but still the same. I also tried setting the width and height of the element using .css('height','120px'); and .height(120px); but it destroys my layout (im using list-group class) so it was not an option. – Nitche x Kris Jul 11 '16 at 19:10
0

You can set the position of element fixed, and now is show float cut off from his original position. Like this:

$('button').click(function(){
    $(element).css({'position': 'fixed', 'top': '30px'})
});
ABE
  • 554
  • 1
  • 6
  • 17