Can't get scrollTop in Chrome

**zhaoshixuan** · 7 Jun 2012 6:12 PM

Hi, I use floating panel and need to set its position according to the browser's scrollTop.
In FF, I can use Ext.getBody().dom.scrollTop or document.documentElement.scrollTop to get this value.
But in Chrome, I used Ext.getBody().dom.scrollTop, document.documentElement.scrollTop and document.body.scrollTop. None of them works.
Could anyone have this solution?
Thanks!
BTW: I tested on Ext3.3's examples, and it didn't work either

**scottmartin** · 9 Jun 2012 5:38 AM

Please provide a small test case for us to review.

Scott.

**zhaoshixuan** · 17 Jun 2012 10:39 PM

Maybe there is something wrong in our project.
I tried it with original ext, there is no such problem.

**zhaoshixuan** · 19 Jun 2012 7:08 PM

Originally Posted by scottmartin

Please provide a small test case for us to review.

Scott.

Hi Scott,
I found the reason.
If I use viewport as the page body, this situation will appear in Chrome.
Any suggestion?
You can use the sample below:

Code:

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="js/ext-3.3.0/ext-3.3.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="js/ext-3.3.0/ext-3.3.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="js/ext-3.3.0/ext-3.3.0/ext-all-debug.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
Ext.onReady(function(){
	var panel = new Ext.FormPanel({
		height : 2000,
		title : 'test',
		width:300,
		autoScroll : true
	});
	var view = new Ext.Viewport({
		renderTo : 'body',
		items : [panel],
		autoScroll : true,
		layout : 'border'
	});
});
</script>
</head>
<body id="body">


</body>
</html>

**scottmartin** · 19 Jun 2012 8:27 PM

I will have to test in the morning .. few issues:
remove the renderTo .. viewport will always default to the entire browser
remove autoScroll.. assign this to the containers in viewport

See if this helps.

Scott.

**zhaoshixuan** · 19 Jun 2012 10:38 PM

Originally Posted by scottmartin

I will have to test in the morning .. few issues:
remove the renderTo .. viewport will always default to the entire browser
remove autoScroll.. assign this to the containers in viewport

See if this helps.

Scott.

Well, they don't work, either.
And if I remove autoScroll, the scroll bar will disappear and the bottom will never be seen.
I also found same problem in Ext 4.0.7-gpl

Code:

Ext.require([    'Ext.form.*',
    'Ext.layout.container.Absolute',
    'Ext.window.Window'
]);


Ext.onReady(function() {
    var form = Ext.create('Ext.form.Panel', {
        defaultType: 'textfield',
        border: true,
        height : 2000,
        title : 'test',
        autoScroll : true
    });


    var win = Ext.create('Ext.container.Viewport', {
        
        height: 850,
        //plain:true,
        items: form,
        autoScroll : true
    });


});

**zhaoshixuan** · 25 Jun 2012 1:00 AM

Could some one do me a favor?
I really think it is a problem.
Please help resolve compatible problem among different browsers.
Thanks!

Can't get scrollTop in Chrome

Thread Tools

Search Thread

Display

Can't get scrollTop in Chrome

Can't get scrollTop in Chrome