如何在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属性按值增加或减少值

＆＃13;

＆＃13;

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

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

＆＃13;

.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;
   }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;