在 Slider Div 上设置滚动

Question

我正在构建一个新闻提要，其中包含显示摘要的幻灯片和一个阅读更多按钮，单击该按钮会显示其余内容。

这是一个 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");
        }
    }   

});

Answer 1

问题是由 .news-list 的负“顶部”位置破坏了打开元素的位置引起的。

-> 我更新你的小提琴：http://jsfiddle.net/pbunz5ue/3/

我改变了什么

1. 主要错误：

   当你计算位置时你没有考虑新闻容器.news-list向上滑动时的负top偏移：

   我改变了这两行：

   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'); 我在函数中删除了它们，因为它们似乎没用。

EDIT:: .on 点击​​问题

试试这两种方法来解决你的问题：

1.

如果您在将新项目添加到列表时遇到问题，请尝试将事件绑定到“项目”容器 .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事件的解除绑定。

---

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

对不起，可能英语不好