Scroll using buttons rather than scroll bar css,html,javascript

Question

I wan't to make a horizontal navbar that is scrollable. However I would like the items in the navbar to scroll when the cursor hovers over a button that points to the direction the navbar will scroll in. Any information on how I can do this will be very helpful. Thank you.

score 2 · Accepted Answer · edited May 23 '17 at 11:54

You could do something like this, which uses javascript to prevent any type of scrolling unless the up or down arrow is hovered over.

var down = document.getElementById('down'),
    up = document.getElementById('up'),
    body = document.body;

var timeout;
down.onmouseover = function (e) {
    timeout = setInterval(function () {        
        window.scrollBy(0, 7);
    }, 20)
};
down.onmouseout = function (e) {
    if (timeout) {
        clearInterval(timeout);
    }
};

up.onmouseover = function (e) {
    timeout = setInterval(function () {     
        window.scrollBy(0, -7);
    }, 20)
};
up.onmouseout = function (e) {
    if (timeout) {
        clearInterval(timeout);
    }
};


// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36, backspace: 8
var keys = [37, 38, 39, 40, 32, 34, 33, 35, 36, 8];

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function keydown(e) {
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}

function wheel(e) {
  preventDefault(e);
}

Credit goes to galambalazs for his answer in this SO question that aided me in disabling page scrolls

score 0 · Answer 2 · answered Aug 15 '13 at 21:41

0

You can try couple of things. First off, you button can be local anchors, through CSS you can specify on-hover or hover styles, that will allow you call functions for switching NAV bar buttons, same as old school roll-overs but using a different fire on event.

answered Aug 15 '13 at 21:41

KonB

220
1
8

could you give ma an example of what you mean by this? – Mister Joe Aug 15 '13 at 22:07

score 0 · Answer 3 · answered Aug 16 '13 at 20:40

This is what i came up with.

The previous answer uses setInterval function to domouover continuously, i coudn;t egt it to work yet.

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

 <script type="text/javascript">

    var images=["img1","img2","img3","img4"]
    var imgIndex = 0
    window.setInterval(function () { moveleft() }, 100)
    window.setInterval(function () { moveright()},100)


    function function1() {

       document.getElementById(images[imgIndex]).className = "turnon"

    }

    function moveleft() {

        imgIndex = imgIndex - 1
        if (imgIndex < 0) {
            imgIndex = images.length - 1
            document.getElementById(images[imgIndex]).className = "turnon"
            document.getElementById(images[0]).className = "turnoff"

        } else {
            document.getElementById(images[imgIndex]).className = "turnon"
            document.getElementById(images[imgIndex + 1]).className = "turnoff"

        }


    }


    function moveright() {
        imgIndex = imgIndex + 1
        if (imgIndex > (images.length - 1)) {
            imgIndex = 0
            document.getElementById(images[imgIndex]).className = "turnon"
            document.getElementById(images[images.length - 1]).className = "turnoff"
        }
        else {
            document.getElementById(images[imgIndex]).className = "turnon"
            document.getElementById(images[imgIndex - 1]).className = "turnoff"
        }


    }

</script>
<style type="text/css">
.turnon
{
    border: medium solid #FF0000
}

.turnoff
{
   border: medium solid #FFCC00
}
</style>
</head>
<body onload="function1()">
    <img src="1.jpg" id="img1" class="turnoff" />
    <img src="2.jpg" id="img2" class="turnoff"/>
    <img src="3.jpg" id="img3" class="turnoff"/>
    <img src="4.jpg" id="img4" class="turnoff"/>
    <p></p>
    <a href="#" ><img src="left.jpg"onmouseover="moveleft()"/></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" ><img src="right.jpg" onmouseover="moveright()" /></a>
</body>
</html>

You should edit your answer on a post instead of adding a new one, generally speaking. And why post an answer that doesn't work? — Zach Saucier, Aug 16 '13 at 20:50
You are right, of course, but I couldn't get it in withing original post. Something about length. I am a new user and still learning how to use stackoverflow. As far as the why is concerned, why ask why instead of being constructive and maybe adding to my code. An answer that helps pointing in the right direction is better than no answer at all. What prevented me from pointing out that your answer was about 90 degrees to the side of what was being asked? — KonB, Aug 20 '13 at 16:43
I asked why because this is not what the OP is looking for. This doesn't prevent default scrolling at all, is completely dependent on the page being full of `img`s, and ultimately gets nothing done besides toggling a border color. Adding to your code would mean removing nearly all you have and writing it myself. As for my solution dealing with vertical scrolling, it's an example that can be edited, not the final product — Zach Saucier, Aug 20 '13 at 17:27

Scroll using buttons rather than scroll bar css,html,javascript

3 Answers3