javascript - 确定水平滚动javascript上显示多少张卡片

Question

我正在尝试处理确定容器中显示多少张卡片的水平滚动条。

示例让我们说下表是卡片

卡 1	卡 2	卡 3
一	二	三

显示应该是 6 中的 3 并且剩余的 3 卡在溢出时被隐藏。当我水平滚动到末尾时，它应该显示 6 张卡片中的 6 张。它是一种记录计数，但使用滚动

我在下面有以下代码，但我不想使用 jquery，我正在尝试转换代码，但它没有正确检索 javascript 中的宽度和左侧测量值。在 jsfiddle 中检查下面的注释代码。

• http://jsfiddle.net/ujs2r0wd/

function  checkInView(elem,partial)
{
    var container = $(".scrollable");
    var contHeight = container.width();
    var contTop = container.scrollLeft();
    var contBottom = contTop + contHeight ;
 
    var elemTop = $(elem).offset().left - container.offset().left;
    var elemBottom = elemTop + $(elem).width();
    
    var isTotal = (elemTop >= 0 && elemBottom <=contHeight);
    var isPart = ((elemTop < 0 && elemBottom > 0 ) || (elemTop > 0 && elemTop <= container.width())) && partial ;
    
    return  isTotal  || isPart ;
}

这是我的尝试或尝试：

function  checkInView(elem,partial)
{
    var container = document.querySelector(".scrollable");
    const contHeight = container.width;
    const contTop = container.scrollLeft;
    const contRight = contTop + contHeight;

    //const elemTop = elem.offsetLeft - container.offsetLeft;
    console.log($(elem).offset().left);
    console.log($(elem).offsetLeft);
    var elemTop = elem.offset().left - container.offset().left;
    const elemBottom = elemTop + elem.width;

    const isTotal = (elemTop >= 0 && elemBottom <= contHeight);
    const isPart = ((elemTop < 0 && elemBottom > 0) || (elemTop > 0 && elemTop <= container.width)) && partial;
    
    return  isTotal  || isPart ;
}

  function ready (){
    const getEle = document.querySelector(".scrollable");
    document.querySelector(".scrollable").addEventListener("click", (event) => {
         var result="",
       result2="";
       for (var i = 0, i >= getEle.length; i++) {
            result += " " +  checkInView(e,false);
            result2 += " " +  checkInView(e,true);
       }
       
       console.log(result);
       console.log(result2);
        });
};  

参考：检测可滚动 div 中的元素何时不在视野范围内

你能帮我转换代码吗，或者你能在代码中展示我怎么做吗？谢谢你的帮助！

标签： javascripthtmlcss