Angularjsのdiv内で左右にスクロールする方法

Question

divやangleをjavascriptを使って水平にスクロールさせたい場合は、jqueryを使用しないでください。

http://jsfiddle.net/EB4UC/70/

上記のフィドルは私が達成しようとしているかを示しています。

$('#left').click(function() { 
    var leftPos = $('div.outer_container').scrollLeft(); 
    console.log(leftPos); 
    $("div.outer_container").animate({ 
     scrollLeft: leftPos - 500 
    }, 800); 
}); 

$('#right').click(function() { 
    var leftPos = $('div.outer_container').scrollLeft(); 
    console.log(leftPos); 
    $("div.outer_container").animate({ 
     scrollLeft: leftPos + 500 
    }, 800); 
}); 

上記のコードでのjQueryのある私は、角

にしたいボタンのおかげ

Answer 1

バインド機能をしたいと

にしたい量だけ値を増加または減少するscrollLeftのプロパティを使用します

function leftScroll() { 
 
    document.querySelector('div.outer_container').scrollLeft -= 500; 
 
} 
 

 
function rightScroll() { 
 
    document.querySelector('div.outer_container').scrollLeft += 500; 
 
}

.outer_container { margin: 0 auto; } 
 
#left { margin-left: 300px; } 
 

 
#right { } 
 

 
.button { 
 
    cursor: pointer; 
 
    width: 50px; 
 
    text-align: center; 
 
    border-top: 1px solid #96d1f8; 
 
    background: #65a9d7; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7)); 
 
    background: -webkit-linear-gradient(top, #3e779d, #65a9d7); 
 
    background: -moz-linear-gradient(top, #3e779d, #65a9d7); 
 
    background: -ms-linear-gradient(top, #3e779d, #65a9d7); 
 
    background: -o-linear-gradient(top, #3e779d, #65a9d7); 
 
    padding: 5px 10px; 
 
    -webkit-border-radius: 8px; 
 
    -moz-border-radius: 8px; 
 
    border-radius: 8px; 
 
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; 
 
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; 
 
    box-shadow: rgba(0,0,0,1) 0 1px 0; 
 
    text-shadow: rgba(0,0,0,.4) 0 1px 0; 
 
    color: white; 
 
    font-size: 14px; 
 
    font-family: Georgia, serif; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
    } 
 
.button:hover { 
 
    border-top-color: #28597a; 
 
    background: #28597a; 
 
    color: #ccc; 
 
    } 
 
.button:active { 
 
    border-top-color: #1b435e; 
 
    background: #1b435e; 
 
    }

<div class="outer_container" style="overflow: scroll; overflow-y: hidden; width:577px; border-style:solid; border-width:5px; border-color:#578278;"> 
 
    <div class="inner_container" style="width: 10000px;"> 
 
     <table> 
 
      <tr> 
 
       <td style=" width: 577px; "> 
 
        <div style="text-align:left; margin: 0px 10px 10px 10px; width:557px; "> 
 
         <p>Add Comment to the Tesco Catalogue</p> 
 
         <form class="comment_form" action="profile" 
 
         method="post"> 
 
          <textarea style="resize:none;" maxlength="250" rows="2" cols="65" placeholder="Enter your comment here..."></textarea> 
 
          <input type="submit" value="Submit" /> 
 
         </form> 
 
        </div> 
 
       </td> 
 
       <!-- do a for loop here to generate all other items --> 
 
       <td style="width:577px;"> 
 
        <div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;"> 
 
         <p class="comment_username">User said at such a time</p> 
 
         <p class="comment_comment">Comment ......</p> 
 
        </div> 
 
       </td> 
 
       <td style="width:577px;"> 
 
        <div style="text-align:left; padding: 5px 10px 5px 10px; margin: 0px 10px 10px 10px; width:567px; border-style:solid; border-width:1px; border-color:#578278;"> 
 
         <p class="comment_username">User said at such a time</p> 
 
         <p class="comment_comment">Comment ......</p> 
 
        </div> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div> 
 
<span id="left" class="button" onclick="leftScroll()">Left</span> 
 
<span id="right" class="button" onclick="rightScroll()">Right</span>