jQuery animate не прокручивается должным образом

Question

У меня есть большой контейнерный элемент для хранения меньшего контейнера и его содержимого. У меня есть jQuery, сделанный для прокрутки по нажатию кнопки, но он не работает, и я не знаю, почему это не прокрутка, которую я имел, и предупреждающий там, чтобы убедиться, что он работает, и это отлично работает. Это тот же код, который я использовал в предыдущем проекте, и это прекрасно работает, я не вижу, где я ошибаюсь в этом коде. Вот JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

    <script> 
     $(document).on('click', '#left-featured', function(event){ 
      $('#travel-item-container').animate({"scrollLeft": '+=-600px'}, 1000); 
     }); 

     $(document).on('click', '#right-featured', function(event){ 
      $('#travel-item-container').animate({"scrollLeft": '+=+600px'}, 1000); 
     }); 
    </script> 

Вот контейнер и его элементы:

<div class="travel-container"> 
         <div id="left-featured">&lt;</div> 
         <div id="right-featured">&gt;</div> 
         <div id="travel-item-container"> 
          <div class="travel-item"> 
           <img class="travel-picture" src="Images/golf-course.jpg"/> 
           <p class="travel-type">Golfing</p> 
           <p class="travel-cost">$300</p> 
           <p class="travel-title">Greensburg, IN</p> 
          </div> 
          <div class="travel-item"> 
           <img class="travel-picture" src="Images/golf-course.jpg"/> 
           <p class="travel-type">Golfing</p> 
           <p class="travel-cost">$300</p> 
           <p class="travel-title">Greensburg, IN</p> 
          </div> 
          <div class="travel-item"> 
           <img class="travel-picture" src="Images/golf-course.jpg"/> 
           <p class="travel-type">Golfing</p> 
           <p class="travel-cost">$300</p> 
           <p class="travel-title">Greensburg, IN</p> 
          </div> 
         </div> 
        </div> 

Answer 1

Она нуждается в некоторых корректировках для контейнера, например, ширину, переполнение, левой собственность. Так я сделал с добавлением правила css.

#travel-item-container { 
    position:absolute; 
    top:30px; 
    left:20px; 
    width:30px; 
    overflow:auto; 
} 

Answer 2

Это тело, которое нуждается в прокрутке.

$(document).on('click', '#left-featured', function(){ 
 
      $('html body').animate({"scrollLeft": -600}, 1000); 
 
     }); 
 

 
     $(document).on('click', '#right-featured', function(){ 
 
      $('html body').animate({"scrollLeft": 600}, 1000); 
 
     });

#left-featured 
 
{ 
 
    position: fixed; 
 
    left: 0; 
 
    bottom: 20px; 
 
    padding: 20px; 
 
} 
 

 
#right-featured 
 
{ 
 
    position: fixed; 
 
    right: 0; 
 
    bottom: 20px; 
 
    padding: 20px; 
 
} 
 

 
.travel-container 
 
{ 
 
    width: 1000px; 
 
    overflow: auto; 
 
    text-align: center; 
 
} 
 

 
.travel-item 
 
{ 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="travel-container"> 
 
    <div id="left-featured">&lt;</div> 
 
    <div id="right-featured">&gt;</div> 
 
    <div id="travel-item-container"> 
 
     <div class="travel-item"> 
 
      <img class="travel-picture" src="Images/golf-course.jpg"/> 
 
      <p class="travel-type">Golfing</p> 
 
      <p class="travel-cost">$300</p> 
 
      <p class="travel-title">Greensburg, IN</p> 
 
     </div> 
 
     <div class="travel-item"> 
 
      <img class="travel-picture" src="Images/golf-course.jpg"/> 
 
      <p class="travel-type">Golfing</p> 
 
      <p class="travel-cost">$300</p> 
 
      <p class="travel-title">Greensburg, IN</p> 
 
     </div> 
 
     <div class="travel-item"> 
 
      <img class="travel-picture" src="Images/golf-course.jpg"/> 
 
      <p class="travel-type">Golfing</p> 
 
      <p class="travel-cost">$300</p> 
 
      <p class="travel-title">Greensburg, IN</p> 
 
     </div> 
 
    </div> 
 
</div>