带按钮的水平滚动DIV
[英]horizontal scroll DIV with buttons
问题描述
Not sure what I am doing wrong, I want de content of this DIV scroll horizontaly when I press the buttons. 
不知道我在做什么错，我想在按按钮时水平滚动此DIV的内容。 Got a lot of code from here, but now i'm stuck..... 从这里得到了很多代码，但是现在我被卡住了.....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Naamloos document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
#browser { float: left; width: 400px; overflow: auto; white-space: nowrap; }
</style>
</head>
<body>
<input type="button" class="leftArrow" value="left">
This is the DIV that should scroll 这是应该滚动的DIV
<div id="browser">
<div class="innerWrapper">
<div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0FC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#3CF; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0FC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#3CF; width:200px; height:200px; display:inline-block"></div>
</div>
</div>
<input type="button" class="rightArrow" value="right">
I'm not sure if I should put my script here 我不确定是否应该将脚本放在这里
<!--
<script>
$('#right-button').click(function() {
var leftPos = $('#content').scrollLeft();
$('#content').animate({scrollLeft: leftPos - 200}, 800);
});
$('#left-button').click(function() {
var leftPos = $('#content').scrollLeft();
$('#content').animate({scrollLeft: leftPos + 200}, 800);
});
</script>
-->
</body>
</html>
4 个解决方案
解决方案1
2 2014-06-12 10:05:44
I got this working. 我工作了。 New mark-up and script below. 以下是新的标记和脚本。
Some issues you had: 您遇到的一些问题：
- The jQuery script was not wrapped in a "document ready" handler. jQuery脚本未包装在“文档就绪”处理程序中。
- Various mismatched naming issues between your classes and ids. 您的类和ID之间存在各种不匹配的命名问题。
Hope this helps (tested it locally): 希望这会有所帮助（在本地进行测试）：
<div id="outer">
<div id="inner">
<div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0FC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#3CF; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0CC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#0FC; width:200px; height:200px; display:inline-block"></div>
<div style="background-color:#3CF; width:200px; height:200px; display:inline-block"></div>
</div>
</div>
<input type="button" id="left-button" class="leftArrow" value="left">
<input type="button" id="right-button" class="rightArrow" value="right">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(function () {
var outer = $('#outer');
$('#right-button').click(function () {
var leftPos = outer.scrollLeft();
outer.animate({ scrollLeft: leftPos - 200 }, 800);
});
$('#left-button').click(function () {
var leftPos = outer.scrollLeft();
outer.animate({ scrollLeft: leftPos + 200 }, 800);
});
});
</script>
And slightly renamed style: 并稍微重命名了样式：
<style>
#outer {
float: left;
width: 400px;
overflow: auto;
white-space: nowrap;
}
</style>
解决方案2
1 2014-06-12 10:09:08
1)#right-button and #left-button missing in your both buttons.so use with class 1）两个按钮中缺少＃right-button和＃left-button.so与类一起使用
2)use ready function for event handler. 2）使用事件处理程序的就绪功能。
3)use #browser instead #conten.because there is no id with this name. 3）使用#browser代替#conten。因为此名称没有ID。
4)use +200 for right and -200 for left in animate. 4）在动画中使用+200表示右边，使用-200表示左边。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$('.rightArrow').click(function() {
var leftPos = $('#content').scrollLeft();
$('#browser').animate({scrollLeft: leftPos + 200}, 800);
});
$('.leftArrow').click(function() {
var leftPos = $('#content').scrollLeft();
$('#browser').animate({scrollLeft: leftPos - 200}, 800);
});
});
</script>
解决方案3
0 2014-06-12 09:57:26
#right-button would refer to a tag with id='#right-button' try ' .rightArrow ' instead ;) (or change in the input tag class by id , and use the right names) #right-button会引用id='#right-button'的标签，请尝试用' .rightArrow '代替；）（或通过id更改输入标签class ，并使用正确的名称）
Then put your script in the between <head></head> 然后将脚本放在<head></head>
Also, you are using scrollLeft, wich control the "scroll" that's means tou can use it on elements with overflow to scroll. 另外，您使用的是scrollLeft，它控制“滚动”，这意味着tou可以在具有溢出功能的元素上使用它来滚动。
If you want to move, you should consider .offset or .position , and also .animate to add a visual effect 如果要移动，则应考虑.offset或.position以及.animate来添加视觉效果
解决方案4
0 2014-06-12 09:59:12
It seems that you have your script commented and it's also not pointing to the correct ids/classes. 似乎您已注释了脚本，并且也未指向正确的ID /类。 Also, you had the arrows going the opposite ways. 另外，箭头方向相反。
Here's how it should look like for the HTML you posted 这是您发布的HTML的外观
<script>
$('.rightArrow').click(function() {
var leftPos = $('#browser').scrollLeft();
$('#browser').animate({scrollLeft: leftPos + 200}, 800);
});
$('.leftArrow').click(function() {
var leftPos = $('#browser').scrollLeft();
$('#browser').animate({scrollLeft: leftPos - 200}, 800);
});
</script>
Also, while you can put <script> elements inside the body , it would be better to add them to the head section instead. 另外，虽然可以将<script>元素放入body ，但最好将它们添加到head部分。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.