Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't get scrollTop() to work in both Chrome & Firefox

Tags:

I am having trouble getting the scrollTop() method to work in both Firefox and Chrome. I used $('body, html').scrollTop(); however, it doesn't work in Chrome. Only $('body').scrollTop(); works in Chrome. Any thoughts would be greatly appreciated. Below is my code.

<!DOCTYPE html> <html> <head>   <title>Demo</title>   <style type="text/css">   body {     height: 2000px;   }    #light {     display: block;     position: fixed;     top: 50%;     left: 50%;     margin-left: -400px;     margin-top: -200px;     width: 800px;     height: 400px;     background-color: blue;     z-index:1002;     overflow: auto;   } </style> </head>  <body>   <div id="light">   </div>  <!-- Used the google jQuery link for ease of use in this example   -->   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>   <script type="text/javascript">     $(document).ready(function() {       $(window).scroll(function () {         var offset = $('body, html').scrollTop();         var view = $(window).height();         var total = $(document).height();         var percent = 1-(offset / (total - view));         var widthFactor = 800*percent;         var marginFactor = -(400*percent)          if(percent > 0.33){           $("#light").css({ "width" : widthFactor,                       "margin-left" : marginFactor});         };       });     });   </script> </body> </html> 
like image 885
Jonny Cerveza Avatar asked Sep 13 '13 03:09

Jonny Cerveza


People also ask

Is scrollTop deprecated?

scrollTop is deprecated in strict mode.

What is $( window scrollTop ()?

$(selector).scrollTop(position) Parameter. Description. position. Specifies the vertical scrollbar position in pixels.

What is the scrollTop property?

scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically. An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0 .

How do I use scrollTo in Windows react?

scrollTo only works when the scroll behavior is set on html . If you have set overflow: scroll on some container inside of the DOM, then that need to be accessed. Assign an id to that. For example I have below div container for which I have set overflow: scroll .


1 Answers

Use the document object instead

$(document).scrollTop(); 
like image 180
Dustin Blake Avatar answered Sep 28 '22 03:09

Dustin Blake