Question

不确定我做错了什么，当我按下按钮时，我希望这个DIV滚动的内容。从这里得到了很多代码，但现在我被卡住了.....

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

这是应该滚动的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">

我不确定我是否应该把我的脚本放在这里

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

链接到 DEMO

Answer 1

我得到了这个工作。下面是新的标记和脚本。

您遇到的一些问题：

jQuery脚本未包含在“文档就绪”处理程序中。
您的类和ID之间存在各种不匹配的命名问题。

希望这有帮助（在本地测试）：

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

略微重命名的风格：

<style>
   #outer {
      float: left;
      width: 400px;
      overflow: auto;
      white-space: nowrap;
   }
</style>

Answer 2

1）两个按钮中都缺少＃right-button和#sont-button.so与class

一起使用

2）为事件处理程序使用ready函数。

3）使用#browser代替＃conten。因为没有此名称的id。

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>

Answer 3

#right-button会引用id='#right-button'的标记试试.rightArrow＆＃39;相反;）（或通过class更改输入标记id，并使用正确的名称）

然后将您的脚本放在<head></head>

之间

此外，您正在使用scrollLeft，它可以控制＆＃34;滚动＆＃34;这意味着tou可以在带有溢出的元素上使用它来滚动。

如果您想移动，则应考虑.offset或.position以及.animate以添加视觉效果

Answer 4

您的脚本似乎已被注释，并且它也没有指向正确的ID /类。而且，你的箭头也是相反的。

以下是您发布的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>

此外，虽然您可以将<script>元素放在body内，但最好将它们添加到head部分。

水平滚动DIV与按钮

4 个答案: