JavaScript侧面滚动条
[英]Javascript side scroller
问题描述
我希望我的网站在单击网页中的向右箭头时进行侧滚动。 我制作了一个未完成的小脚本，但未按预期工作。 在脚本中，速率应每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>
2 个解决方案
解决方案1
0 2012-10-09 15:39:03
看起来无法滚动的原因是因为页面上的所有其他DIV都具有position:fixed; 包含DIV的length可能会移动，但是通过更改length元素的填充，箭头和灰色背景不会移动。
要验证这一点，请在length DIV中添加一个“手表”，并在控制台中将其检出。
解决方案2
0 2012-10-09 16:15:56
本质上，您应该使用$（'html'）。get（0）.scrollLeft更改位置。
这是一个JS小提琴，可以帮助您。
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">< </div> <div class="arrow" id="p">|| </div> <div class="arrow" id="r">> </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内容滚动条
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.