How to Scroll Left and Right inside div in Angularjs

Question

I want a directive or any method to scroll inside div horizontally using angular or javascript, no jquery please.

the fiddle above shows what i'm trying to achieve.

$('#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);
});

the above code is jQuery of want i want in angular

Thanks

ya i know its funny, but i want to avoid jQuery, that's why i mentioned "the above code is jQuery of want i want in angular" — William Scott
– William Scott, Commented May 26, 2017 at 19:36
ok :D yeah was just funny but I got you, actually you just want the same script working without jQuery I suppose — quirimmo
– quirimmo, Commented May 26, 2017 at 19:41

quirimmo · Accepted Answer · 2017-05-26 19:39:49Z

Bind the functions to the buttons and use the scrollLeft properties incrementing or decreasing the value by the amount you want to

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>

Collectives™ on Stack Overflow

How to Scroll Left and Right inside div in Angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related