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

1 Answer 65 Views
ScrollView
Maksim
Top achievements
Rank 1
Iron
Maksim asked on 10 Nov 2023, 09:22 AM

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

1 Answer, 1 is accepted

Sort by
0
Mihaela
Telerik team
answered on 14 Nov 2023, 10:52 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.
Maksim
Top achievements
Rank 1
Iron
commented on 15 Nov 2023, 08:11 AM

Mihaela, hi! Works great!!!! I tested all modes and situations, I will use it myself. 
Tags
ScrollView
Asked by
Maksim
Top achievements
Rank 1
Iron
Answers by
Mihaela
Telerik team
Share this question
or