Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://unpkg.com/scarletsframe@latest/dist/scarletsframe.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.js'></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css">
</head>
<body>
  
  <div data-simplebar sf-controller="large-list" style="height:200px;">
    <ul class="sf-virtual-list" scroll-parent-index="1">
​
      <li sf-repeat-this="x in list">
        {{x.text}}
      </li>
​
    </ul>
  </div>
  
</body>
 
sf.model.for('large-list', function(self){
  self.list = [];
​
  for(var i = 1; i <= 1000; i++){
    self.list.push({text:i});
  }
});
​
// For manipulate the array or scrolling to an index
sf.controller.run('large-list', function(self){
  self.list.unshift({text:"Hello world"});
  
  setTimeout(function(){
    self.list.splice(2, 1, {text:"We will scroll to 50th"});
  }, 3000);
  
  setTimeout(function(){
    self.list.$virtual.scrollTo(50);
  }, 5000);
});
​
sf.loader.off();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
StefansAryapro
0viewers