Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2009
    Location
    USA
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Question Setting documentElement.style.overflow = 'hidden' jolts to top of page (undesirably)

    I have a pop-up window system on my site that shows an absolutely-positioned div over the entire page as a "pop up" of sorts when someone clicks a link. I use this simple line of Javascript to disable page scrolling when a "pop up" box is opened by a user:

    Code:
    document.documentElement.style.overflow = document.body.style.overflow = 'hidden';
    The problem is that when a user is scrolled down on a page and clicks a link to bring up one of my pop up boxes, when the overflow is set to 'hidden' to disable scrolling, the page "jolts" back up to the top (similar as to what would happen if someone clicked an <a> element with href="#" ). However, the links are not actually links, but span tags that are programmed with JS to trigger the scrollbar to be disabled when clicked, so that is not the culprit here. I've narrowed the problem down to that one line of code which I posted earlier. Apparently, setting the documentElement overflow style to 'hidden' scrolls the user to the top of the page automatically along with "disabling" the scroll bar on the page.

    I am wondering if there is a way to prevent this jolting to the top of the page each time that JS code is triggered. I don't want users to have to scroll back down to where they were each time they open a pop up dialogue box on my site, as this would be detrimental for usability purposes. Thanks in advance for any help I receive.
    Last edited by TomCat; 03-02-2011 at 01:17 AM.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    I am wondering if there is a way to prevent this jolting to the top of the page each time that JS code is triggered. I don't want users to have to scroll back down to where they were each time they open a pop up dialogue box on my site, as this would be detrimental for usability purposes. Thanks in advance for any help I receive.
    Code:
    <a href='#' id="barHide">No Scrollbars</a>
    
     <script type="text/javascript">
     
     document.getElementById( "barHide" ).onclick = noBars;
     
     function noBars()
     {
      var x = document.body.scrollLeft + document.documentElement.scrollLeft,
          y = document.body.scrollTop + document.documentElement.scrollTop;
        
      document.getElementsByTagName( 'body' )[ 0 ].style.overflow = 'hidden';  
        
      window.scrollTo( x, y );   
      
      return false; 
     }  
     </script>
    Gratitude acknowledged by default.

  • Users who have thanked Logic Ali for this post:

    TomCat (03-02-2011)

  • #3
    New Coder
    Join Date
    May 2009
    Location
    USA
    Posts
    23
    Thanks
    6
    Thanked 0 Times in 0 Posts
    That did the trick. Thank you.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •