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