Question

我希望我的网站侧面滚动，点击网页中的右箭头。我做了一个小的未完成的脚本，但它没有按预期工作。在脚本中，速率应每10毫秒减少一次，导致网页向侧面滚动。稍后我会添加一个功能，当它达到所需的边距时阻止侧面碾压。这是代码：

<!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>

Answer 1

它看起来不滚动的原因是因为页面上的所有其他DIV都有position:fixed;包含的DIV length可能正在移动，但箭头和灰色背景的东西赢了“通过更改length元素的填充来移动。

要验证这一点，请向length DIV添加“监视”并在控制台中查看。

Answer 2

基本上你应该使用$（'html'）。get（0）.scrollLeft来改变位置。

这是一个帮助你的小提琴。

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>

Javascript侧卷轴

2 个答案: