javascript 使用React Slick解决溢出问题

4si2a6ki  于 2023-08-02  发布在  Java
关注(0)|答案(1)|浏览(133)

我使用的React光滑的滑块和滑块卡包含下拉有很多选项。当下拉菜单打开时,下拉菜单的一半被裁剪,无法查看完整的下拉菜单
code pen:https://codepen.io/gtm18/pen/YzRdaML(用jQuery演示)

$(document).ready(function(){
  $('.carousel').slick({
  slidesToShow: 3,
  dots:true,
  centerMode: true,
  });
});

字符串

qyzbxkaa

qyzbxkaa1#

你可以限制下拉菜单的高度,这样滚动条就会被添加,你可以看到所有的选项,就像这样,

$(document).ready(function(){
  $('.carousel').slick({
    slidesToShow: 3,
    dots:true,
    centerMode: true,
  });
})();

// Slick version 1.5.8
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
html, body{
  background-color: #e74c3c;
}
.wrapper{
  width:100%;
  padding-top: 20px;
  text-align:center;
}
h2{
  font-family:sans-serif;
  color:#fff;
}
.carousel{
  width:90%;
  margin:0px auto;
}
.slick-slide{
  margin:10px;
}
.slick-slide img{
  width:100%;
  border: 2px solid #fff;
}
.wrapper .slick-dots li button:before {
  font-size:20px;
  color:white;
}
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
  max-height: 240px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="wrapper">
  <h2>Slick Carousel Example</h2>
  <div class="carousel">
    <div>
      <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">
          Dropdown
        </button>
        <div id="myDropdown" class="dropdown-content">
          <input
            type="text"
            placeholder="Search.."
            id="myInput"
            onkeyup="filterFunction()"
          />
          <a href="#about">About</a>
          <a href="#base">Base</a>
          <a href="#blog">Blog</a>
          <a href="#contact">Contact</a>
          <a href="#custom">Custom</a>
          <a href="#support">Support</a>
          <a href="#tools">Tools</a>
        </div>
      </div>
    </div>
    <div>
      <select name="cars" id="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </div>
    <div>
      <select name="cars" id="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </div>
    <div>
      <img src="https://picsum.photos/300/200?random=4" />
    </div>
    <div>
      <img src="https://picsum.photos/300/200?random=5" />
    </div>
    <div>
      <img src="https://picsum.photos/300/200?random=6" />
    </div>
  </div>
</div>

相关问题