Question

如何使用jquery

显示隐藏div区域

如果滚动条或溢出元素活动且无效

和我的问题的示例代码

示例html

$(function(){
    var t = $('#container-ts-plugin-area'),
        s = t.find('.container-ts-plugin-area'),

        e = s.find('.ts-plugin-area'),
        f = (e.outerWidth()+parseInt(e.css('margin-left'),10)+parseInt(e.css('margin-right'),10))*e.length;
    s.css('width', f);
    $('._ts_cont_btn_N_P button').on("click mouseenter", function() {   
        var role = $(this).data('role');
        t.stop().animate({
            scrollLeft: (role=="N")?"+=300px":"-=300px"
        }, 400);
    });
});

._ts_cont_btn_N_P {
    overflow: hidden;
}
.plugin-area {
    overflow-x:auto;
    overflow-y:hidden;
}

.ts-plugin-area {
  width:100px;
  height:100px;
  background-color:red;
  display:block;
  float:left;
  margin:0 5px;
}

._ts_btn_prev_plugin {
  float:left;
}
._ts_btn_N_plugin {
  float:right;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="_cont_plugin_tse">

<div class="_ts_cont_btn_N_P">   <!-- auto show hide -->
    <button class="_ts_btn_P_plugin" data-role="P">&lt;&lt;</button>
    <button class="_ts_btn_N_plugin" data-role="N">&gt;&gt;</button>
</div>

<div id="container-ts-plugin-area" class="plugin-area">
    <div class="container-ts-plugin-area">
    <div class="ts-plugin-area" data-position="1">1</div>
    <div class="ts-plugin-area" data-position="2">2</div>
    <div class="ts-plugin-area" data-position="3">3</div>
    <div class="ts-plugin-area" data-position="4">4</div>
    <div class="ts-plugin-area" data-position="5">5</div>
    <div class="ts-plugin-area" data-position="6">6</div>   
    </div>
</div>
</div>

Answer 1

要检查元素是否具有滚动条或溢出活动或无活动状态，您需要检查子元素是否大于父元素。

此外，它还取决于您父级的溢出设置，因为它应该是auto或scroll才能显示滚动条。

全球范例

if($('.child').width() > $('.parent').width()) {
  // then do something
  console.log('scrollbar is active');
}

.parent {
  width: 300px;
  overflow: auto;
}

.child {
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
  // add something in here
  </div>
</div>

您的代码可以检查.container-ts-plugin-area宽度是否大于#container-ts-plugin-area宽度，然后显示按钮

默认情况下，在css中隐藏此按钮

._ts_cont_btn_N_P {
    overflow: hidden;
    display: none;
}

并在jQuery中添加

if(s.width() > t.width()) {
    $('._ts_cont_btn_N_P').show();
}

这是您的代码的完整演示 https://jsfiddle.net/p2y79f7x/1/

如果滚动条浏览器处于活动且未激活，则显示隐藏元素

1 个答案: