Custom Scroll in Tree, JavaScript Programming Example of Custom Scroll in Tree

var smalltreedata = [
  {id:"root", value:"Films data", open:true, data:[
    { id:"1", open:true, value:"The Shawshank Redemption", data:[
      { id:"1.1", value:"Part 1" },
      { id:"1.2", value:"Part 2", open:true, data:[
        { id:"1.2.1", value:"Page 1" },
        { id:"1.2.2", value:"Page 2" },
        { id:"1.2.3", value:"Page 3" },
        { id:"1.2.4", value:"Page 4" },
        { id:"1.2.5", value:"Page 5" },
        { id:"2.2.1", value:"Page 1" },
        { id:"2.2.2", value:"Page 2" },
        { id:"2.2.3", value:"Page 3" },
        { id:"2.2.4", value:"Page 4" },
        { id:"2.2.5", value:"Page 5" },
        { id:"3.2.1", value:"Page 1" },
        { id:"3.2.2", value:"Page 2" },
        { id:"3.2.3", value:"Page 3" },
        { id:"3.2.4", value:"Page 4" },
        { id:"3.2.5", value:"Page 5" },
        { id:"4.2.1", value:"Page 1" },
        { id:"4.2.2", value:"Page 2" },
        { id:"4.2.3", value:"Page 3" },
        { id:"4.2.4", value:"Page 4" },
        { id:"4.2.5", value:"Page 5" },
        { id:"1.2.1", value:"Page 1" },
        { id:"5.2.2", value:"Page 2" },
        { id:"5.2.3", value:"Page 3" },
        { id:"5.2.4", value:"Page 4" },
        { id:"5.2.5", value:"Page 5" },
        { id:"6.2.1", value:"Page 1" },
        { id:"6.2.2", value:"Page 2" },
        { id:"6.2.3", value:"Page 3" },
        { id:"6.2.4", value:"Page 4" },
        { id:"6.2.5", value:"Page 5" }
      ]},
      { id:"1.3", value:"Part 3" }
    ]},
    { id:"2", open:true, value:"The Godfather", data:[
      { id:"2.1", value:"Part 1" },
      { id:"2.2", value:"Part 2" }
    ]}
  ]}
];

if (!webix.env.touch && webix.env.scrollSize)
  webix.CustomScroll.init();

webix.ui({
  height:350, width:300, type:"clean", margin:20,
  rows:[
    {template:"<strong>Custom Scroll in Tree</strong>", height:30},
    {
      view:"tree",
      data: smalltreedata
    }
  ]
});