如何在Angularjs中的div内向左和向右滚动

Question

我想要一个指令或任何方法使用angular或javascript在div中水平滚动，请不要使用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>