Horizontal scroll on top as well as bottom

HTML:

<div class="wrapper1">
<div class="div1">
</div>
</div>
<div class="wrapper2">
<div class="div2">
aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd
</div>
</div>

CSS:

.wrapper1, .wrapper2 {width: 300px; overflow-x: scroll; overflow-y:hidden;}
.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }
.div1 {width:1000px; height: 20px; }
.div2 {width:1000px; height: 200px; background-color: #88FF88; overflow: auto;}

JQuery:

$(function(){
$(".wrapper1").scroll(function(){
    $(".wrapper2")
        .scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
    $(".wrapper1")
        .scrollLeft($(".wrapper2").scrollLeft());
});
});

hope it helps./.

नमस्ते,
[KaushaL] Blog Twitter [MS MVP 2008 & 2009] [MCC 2011] [MVP Reconnect 2017]
Don't forget to click "Mark as Answer" on the post that helped you

Reply

OnoSendai

Member

700 Points

229 Posts

Re: Horizontal scroll on top as well as bottom

Oct 16, 2012 09:59 AM|OnoSendai|LINK

kamii47

What i needed scroll on top as well

'As well' implies two scrollbars. Am i right?

As a rule, you can only have one scrollbar per object per axis.

In order to have two scrollbars working on the same visual object, you'll need to create another object 'on the side' (no need to be filled - just to have the same structure and internal dimensions) and synchronize the scroll area's values via javascript.

Reply

kamii47

Contributor

4232 Points

2313 Posts

Re: Horizontal scroll on top as well as bottom

Oct 16, 2012 10:09 AM|kamii47|LINK

I wanted to avoid javascript for this.

Have seen some solution utilizing javascript on stackoverflow

Kamran Shahid
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])

Reply

narendrajara...

Member

421 Points

227 Posts

Re: Horizontal scroll on top as well as bottom

Oct 16, 2012 10:12 AM|narendrajarad|LINK

Thanks & Regards
Narendra Jarad

Reply

OnoSendai

Member

700 Points

229 Posts

Re: Horizontal scroll on top as well as bottom

Oct 16, 2012 10:19 AM|OnoSendai|LINK

kamii47

I wanted to avoid javascript for this.

Have seen some solution utilizing javascript on stackoverflow

Unfortunately i don`t think it'll be possible otherwise. There's no provision for dual scrollbars on the same axis on any CSS implementation, as far as i know - not even browser-specific.

Please let us know if you find one, tho.

Reply

kamii47

Contributor

4232 Points

2313 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 03:33 AM|kamii47|LINK

Thanks OnoSendai

I am taking sample from http://jsfiddle.net/nsG5w/3/

and applying it as

<style type="text/css">
     #doublescroll { overflow: hidden; width:150px; overflow-x: scroll; }
 #doublescroll p { margin: 0; padding: 1em; white-space: nowrap; }
  </style>
  


<script type="text/javascript">//<![CDATA[
window.onload=function(){
function DoubleScroll(element) {
        var scrollbar= document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow= 'auto';
        scrollbar.style.overflowY= 'hidden';
        scrollbar.style.width= '150px';
        scrollbar.firstChild.style.width= element.scrollWidth+'px';
        scrollbar.firstChild.style.paddingTop= '1px';
        scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
        scrollbar.onscroll= function() {
            element.scrollLeft= scrollbar.scrollLeft;
        };
        element.onscroll= function() {
            scrollbar.scrollLeft= element.scrollLeft;
        };
        element.parentNode.insertBefore(scrollbar, element);
    }

DoubleScroll(document.getElementById('doublescroll'));
}//]]>

<div id="doublescroll">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
    </p>
</div>

Let see if it works in all (or atleast most commonly used) browser as well

Thanks

Kamran Shahid
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])

Reply

kamii47

Contributor

4232 Points

2313 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 04:07 AM|kamii47|LINK

with above implementaiton One issue i am having is that for multiple elemetns neeeded the scroll i have to copy paste the css and javascript function call.

Any idea how can i overcome it?

Current code is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample 1. Assurety Consulting</title>


<style type="text/css">
 #doublescroll { overflow: hidden; width:150px; overflow-x: scroll; }
 #doublescroll p { margin: 0; padding: 1em; white-space: nowrap; }

</style>


<script type="text/javascript">//<![CDATA[
window.onload=function(){
function DoubleScroll(element) {
        var scrollbar= document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow= 'auto';
        scrollbar.style.overflowY= 'hidden';
        scrollbar.style.width= '150px';
        scrollbar.firstChild.style.width= element.scrollWidth+'px';
        scrollbar.firstChild.style.paddingTop= '1px';
        scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
        scrollbar.onscroll= function() {
            element.scrollLeft= scrollbar.scrollLeft;
        };
        element.onscroll= function() {
            scrollbar.scrollLeft= element.scrollLeft;
        };
        element.parentNode.insertBefore(scrollbar, element);
    }
	
var conts = document.querySelectorAll(".doubleScroll");
for(var i=0;i<conts.length;i++)
    DoubleScroll(conts[i]);
}//]]>
</script>
</head>

<body>
<div id="doublescroll">
    <p>
         First Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. First
    </p>
</div>
<div id="doublescroll2">
    <p>
        Second Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. second
    </p>
</div>
<div id="doublescroll3">
    <p>
        Third Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.Third
    </p>
</div>

</body>
</html>

Kamran Shahid
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])

Reply

raju dasa

All-Star

15186 Points

3888 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 05:16 AM|raju dasa|LINK

Hi,

try like this:

<style type="text/css">
 .doublescroll { overflow: hidden; width:150px; overflow-x: scroll; }
 .doublescroll p { margin: 0; padding: 1em; white-space: nowrap; }
</style>
 
<script type="text/javascript">//<![CDATA[
window.onload=function(){
var conts = document.querySelectorAll(".doubleScroll"); //or use jquery
for(var i=0;i<conts.length;i++)
    DoubleScroll(conts[i]);
}//]]>
</script>

<div id="doublescroll" class="doublescroll"> .. </div>
<div id="doublescroll2" class="doublescroll"> .. </div>
<div id="doublescroll3" class="doublescroll"> .. </div>

//code not tested. querySelectorAll() supported in modern browsers, for legacy browsers support use jquery.

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || rajudasa-tech

Reply

kamii47

Contributor

4232 Points

2313 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 05:24 AM|kamii47|LINK

<script type="text/javascript">//<![CDATA[
window.onload=function(){
var conts = document.querySelectorAll(".doubleScroll");
for(var i=0;i<conts.length;i++)
    DoubleScroll(conts[i]);
}//]]>
</script>

Doesn't work.Only got scroll in the first element

Kamran Shahid
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])

Reply

raju dasa

All-Star

15186 Points

3888 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 07:55 AM|raju dasa|LINK

Hi,

u forgot to include the dependency js library file in the document.

<script src="myjs.js" type="text/javascript" charset="utf-8"></script>

try adding it.

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || rajudasa-tech

Reply

kamii47

Contributor

4232 Points

2313 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 08:33 AM|kamii47|LINK

That was just for reference.I have updated my last post which have same result Raju

Kamran Shahid
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])

Reply

raju dasa

All-Star

15186 Points

3888 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 08:53 AM|raju dasa|LINK

Hi,

check this whole code, give it a try (as a whole):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample 1. Assurety Consulting</title>


<style type="text/css">
 .doublescroll { overflow: hidden; width:150px; overflow-x: scroll; }
 .doublescroll p { margin: 0; padding: 1em; white-space: nowrap; }

</style>


<script type="text/javascript">//<![CDATA[
window.onload=function(){
function DoubleScroll(element) {
        var scrollbar= document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow= 'auto';
        scrollbar.style.overflowY= 'hidden';
        scrollbar.style.width= '150px';
        scrollbar.firstChild.style.width= element.scrollWidth+'px';
        scrollbar.firstChild.style.paddingTop= '1px';
        scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
        scrollbar.onscroll= function() {
            element.scrollLeft= scrollbar.scrollLeft;
        };
        element.onscroll= function() {
            scrollbar.scrollLeft= element.scrollLeft;
        };
        element.parentNode.insertBefore(scrollbar, element);
    }
        
var conts = document.querySelectorAll(".doubleScroll");
for(var i=0;i<conts.length;i++)
    DoubleScroll(conts[i]);
}//]]>
</script>
</head>

<body>
<div id="doublescroll" class="doublescroll">
    <p>
         First Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. First
    </p>
</div>
<div id="doublescroll2" class="doublescroll">
    <p>
        Second Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. second
    </p>
</div>
<div id="doublescroll3" class="doublescroll">
    <p>
        Third Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.Third
    </p>
</div>

</body>
</html>

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || rajudasa-tech

Reply

kamii47

Contributor

4232 Points

2313 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 08:55 AM|kamii47|LINK

Yes tried but didn't work.Is it working on your end?

Kamran Shahid
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])

Reply

narendrajara...

Member

421 Points

227 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 09:19 AM|narendrajarad|LINK

<div style="height: 420px; width: 200px; overflow: auto; vertical-align: top;">
You your gri view here .

nd give grid view width more then 200px & height more then 420 px then it will give scroll horizentaly & vertically
</div>

Thanks & Regards
Narendra Jarad

Reply

kamii47

Contributor

4232 Points

2313 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 09:21 AM|kamii47|LINK

no need of vertical scroll Naredra

We are checking solution for Horizontal scroll on top as well as bottom of a div

Kamran Shahid
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])

Reply

raju dasa

All-Star

15186 Points

3888 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 09:28 AM|raju dasa|LINK

Hi,

its tested, working in both FF16, IE9.

whats the issue? from ur end?

http://jsbin.com/oholag/1/edit

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || rajudasa-tech

Reply

kamii47

Contributor

4232 Points

2313 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 09:43 AM|kamii47|LINK

i have tested on IE9, FF 15, and chrome 22

neither did worked on my systems browser when i try to browse the page which is hosted locally with your mentioned changes.

Even I have copied exact text from http://jsbin.com/oholag/1/edit on that page but it didn't works.

But i can see it work at each of the borwser when i am using above mention link

Also when checked the link http://jsbin.com/oholag/3/edit from IE tester [tool for multiple browser] i found it only working for IE9 and IE10 there.

I have to support IE8 atleast and it would be good if it works on IE7 as well

Kamran Shahid
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])

Reply

raju dasa

All-Star

15186 Points

3888 Posts

Re: Horizontal scroll on top as well as bottom

Oct 17, 2012 10:07 AM|raju dasa|LINK

Hi,

kamii47

i have tested on IE9, FF 15, and chrome 22

neither did worked on my systems browser when i try to browse the page which is hosted locally with your mentioned changes.

Even I have copied exact text from http://jsbin.com/oholag/1/edit on that page but it didn't works.

But i can see it work at each of the borwser when i am using above mention link

Also when checked the link http://jsbin.com/oholag/3/edit from IE tester [tool for multiple browser] i found it only working for IE9 and IE10 there.

I have to support IE8 atleast and it would be good if it works on IE7 as well

As i said in my previous posts, to support legacy browsers u need to use jquery.

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || rajudasa-tech

Reply

kamii47

Contributor

4232 Points

2313 Posts

Re: Horizontal scroll on top as well as bottom

Oct 18, 2012 01:25 AM|kamii47|LINK

I have currently put the multiple calls for the ids and let it working by following

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample 1. </title>


<style type="text/css">
 .doublescrollClass { overflow: hidden; width:150px; overflow-x: scroll;margin: 0;  white-space: nowrap; }
 

</style>


<script type="text/javascript">//<![CDATA[
window.onload=function(){
function DoubleScroll(element) {
        var scrollbar= document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow= 'auto';
        scrollbar.style.overflowY= 'hidden';
        scrollbar.style.width= '150px';
        scrollbar.firstChild.style.width= element.scrollWidth+'px';
        scrollbar.firstChild.style.paddingTop= '1px';
        scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
        scrollbar.onscroll= function() {
            element.scrollLeft= scrollbar.scrollLeft;
        };
        element.onscroll= function() {
            scrollbar.scrollLeft= element.scrollLeft;
        };
        element.parentNode.insertBefore(scrollbar, element);
    }
        
DoubleScroll(document.getElementById('doublescroll1'));
DoubleScroll(document.getElementById('doublescroll2'));
DoubleScroll(document.getElementById('doublescroll3'));
}//]]>
</script>
</head>

<body>
<div id="doublescroll1" class="doublescrollClass">
    
         First Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. First
   
</div>
<div id="doublescroll2" class="doublescrollClass">
   
        Second Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. second
    
</div>
<div id="doublescroll3" class="doublescrollClass">
   
        Third Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.Third
</div>

</body>
</html>

Kamran Shahid
(MCP,MCAD.net,MCSD.net,MCTS,MCPD.net[web])

Horizontal scroll on top as well as bottom[Answered] RSS

20 replies

Shortcuts