当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Javascript side scroller

问题描述:

I want my website to side scroll on clicking the right arrow in the webpage. I made a small unfinished script but it is not working as intended.

In the script, the rate should decrease every 10 ms causing the webpage to scroll sidewards. Later on I will add a function to stop sides crolling when it hits the required margin.

Here's the code:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Untitled Document</title>

<style type="text/css">

body {

background-image:url(ios-linen.jpg);

overflow:hidden;

}

div.length {

width:10000px;

}

div.container {

position:fixed;

top:50%;

left:50%;

margin-top:-300px;

margin-left:-450px;

}

div.content {

display:inline-block;

height:600px;

width:900px;

background-color:#CCC;

opacity:0.3;

border-radius:20px;

position:absolute;

z-index:0;

box-shadow:white 2px 2px 70px;

}

div.info {

z-index:1;

position:inherit;

width:870px;

padding-left:20px;

padding-top:10px;

}

div.arrow {

color:white;

font-size:400px;

font-weight:bold;

position:fixed;

opacity:0.5;

-moz-transition:all .5s;

-webkit-transition:all .5s;

transition:all .5s;

}

div.arrow:hover {

opacity:1;

}

#left {

top:50%;

margin-top:-200px;

left:5%;

}

#right {

top:50%;

margin-top:-200px;

left:80%;

}

</style>

<script type="text/javascript">

function right() {

var rate = 0;

setInterval(function() {

document.getElementById('length').style.marginLeft += rate;

rate--;

}, 10);

}

</script>

</head>

<body bgcolor="black">

<div class="length" id="length">

<div class="arrow" id="left">

<

</div>

<div class="arrow" id="right" onclick="right()">

>

</div>

<div class="container">

<div class="content">

</div>

<div class="info">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean est orci, tempus id lobortis vel, euismod sed eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed vehicula urna ut mi laoreet malesuada. Nunc semper, nisl vel semper commodo, sem quam laoreet magna, vel tristique orci tellus sit amet sem. Cras tincidunt urna sed justo consequat porta. Pellentesque commodo lacinia est, a dapibus odio venenatis ut. Vestibulum eget luctus turpis. Morbi libero urna, laoreet commodo euismod quis, aliquam in metus.

</div>

</div>

<div class="container" style="margin-left:1600px;">

<div class="content">

</div>

<div class="info">

Vivamus bibendum pretium enim quis faucibus. Etiam tempor dui varius nisi sagittis consectetur. Ut eget sapien ut metus consectetur hendrerit. Morbi lacinia porttitor nunc, rutrum ullamcorper arcu elementum quis. In eget nisi vel ante lacinia eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam leo odio, accumsan nec rhoncus sit amet, viverra sed urna. Mauris consequat turpis sed risus ultrices pulvinar.

</div>

</div>

</div>

</body>

</html>

网友答案:

The reason that it looks like it doesn't scroll is because all the other DIVs on the page have position:fixed; The containing DIV length is likely moving, but the arrows and gray background thing won't ever move by changing the padding of the length element.

To verify this, add a "watch" to the length DIV and check it out in the console.

网友答案:

Essentially you should be using $('html').get(0).scrollLeft to change positions.

Here's a js fiddle to help you out.

http://jsfiddle.net/UqbPQ/17/

var direction = 0;
var speed = 2;
$('#l').click(function() {
    direction = -speed;
});
$('#p').click(function() {
    direction = 0;
});
$('#r').click(function() {
    direction = speed;
});
window.setInterval(function() {
    var elm = $('html').get(0);
    var pos = elm.scrollLeft;
    pos += direction;
    elm.scrollLeft = pos;
    $('#p').text(elm.scrollLeft);
}, 10);
body {
    background-color: yellow;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding 0px;
    overflow: hidden;
}
div.length {
    background-color: aqua;
    top: 0px;
    left: 0px;
    width:10000px;
    height: 90%;
overflow: hidden;
    margin: 0px;
    padding: 0px;
}
div.container {
    position: relative;
    float: left;
    border: 2px solid red;
}
div.content {
    display:inline-block;
    height:600px;
    width:900px;
    background-color:#CCC;
    opacity:0.3;
    border-radius:20px;
    position:absolute;
    z-index:0;
    box-shadow:white 2px 2px 70px;
}
div.info {
    z-index:1;
    position:inherit;
    width:870px;
    padding-left:20px;
    padding-top:10px;
}
div.arrow {
    color:green;
    font-size: 200%;
    font-weight:bold;
    position:fixed;
    top: 90%;
    opacity:0.5;
    -moz-transition:all .5s;
    -webkit-transition:all .5s;
    transition:all .5s;
    border: 2px solid green;
}
div.arrow:hover {
    opacity:1;
}
#l {
    left:5%;
}
#r {
    left:95%;
}
#p {
    left: 45%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="length" id="length">
<div class="arrow" id="l">&lt;
    </div>
    <div class="arrow" id="p">||
    </div>
    <div class="arrow" id="r">&gt;
    </div>
    <div class="container">
        <div class="content">
        </div>
        <div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean est orci, tempus id lobortis vel, euismod sed eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed vehicula urna ut mi laoreet malesuada. Nunc semper, nisl vel semper commodo, sem quam laoreet magna, vel tristique orci tellus sit amet sem. Cras tincidunt urna sed justo consequat porta. Pellentesque commodo lacinia est, a dapibus odio venenatis ut. Vestibulum eget luctus turpis. Morbi libero urna, laoreet commodo euismod quis, aliquam in metus. 
        </div>
    </div>
    <div class="container">
        <div class="content">
        </div>
        <div class="info">
Vivamus bibendum pretium enim quis faucibus. Etiam tempor dui varius nisi sagittis consectetur. Ut eget sapien ut metus consectetur hendrerit. Morbi lacinia porttitor nunc, rutrum ullamcorper arcu elementum quis. In eget nisi vel ante lacinia eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam leo odio, accumsan nec rhoncus sit amet, viverra sed urna. Mauris consequat turpis sed risus ultrices pulvinar. 
        </div>
    </div>
</div>
分享给朋友:
您可能感兴趣的文章:
随机阅读: