在Slider Div上设置滚动

时间:2015-04-10 12:52:32

标签: javascript jquery html css slider

我正在构建一个包含幻灯片的新闻源,这些幻灯片显示摘要和更多按钮,点击后会显示其余内容。

这是一个jsFiddle:http://jsfiddle.net/pbunz5ue/1/

单击“阅读更多”时,故事将打开,滚动停止,然后用户单击“更少”,它会隐藏故事并继续滚动。

单击“阅读更多”时,我需要对齐div的滚动,以便打开的故事从div的顶部开始。我的滑块在故事的第一轮完美地完成了这一点,一旦它们从按钮向上显示第二次这不再有效。

有人可以解释原因吗?

这是我的代码:

JS:

$(document).ready(function() {

    //User clicks Read More, add 'open' class to news item
    $('.news-read-more').on('click', function() {
        blockedSlider = true;
        clearInterval(myTimer);
        $('.news-list').children('li').each(function() {
            $(this).removeClass('open');
        });
        $(this).parent().toggleClass('open');

        var n = $(this).parent();
        var pos = n.position();
        $('.news-slider-wrapper').scrollTop(pos.top); 

    }); 

    //User clicks Less, remove 'open' class from news item
    $('.news-read-less').on('click', function() {
        if (blockedSlider == true) {
            blockedSlider = false;
            $(this).parent().removeClass('open');
            myTimer = setInterval(slideLoop, 2000)
        }
    });

    var myTimer = setInterval(slideLoop, 2000)
    var blockedSlider = false;

    function slideLoop() {
        //  Work out width of current slider size
        var widthPx = $('.news-list-item').css('height');
        var width = widthPx.substring(0, widthPx.length - 2);

        // Work out current left  
        var left = $('.news-list').css('top');
        left = left.substring(0, left.length - 2);


        if (left <= -(width * 2)) {
            var neg = '-' + widthPx;
            $('.news-list').css('top', neg);

            var slide = $('.news-list li:first');
            $('.news-list').children('li:first').remove();
            $('.news-list ').append(slide);

            //User clicks Read More, add 'open' class to news item
            $('.news-read-more').on('click', function() {
                blockedSlider = true;
                clearInterval(myTimer);
                $('.news-list').children('li').each(function() {
                    $(this).removeClass('open');
                });
                $(this).parent().toggleClass('open');

                var n = $(this).parent();
                var pos = n.position();
                $('.news-slider-wrapper').scrollTop(pos.top - 360); 

            }); 

            //User clicks Less, remove 'open' class from news item
            $('.news-read-less').on('click', function() {
                if (blockedSlider == true) {
                    blockedSlider = false;
                    $(this).parent().removeClass('open');
                    myTimer = setInterval(slideLoop, 2000)
                }
            });         

            var move = "-=" + widthPx;
            $('.news-list').animate({ top: move }, "slow", "swing");
        }
        else {
            var move = "-=" + widthPx;
            $('.news-list').animate({ top: move }, "slow", "swing");
        }
    }   

});

1 个答案:

答案 0 :(得分:1)

问题是由负面的&#34; top&#34; .news-list的位置,它破坏了已打开元素的位置。

- &GT;我更新你的小提琴:http://jsfiddle.net/pbunz5ue/3/&lt; -

我改变了什么

  1. 主要错误:

    当您计算位置时,您在新闻容器top向上滑动时不会被视为负.news-list偏移量:

    我改变了这两行:

    var pos = n.position();
    $('.news-slider-wrapper').scrollTop(pos.top); 
    

    在:

    var pos = n.position().top + parseInt($(".news-list").css("top")) || n.position().top;
    $('.news-slider-wrapper').scrollTop(pos); 
    

    如果$(".news-list")位于最高位置,我会将其添加到位置计算中(如果结果为auto,则会出现阻止NaN结果|| n.position().top)的回退

  2. 您已经复制了处理程序$('.news-read-more').on('click')$('.news-read-less').on('click');我删除了函数中的那些,因为它们似乎没用。

  3. 编辑:: .on点击问题

    尝试这两种方法来解决您的问题:

    1。

    如果在将新项目添加到列表中时遇到问题,请尝试将事件绑定到&#34;项目&#34;容器.news-list并在每次触发时过滤选择器:

    $('.news-read-more').on('click', function() { //...
    $('.news-read-less').on('click', function() { //...
    

    变为:

    $('.news-list').on('click','.news-read-more', function() { //...
    $('.news-list').on('click','.news-read-less', function() { //...
    

    容器.news-list在动画和DOM操作期间永远不会改变。

    2

    另一种方法是在代码中更改此行:

     var slide = $('.news-list li:first');
     $('.news-list').children('li:first').remove();
     $('.news-list ').append(slide);
    

    变为:

     var slide = $('.news-list li:first');
     $('.news-list ').append(slide);
    

    或:

     $('.news-list ').append('.news-list li:first');
    

    如果您.remove元素,(我认为)您取消绑定所有事件,因为您从DOM中删除了元素,但您不需要删除,您需要将其从上到下移动。这样可以防止click事件的解除绑定。


    我希望能够理解这个问题:)。

    对不起,可能是英文不好