Horizontal Div Scroll

我对Jquery来说很新，我想用scrollLeft属性在div上实现水平滚动，我没有收到任何错误消息，也没有任何东西似乎在工作，有人可以解释为什么吗？在此先感谢这是我的代码：Horizontal Div Scroll

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> 
 
     $(document).ready (function(){ 
 
      var pos = $("#container").scrollLeft(); 
 
      $(".prev").click(function(){ 
 
       $("#container").animate({ 
 
        scrollLeft: pos - 200; 
 
       }); 
 
      }); 
 
     }); 
 
    
 
     
 
     
 
    </script>

<style> 
 
     #container{ 
 
      max-width: 938px; 
 
      height: 500px; 
 
      border: 2px solid black; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
      overflow: scroll; 
 
      /*display: table;*/ 
 
     } 
 
     .picsdiv{ 
 
      display: table-cell; 
 
      min-width: 286px; 
 
      padding-right: 80px; 
 
      height: 508px; 
 
      border: 2px solid pink; 
 
      
 
     } 
 
     
 
     .prev, .next { 
 
      cursor: pointer; 
 
      position: absolute; 
 
      top: 250px; 
 
      width: auto; 
 
      margin-top: -22px; 
 
      padding: 16px; 
 
      color: white; 
 
      font-weight: bold; 
 
      font-size: 18px; 
 
      transition: 0.6s ease; 
 
      border-radius: 0 3px 3px 0; 
 
      border: 2px solid pink; 
 
     } 
 

 
     .next { 
 
      right: 170px; 
 
      border-radius: 3px 0 0 3px; 
 
     } 
 
     .prev{ 
 
      left: 170px; 
 
     } 
 

 
     .prev:hover, .next:hover { 
 
      background-color: rgba(0,0,0,0.8); 
 
     } 
 
    </style>


 
<body> 
 
    <div id="container"> 
 
     <div class="picsdiv"> 
 
     
 
     </div> 
 
     <div class="picsdiv"> 
 
     
 
     </div> 
 
     <div class="picsdiv"> 
 
     
 
     </div> 
 
     <div class="picsdiv"> 
 
     
 
     </div> 
 
     <a class="prev">&#10094;</a> 
 
     <a class="next">&#10095;</a> 
 
    </div> 
 
    
 
</body>

来源

2017-04-01 MGS

你有一个语法错误'scrollLeft：POS - 200;'不应该用分号 –

和帕托萨拉萨尔结束，我已经摆脱了它，它仍然没有按不工作 – MGS

确切地告诉我你在做什么来测试这个代码......你是先滚动然后点击上一步使它回去......或者你是否立即单击prev按钮？ –

我刚刚添加了一个单独的脚本标记Jquery的代码，并使用第一个只引用该库，它现在的作品。感谢您的帮助

来源

2017-04-02 09:07:48 MGS

采取了在这条线的分号，它应该工作

scrollLeft: pos - 200;

来源

2017-04-01 20:46:04 garek007

它仍然没有工作，实际上已经尝试过，这很奇怪，因为我的调试器isn即使给我任何错误信息 – MGS

是啊我没有注意到脚本标记，因为我把它放入jsfiddle – garek007

仍然没有工作？你修复了脚本标签吗？ – garek007

首先，你必须关闭脚本代码，包括jquery文件，并打开另一个脚本标记为您的jQuery代码

来源

2017-04-01 21:02:00 mak

你已经在你的代码中完成2个错误：

scrollLeft：POS - 200;应该像scrollLeft：（POS - 200），因为你传递一个对象作为参数
写两个<script>标签，一个jQuery的，像下面

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javacsript"></script>

另一个为您的自定义java脚本

<script type="text/javascript">  
    $(document).ready (function(){ 
     var pos = $("#container").scrollLeft(); 
     $(".prev").click(function(){ 
      $("#container").animate({ 
       scrollLeft: (pos - 200) 
      }); 
     }); 
    });

因为如果使用ths元素作为外部参考，则不能在元素内编写代码。

这是您的完整的运行代码

<html> 
<head> 
<style>  
    #container{ 
    max-width: 938px; 
    height: 500px; 
    border: 2px solid black; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: scroll; 
    /*display: table;*/ 
    } 
    .picsdiv{ 
    display: table-cell; 
    min-width: 286px; 
    padding-right: 80px; 
    height: 508px; 
    border: 2px solid pink; 
    } 
    .prev, .next { 
    cursor: pointer; 
    position: absolute; 
    top: 250px; 
    width: auto; 
    margin-top: -22px; 
    padding: 16px; 
    color: white; 
    font-weight: bold; 
    font-size: 18px; 
    transition: 0.6s ease; 
    border-radius: 0 3px 3px 0; 
    border: 2px solid pink; 
    } 
    .next { 
    right: 170px; 
    border-radius: 3px 0 0 3px; 
    } 
    .prev{ 
    left: 170px; 
    } 
    .prev:hover, .next:hover { 
    background-color: rgba(0,0,0,0.8); 
    } 
</style> 
</head> 
<body> 
    <div id="container"> 
     <div class="picsdiv"> 
     </div> 
     <div class="picsdiv"> 
     </div> 
     <div class="picsdiv"> 
     </div> 
     <div class="picsdiv"> 
     </div> 
     <a class="prev">&lt;</a> 
     <a class="next">&gt;</a> 
    </div> 
</body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">  
    $(document).ready (function(){ 
      var pos = $("#container").scrollLeft(); 
      $(".prev").click(function(){ 
       $("#container").animate({ 
        scrollLeft: (pos - 200) 
       }); 
      }); 
     }); 
</script> 
</html>

来源

2017-04-02 09:16:13

我修复了一些错别字。 –

Horizo​​ntal Div Scroll

回答

相关问题

Horizontal Div Scroll