We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >

scrolling content using div scroll and disable the browser scroll bar[Answered] RSS

4 replies

Last post Nov 21, 2011 07:51 AM by asteranup

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
ganesh88madd...
Member

4 Points

45 Posts
scrolling content using div scroll and disable the browser scroll bar

Nov 17, 2011 07:09 AM|ganesh88maddy|LINK
I want to disable the browser scroll bar and scroll the content using div scroll (like same as browser scroll )

I tried the below code but it doesn't help me (the div height is fixed 900px but it differs in different type of screen resolutions..it doesn't work like browser scroll )
```
<body style="overflow: hidden;">
<div style="overflow-y:scroll; height:900px;">

</div>

</body>
```
thanks in advance
- Reply
robbo9000
Member

10 Points

11 Posts
Re: scrolling content using div scroll and disable the browser scroll bar

Nov 19, 2011 06:31 PM|robbo9000|LINK
It's because you've nothing in the div.

You need to add content to the div past the bottom of the browser window to enable the scroll bar.
```
<body style="overflow: hidden;">
<div style="overflow-y:scroll; height:900px;">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
```
Hope it helps
Thanks, Rob
SEO Kent | PPC Management Services
- Reply
ganesh88madd...
Member

4 Points

45 Posts

Re: scrolling content using div scroll and disable the browser scroll bar

Nov 21, 2011 04:29 AM|ganesh88maddy|LINK

I've some content inside the div but no use and no change
- Reply
hemant.yadav
Participant

1188 Points

607 Posts

Re: scrolling content using div scroll and disable the browser scroll bar

Nov 21, 2011 05:44 AM|hemant.yadav|LINK

for that you need to use some javascript which should check that what is the resolution of the screen and based on that through script set the height of the div.

There has lot of article available to do so.

http://stackoverflow.com/questions/5176379/how-to-set-div-height-to-100-of-users-monitor-resolution

This javascript function you need to call in body load

I hope this will resolve your problem.

Hemant Yadav
Software consultant India (.NET Expert)
Skype: si.hemant
Email: truecodemaster@gmail.com
Website:http://www.truecodemasters.com

asteranup

All-Star

20953 Points

4984 Posts

Re: scrolling content using div scroll and disable the browser scroll bar

Nov 21, 2011 07:51 AM|asteranup|LINK

Hi,

You can easily do using jquery and css. Check this-

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            resize();
            $(window).resize(function() { resize() });
        });
        function resize() {
            $("#container").width($(window).width());
            $("#container").height($(window).height());
        }
    </script>

    <style>
        body
        {
            margin: 0px 0px 0px 0px;
        }
        html, body
        {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="container" style="background-color: Gray; overflow:auto; overflow-x:hidden">
    <div style="height:300px; width:200px;background-color:Yellow"></div>
    <div style="height:300px; width:200px;"></div>
    <div style="height:300px; width:200px;background-color:Green"></div>
    <div style="height:300px; width:200px;background-color:Yellow"></div>
    <div style="height:300px; width:200px;"></div>
    <div style="height:300px; width:200px;background-color:Green"></div>
    <div style="height:300px; width:200px;background-color:Yellow"></div>
    <div style="height:300px; width:200px;"></div>
    <div style="height:300px; width:200px;background-color:Green"></div>
    </div>
</body>
</html>

Thanks,
Anup Das Gupta
Visit My Blog
You can also connect with me in LinkedIn

‹ Previous Thread|Next Thread ›