• 0

[Javascript] Scrolling a Div


Question

Hi I'm creating a button that when pushed will scroll the contents of an element.

BUT it doesn't actually scroll the contents, instead it resets the padding-top attribute. I'm doing this because the normal javascript scroll functions require a height to be specified of the element. Or at least everyone that I've come across does.

So far I have this (below) which works :

var scrollLength = 55;

	function scrollDown() {
		scrollLength += 2;
		document.getElementById('page').style.paddingTop=scrollLength.toString() + "px";
	}

<a onmousedown="scrollDown()">Down</a>

The issue is that it doesn't continuously scroll whilst I hold down the element, how do I do this?

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

Hi I'm creating a button that when pushed will scroll the contents of an element.

BUT it doesn't actually scroll the contents, instead it resets the padding-top attribute. I'm doing this because the normal javascript scroll functions require a height to be specified of the element. Or at least everyone that I've come across does.

So far I have this (below) which works :

var scrollLength = 55;

	function scrollDown() {
		scrollLength += 2;
		document.getElementById('page').style.paddingTop=scrollLength.toString() + "px";
	}

<a onmousedown="scrollDown()">Down</a>

The issue is that it doesn't continuously scroll whilst I hold down the element, how do I do this?

use a while loop that goes until onmouseup changes the condition to false.

Link to comment
Share on other sites

  • 0

I didn't know that you could do such a simple thing lol.

I am sure someone could do it a better way but make the mousedown set a value to true and the loop happens as long as mouseup doesn't happen. When mouseup happens, call a function that will set the value to false to break out of the while loop.

Link to comment
Share on other sites

  • 0

been forever since I did this, but something like:

<script>
var scrolling = false

function scrollInit(y) {
 if (Y) {
  scrolling = true
  scrollDiv()
} else {
  scrolling = false
}
}

function scrollDiv () {
 while(scrolling) {
  //loling code here
 }
}
</script>



<a onmousedown="scrollInit(true)" onmouseup="scrollInit(false)">Down</a>

you could also use the same 2 functions to scoll either up or down by just changing a value to either +/-

Link to comment
Share on other sites

  • 0

That is almost perfect for my needs however my page has a dynamic height.

The page that is scrolling is appearing through an iframe with height:100%; xD

Link to comment
Share on other sites

  • 0

That is almost perfect for my needs however my page has a dynamic height.

The page that is scrolling is appearing through an iframe with height:100%; xD

Change this line:

var scrollWinHeight = 400;

Instead of setting the number yourself, find a script that will return the height for you and set the variable to that.

something like:

var scrollWinHeight = document.getElementById(DivID).clientHeight;

correction:

var scrollWinHeight = document.getElementById(DivID).offsetHeight;

and replace DivID with the real ID of course

Link to comment
Share on other sites

  • 0

Your third example doesn't work with my code at all anymore =[

May I email you my entire code? I would be very grateful if you could take a look ^^

Link to comment
Share on other sites

  • 0

Change this line:

var scrollWinHeight = 400;

Instead of setting the number yourself, find a script that will return the height for you and set the variable to that.

something like:

var scrollWinHeight = document.getElementById(DivID).clientHeight;

correction:

var scrollWinHeight = document.getElementById(DivID).offsetHeight;

and replace DivID with the real ID of course

that will work, but you'd need to do it after the divs are loaded. if you just changed it where it is i'm pretty sure you'd get NaN, null, or nothing at all back.

@tanoru - pm'd you my email

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.