Question

我正在研究动态时间轴，父元素是每次点击时推送子元素200px，问题是，因为设计，在第一次点击滑块按钮后没有机会在时间轴上只显示4个元素，我的问题是，如何隐藏子元素＆＃34;开始＆＃34;要溢出父级，或者如何隐藏视口不是100％可见的元素。

// Single timeline element
    $('<div/>', {
        'class': 'timeline-holder ' + value.content_type + '-element' + elementClass,
        'text': 'Text Only',
        'html': '<div class="circle-timeline circle-background-'+ value.override_content_type_icon +'">' +
        // '<p>2005</p>' +
        '<span>' + value.segment_label + '</span>' +
        '<div class="timeline-block">' +
        '<span>' + value.segment_label + '</span>' +
        '<h2>' + value.headline + '<i class="fa fa-star ' + favoriteClass + '" aria-hidden="true"></i>' +
        '<div class="bookmark ' + bookmarkClass + '">B</div>' +
        '</h2>' +
        blockContent +
        imageBlock +
        iframeElement +
        readmoreButton +
        downloadButton +
        '</div>' +
        '</div>'
    }).appendTo('#timeline-slider');

我正在从json文件中读取数据，这是用户点击它时移动滑块的JS

    function moveLeft() {

    var currentMargin = parseInt(tmSlider.css('margin-left'));

    // Check if animation is in progress
    if (!tmSlider.hasClass('animating')) {

        tmSlider.addClass('animating'); // lock slider with class

        elementsToMove = timelineData.timeline.elements_to_move; // reset

        var countElementsLeftToShow = totalElements - stepsPassed - 4;

        sliderLastMove(countElementsLeftToShow);

        stepsPassed = stepsPassed + elementsToMove;

        // Move sldier
        tmSlider.animate({
            'marginLeft': currentMargin - sliderStep
        }, 500, function () {
            setTimeout(function () {
                tmSlider.removeClass('animating');
            }, 500);
        });
    }
}

function moveRight() {

    var currentMargin = parseInt(tmSlider.css('margin-left'));

    // Check if animation is in progress
    if (!tmSlider.hasClass('animating')) {

        tmSlider.addClass('animating'); // lock slider with class

        elementsToMove = timelineData.timeline.elements_to_move;

        sliderLastMove(stepsPassed);

        stepsPassed = stepsPassed - elementsToMove;

        // Move slider
        tmSlider.animate({
            'marginLeft': currentMargin + sliderStep
        }, 500, function () {
            setTimeout(function () {
                tmSlider.removeClass('animating');
            }, 500);
        });
    }
}

rightArrow.on('click', function () {
    moveLeft();
    prepareData();
    // displayArrow()
});

leftArrow.on('click', function () {
    moveRight();
    // displayArrow();
});

希望这有帮助，这是我的第一个问题，

Answer 1

我忘记了这个问题，但是我这样做了，而且很简单。我正在观看元素offset().left，直到它等于或超过＆＃34;向右移动的offset().left＆＃34;箭头，而不是另一边的对面。

隐藏div受父母影响时溢出：隐藏;＆＃39;

1 个答案: