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的布尔值。但请注意，如果您希望在窗口调整大小时更新此变量，则需要完成更多工作：

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());
});

以上是实施上述逻辑的小提琴，稍作修改：https://jsfiddle.net/teddyrised/udv8u596/5/

Answer 2

伊利亚基本上你需要检查你的元素正确的位置。实现这一点的方法是将内部元素设置为绝对oistion并使用jQuery

获得正确的位置

parseInt($('.scroll-content').css('right')) >= 0

我已将代码修改为：https://jsfiddle.net/udv8u596/4/

在此示例中，在为元素设置动画之前，它会检查righ位置是否大于0。

请注意，根据父元素计算右位置。在css中左侧位置设置为0，但在此示例中将计算righ位置为〜-250。

我希望这能让您了解如何解决问题。

Answer 3

这是您正在寻找的快速入门：

HTML

<div class="scroll-container">
    <div class="mask">
    <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>
</div>
<div class="scrollRight">Scroll Right &raquo;</div>
<div class="scrollLeft">&raquo; Scroll Left </div>

CSS

.scroll-container {
    width: 80%;
    margin: 0 auto;
    background: cyan;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 36px;
}
.mask{
    position:relative;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 36px;
    width: 100%;
}
.scroll-content {
    position:absolute;
    padding: 10px 0;
    height: 50px;
    white-space: nowrap;
    overflow-x: visible;
    width:auto;
}
.scrollRight, .scrollLeft{
    font-size:10px;
    display:none;
}

JS

var contentWidth = $(".scroll-content").width();
var containerWidth = $(".scroll-container").width();

if(contentWidth>containerWidth){
    $(".scrollRight").show();
}

$("body").on("click", ".scrollRight", function(){
    var scrollValue = contentWidth-containerWidth;
    $(".scroll-content").animate({"margin-left":"-"+scrollValue+"px"});
    $(".scrollRight").hide();
    $(".scrollLeft").show();
})

$("body").on("click", ".scrollLeft", function(){
    var scrollValue = contentWidth-containerWidth;
    $(".scroll-content").animate({"margin-left":"0px"});
    $(".scrollRight").show();
    $(".scrollLeft").hide();
})

请参阅Update JSFiddle

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

3 个答案: