javascript - 检查元素是否可以向左或向右滚动

Question

我想为某个 div 显示指示器，以表明它可以根据其状态向右或向左滚动。为此，我需要知道元素是否可以滚动到相应的位置，例如如果右侧有内容显示指示器，滚动后在左侧显示另一个指示器，表明用户现在也可以滚动到那里。我有一个像这样的简单设置:https://jsfiddle.net/udv8u596/

(你可以水平滚动，滚动条是故意隐藏的)

HTML:

<div class="scroll-container">
    <div class="scroll-content">
        Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally Scroll Me Horizontally 
    </div>
</div>

CSS:

.scroll-container {
    width: 80%;
    margin: 0 auto;
    background: cyan;
    overflow-y: hidden;
    height: 36px;
}

.scroll-content {
    padding: 10px 0;
    height: 50px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}

Answer 1

要检查元素是否沿 x 轴溢出，您可以简单地比较它的计算宽度(可通过 jQuery 的 .width() 方法访问)和它的 scrollWidth(一个原生 JS 函数):

var $ele = $('.scroll-content'),
    overflowing = $ele[0].scrollWidth > $ele.width();

然后您可以检查 overflowing 的 bool 值是否元素溢出。但是，请注意，如果您希望在窗口调整大小时更新此变量，则需要做更多的工作:

var $ele = $('.scroll-content'),
    overflowing = function() {
        if($ele[0].scrollWidth > $ele.width()) {
            return true;
        } else {
            return false;
        }
    };

console.log(overflowing());

$(window).resize(function() {
    console.log(overflowing());
});

这是实现上述逻辑的 fiddle ，稍作修改:https://jsfiddle.net/teddyrised/udv8u596/5/