How to add an interval for auto scroll in kendo ScrollView?

[Maksim]

Hi!

Where does ScrollView auto-scroll start? I didn't find this in the documentation and examples. I was sure that this function should be in ScrollView, like all other similar controls (Nivo-Scroll).

If this feature is not there, is it possible to get a working example to use ScrollView with automatic scrolling and slowdown after page selection?

Best Regards
Maksim Bragin

[Mihaela]

Hello Maksim,

At this stage, the auto-scroll functionality is not supported, however, you could achieve the desired result by using the next() and scrollTo() methods of the ScrollView:

• When the page is loaded, get a reference to the ScrollView and call its next() method to switch to the next page.
• Handle the ScrollView Change event that triggers when the page is changed. Check if the last page is reached and scroll to the first one. Also, increase the delay when a page is selected.

<div id="example" style="margin:auto; width:60%">
    @(Html.Kendo().ScrollView()
    .Name("scrollView")
    .ContentHeight("100%")
    .Items(x =>
    {
        x.Add().Content("<div class='photo photo1'></div>");
        x.Add().Content("<div class='photo photo2'></div>");
        x.Add().Content("<div class='photo photo3'></div>");
        ...
    })
    .HtmlAttributes(new { style = "height:515px; width:1022px; max-width: 100%;" })
    .Events(ev => ev.Change("onChange"))
    )
</div>

<script>
    let timerId;

    $(document).ready(function () {
          setTimeout(()=>{
            var scrollView = $("#scrollView").getKendoScrollView();
            scrollView.next();
          },1000)
    });

    function onChange(e) {
        var timeout = 2000;
        if(event && $(event.currentTarget).hasClass("k-scrollview-nav")){
            clearTimeout(timerId);
            timeout = 5000;
        }
        var scrollView = e.sender;
        var page = e.nextPage;

        timerId = setTimeout(()=>{
            page == scrollView.itemsWrapper.children().length - 1 ? 
            scrollView.scrollTo(0) : scrollView.next()
        },timeout);
    }
</script>

Here is a REPL sample for your reference:

https://netcorerepl.telerik.com/QHFPlIcQ44YAdkrw17

 

 

Regards,
Mihaela
Progress Telerik

[Maksim]

Mihaela, hi! Works great!!!! I tested all modes and situations, I will use it myself.