AngularJs Auto Scroll Not working

9 posts, 1 answers
  1. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 03 Jan 2017 Link to this post

    The following does not work:

    <div class="col-lg-8" id="toolbarContainer" data-ng-show="!showToolbarButtons" style="overflow:hidden;">
    <div class="col-lg-1" style="padding-top: 5px;">
    <kendo-button id="leftScrollButton" data-ng-click="scrollingLeft()" style="float: right;">
    <span class="k-icon k-i-arrow-w"></span></kendo-button>
    </div>
    <div class="k-button-group" id="toolbarButtonGroup" kendo-sortable k-change="onChangeButtons" k-container="toolbarContainer"
    k-auto-scroll="true" style="padding-top: 5px; overflow:hidden">
    <span ng-repeat="availableWindow in availableWindows">
    <kendo-button
    style="font-size: 8pt"
    data-ng-style="getButtonStyle(availableWindow.id)"
    data-ng-click="toolbarButton(availableWindow.id)">
    {{availableWindow.shortName ? availableWindow.shortName : availableWindow.window.title()}}
    </kendo-button>
    </span>
    </div>
    <div class="col-lg-1" style="padding-top: 5px">
    <kendo-button id="rightScrollButton" data-ng-click="scrollingRight()">
    <span class="k-icon k-i-arrow-e"></span></kendo-button>
    </div>
    </div>

  2. Stefan
    Admin
    Stefan avatar
    1886 posts

    Posted 04 Jan 2017 Link to this post

    Hello Marc,

    I can assume that the issue occurs because all of the requirements are not met.

    For example, the CSS overflow property should be auto and the container should have height and width set:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/sortable#configuration-autoScroll

    If the issue still occurs after the requirements are met, please send a fully runnable example so I can investigate further.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 04 Jan 2017 in reply to Stefan Link to this post

    Hi Stefan!

    Thanks for pointing this out. It's working (almost) for me now. I would like to hide the scrollbars - is there any way to do this and still have auto scroll work correctly? (adding overflow:hidden; to my parent element does not work)

  4. Stefan
    Admin
    Stefan avatar
    1886 posts

    Posted 06 Jan 2017 Link to this post

    Hello Marc,

    Using the CSS rule overflow: hidden will not only hide the scrollbar but it will disable the scroll functionality as well.

    I can suggest using the following CSS to hide the scrollbar and at the same time use the overflow: auto in order to have a scrolling container:

    ::-webkit-scrollbar {
      display: none;
    }

    More information on the subject can be found at:

    http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 06 Jan 2017 in reply to Stefan Link to this post

    Unfortunately this will hide the scrollbars for every element on the page wont it. Thanks.
  6. Answer
    Stefan
    Admin
    Stefan avatar
    1886 posts

    Posted 09 Jan 2017 Link to this post

    Hello Marc,

    In the link from StackOverflow is demonstrated how the style can be applied to a specific element on the page:

    #element::-webkit-scrollbar {
        display: none;
    }

    Please let me know 
    If this still does not work as expected.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Marc
    Marc avatar
    171 posts
    Member since:
    Sep 2016

    Posted 11 Jan 2017 in reply to Stefan Link to this post

    Yes this does work. However due to other problems I've had to give up on this idea!

    Thanks for all your help!

    Marc

  8. Eduardo
    Eduardo avatar
    2 posts
    Member since:
    Dec 2017

    Posted 07 Jun in reply to Stefan Link to this post

    I am trying to do this work, based in this kendo page examlple:

    https://demos.telerik.com/kendo-ui/sortable/handlers

    If I add scroll to the div sortable, how can I force the scroll move up or down?

  9. Eduardo
    Eduardo avatar
    2 posts
    Member since:
    Dec 2017

    Posted 07 Jun in reply to Eduardo Link to this post

Back to Top