Javascript scrolling algorithm

Question

I'm building a Javascript application that requires some custom scrolling to be implemented for some text that overflows a container. In the environment that I'm building for there are no scroll bars, so I need to create two buttons, one up and one down, which the user can then user to scroll the text.

I've created a very basic implementation with this jsFiddle.

What I'm struggling with is to come up with a clean solution that stops the scrolling when the bottom of the text visible at the bottom of the container, and visa versa, preventing the scroll text from moving up/down forever.

Perhaps there is a well known algorithm for this? I'm looking for a way to do this without plug-ins and without jQuery.

Here is my Javascript:

var upButton = document.getElementById('upButton');
var downButton = document.getElementById('downButton');

var text = document.getElementById('inner');
var container = document.getElementById('container');

upButton.addEventListener('click', function () {
    moveText(1);
});

downButton.addEventListener('click', function () {
    moveText(-1);
});

function moveText(direction) {
    var textTop = parseInt(window.getComputedStyle(text).top);
    var moveTo = textTop + (direction * 50);

    text.style.top = moveTo + "px"
}

HTML:

<div id="container">
    <div id="inner">Nam liber ... very long text ... facilisi.</div>
</div>
<div class="buttons">
    <button id="upButton" type="button">Up</button>
    <button id="downButton" type="button">Down</button>
</div>

CSS:

#container {
    background: #F1F1F1;
    width: 300px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    font-size: 20px;
    line-height: 30px;
    padding: 20px;
}
#inner {
    position: relative;
    top: 0;
}

Kaiido · Accepted Answer · 2015-06-04 14:59:36Z

1

Why don't you use the scrollTop property ?

function moveText(direction) {
    var moveTo = direction * 50;
    container.scrollTop += moveTo;
    }

var upButton = document.getElementById('upButton');
var downButton = document.getElementById('downButton');

var text = document.getElementById('inner');
var container = document.getElementById('container');

upButton.addEventListener('click', function () {
    moveText(1);
});

downButton.addEventListener('click', function () {
    moveText(-1);
});

function moveText(direction) {
    var moveTo = direction * 50;
    container.scrollTop += moveTo;
}

#container {
    background: #F1F1F1;
    width: 300px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    font-size: 20px;
    line-height: 30px;
    padding: 20px;
}
#inner {
    position: relative;
    top: 0;
}
.buttons {
    text-align: center;
    padding: 30px;
}
button {
    font-size: 20px;
}

<div id="container">
    <div id="inner">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
</div>
<div class="buttons">
    <button id="upButton" type="button">Up</button>
    <button id="downButton" type="button">Down</button>
</div>

answered Jun 4, 2015 at 14:59

Kaiido

140k15 gold badges266 silver badges333 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shrewdbeans Over a year ago

MDN says that it's working draft... does that mean it's not supported in all browsers? developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Kaiido Over a year ago

The CSSOM is in working draft but I think that scrollTop is pretty stable. According to quirksMode it's ok and if you really need to support some old/odd browsers, I think you can check for pageYOffset, but I don't know if it worked for element or only document

Kaiido Over a year ago

@shrewdbeans Just tested in IE8 and it doesn't seem to work but neither will addEventListener btw, however it does work in IE9 and all major browsers

Collectives™ on Stack Overflow

Javascript scrolling algorithm

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related