动态添加和删除滚动上的div？ [英] Dynamically add and remove the div on scroll?

问题描述

我尝试在滚动时添加和删除div标签，就像Dojo网格工作一样。我只想显示7个div标签。

I tried to add and remove div tags while scrolling like the Dojo grid works. I only want to display 7 div tags.

向左滚动容器时，当第一个div标签（左侧）从网页上隐藏时，隐藏的div从容器中删除，一个新的附加到右边。

While scrolling left inside the container, when the first div tag (on the left side) was hidden from the webpage, then that hidden div is removed from the container and a new one is attached onto the right side.

向右滚动时应该应用相同的过程。

The same process should be applied while scrolling to the right.

它类似于此示例 a>。但是，为了代替滚动< tr> 标签，我要滚动到< div>

It's similar to this example. But in stead of scrolling the <tr> tag, I want to scroll through <div>'s.

这是我之前尝试过的： https：// jsfiddle.net/9y2ptsbg/3/ 我该怎么办？

This is what I tried before: https://jsfiddle.net/9y2ptsbg/3/ How can I do it? If there's any plugin out there (like Dojo), it's also helpful.

推荐答案

也许这个js fiddle会有帮助吗？

https://jsfiddle.net/9y2ptsbg/12/

maybe this js fiddle would help ?
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;

for (var i = _curr; i < _curr + 8; i++) {

    container.append('<div  class = "blocks blocks' + i + '" 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);

这篇关于动态添加和删除滚动上的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！