javascript - Dynamically add and remove the div on scroll? -
i tried add , remove div tags while scrolling dojo grid works. want display 7 div tags.
while scrolling left inside container, when first div tag (on left side) hidden webpage, hidden div removed container , new 1 attached onto right side.
the same process should applied while scrolling right.
it's similar this example. in stead of scrolling <tr> tag, want scroll through <div>'s.
this tried before: https://jsfiddle.net/9y2ptsbg/3/ how can it? if there's plugin out there (like dojo), it's helpful.
maybe js fiddle ?
https://jsfiddle.net/9y2ptsbg/12/
var container = $("#container"), info = $("#info"); var j = 0; var colors = ['rgba(143, 146, 199, 0.49)', 'rgba(199, 143, 186, 0.49)', 'rgba(149, 199, 143, 0.49)', 'rgba(229, 86, 61, 0.49)', 'rgba(212, 229, 61, 0.49)', 'rgba(206, 61, 229, 0.49)', 'rgba(229, 157, 61, 0.49)', 'rgba(61, 165, 229, 0.49)', 'rgba(61, 229, 133, 0.49)', 'rgba(229, 61, 61, 0.49)', 'rgba(116, 61, 229, 0.49', 'rgba(218, 229, 61, 0.49)', 'rgba(21, 43, 157, 0.49)', 'rgba(153, 157, 21, 0.49)', 'rgba(199, 143, 186, 0.49)', 'rgba(149, 199, 143, 0.49)', 'rgba(229, 86, 61, 0.49)', 'rgba(212, 229, 61, 0.49)', 'rgba(206, 61, 229, 0.49)', 'rgba(229, 157, 61, 0.49)', 'rgba(61, 165, 229, 0.49)', 'rgba(61, 229, 133, 0.49)', 'rgba(229, 61, 61, 0.49)', 'rgba(116, 61, 229, 0.49', 'rgba(218, 229, 61, 0.49)', 'rgba(21, 43, 157, 0.49)', 'rgba(153, 157, 21, 0.49)', 'rgba(199, 143, 186, 0.49)', 'rgba(149, 199, 143, 0.49)'] var ary = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36'], cursor = 0, attachdiv = function (_curr) { container.empty(); var j = 0; (var = _curr; < _curr + 8; i++) { container.append('<div class = "blocks blocks' + + '" style="left:' + (j * 25) + '%; background:' + colors[i] + ';">' + ary[i] + '</div>'); j++; } }; var hasscrolled = false, locked = false, ticker = function () { if (hasscrolled && !locked) { locked = true; var xz = container.scrollleft(), maxscrollleft = container.get(0).scrollwidth - container.get(0).clientwidth, middle = maxscrollleft / 2; if (xz == 0) { cursor = math.max(0, cursor - 4); } else if (xz == maxscrollleft) { cursor = math.min(cursor + 4, ary.length - 8) } attachdiv(cursor); container.scrollleft(middle); info.text(cursor); locked = false; } hasscrolled = false; } setinterval(ticker, 250); container.on('scroll', function () { hasscrolled = true; }); attachdiv(0);
Comments
Post a Comment