Question

美好的一天！

我的问题是：即使条件的答案是真的，右箭头也不会崩溃。它仅在我将窗口调整为较小尺寸时起作用，但是当我尝试将其调整为较大尺寸时，它不会。

也许我错过了什么。希望你能帮助我们。提前谢谢。

这里是片段（请展开）

＆＃13;

   

$('#left-button').css({visibility: 'collapse'});
$('#right-button').click(function() {
	event.preventDefault();
	$('#content').animate({
		scrollLeft: "+=160px"
	}, "moderate" );
});
   
$('#left-button').click(function() {
	event.preventDefault();
	$('#content').animate({
		scrollLeft: "-=160px"
	}, "moderate");
});
   
$('#content').scroll(function () {
	if (this.scrollWidth - $(this).scrollLeft() <= $(this).width() + 0){
		console.log('right end');
		$('#right-button').css({visibility: 'collapse'});
		$('#left-button').css("visibility","visible");
	}
          
	if ($(this).scrollLeft() == 0) {
		console.log('left end');
		$('#right-button').css("visibility","visible");
		$('#left-button').css("visibility","collapse");
	}
          
	if (($(this).scrollLeft() != 0)&&(this.scrollWidth - $(this).scrollLeft() > $(this).width() + 0)) {
		console.log('mid');
		$('#right-button').css("visibility","visible");
		$('#left-button').css("visibility","visible");
	}
          
});

＆＃13;

.left{
 height: 154px;
 border: 0;
  text-align: right;
}

.right{
 height: 154px;
 border: 0;
 text-align: left;
}

div.internal{
 margin-right: 10px;
 min-width: 150px;
 max-width:150px !important;  
 min-height: 150px;
 max-height:150px;
 border-radius: 100%;
 border: 2px solid transparent;
 padding: 0;
 overflow: hidden !important;
 box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

img{
 min-width: 146px;
 max-width:146px !important;
 min-height: 146px;
 max-height:146px;
}

div.internal:hover{
 border: 2px solid orange;
 overflow: hidden !important;
 box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.center{
 width: 954px;
 height: 152px;
 overflow: hidden !important;
 /*will change this to hidden later to deny scolling to user*/
 white-space: nowrap;
 border-radius: 76px 76px 76px 76px;
 font-size: 0px;
 display: flex;
 /*border: 1px solid black;*/
}


#left-button, #right-button{
   vertical-align:sub;
   font-size: 50px;
   font-weight: bolder;
   cursor:pointer;
   text-align: center;
}
.fa-angle-right,.fa-angle-left{
  padding-top:50px;
}
.content{
  display: flex;
  max-height: 154px;
  margin:auto;
  text-align: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-12 content">
    <div class="left">
      <span id="left-button">
        <i class="fa fa-angle-left" style="float: right"></i>&nbsp;
      </span>
    </div>
    <div class="center" id="content">
      <div class="internal">
          <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png">
      </div>
      <div class="internal">
          <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png">
      </div>
      <div class="internal">
          <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png">
      </div>
      <div class="internal">
          <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png">
      </div>
      <div class="internal">
          <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png">
      </div>
      <div class="internal">
          <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png">
      </div>
      <div class="internal">
          <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png">
      </div>
      <div class="internal">
          <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png">
      </div>
      <div class="internal">
          <img class="" src="https://i0.wp.com/vanillicon.com/655060357b259bcfb74db87a5909097c_200.png">
      </div>
    </div>
    <div class="right">
      <span id="right-button">&nbsp;
        <i class="fa fa-angle-right" style="float: left"></i>
      </span>
    </div>
  </div>
</div>

＆＃13;

Answer 1

我发现了两个问题......

使用您提供的代码，您永远不会进入＆＃34;右端＆＃34;条件。 if内部的操作永远不会是真的，因为有一点点差异（0.4 ......），所以永远不会进去。我不知道它的来源（可能是一些填充），我已经能够使用0.5而不是0来使其工作，但检查一下是否有更好的价值。
另一方面，您在三个条件下使用if，当您到达右侧时，它会执行，但也会输入您的第三个选项，并显示按钮再次。您可以使用else if解决第二和第三个问题。

这里有一个工作小提琴......

https://fiddle.jshell.net/rigobauer/k5ck3ssr/

我希望它有所帮助

CSS可见性隐藏或折叠不起作用

1 个答案: