代码之家 › 专栏 › 技术社区 › Dhaval Jardosh

水平滚动仅适用于下拉按钮

drop-down-menu twitter-bootstrap-3 css3 css

Dhaval Jardosh · 技术社区 · 7 年前

只有按钮应该是横向可滚动
下拉按钮不应移动下面的段落,而应仅位于段落的顶部

我尝试过的事情:

overflow:hidden/auto
overflow-x:auto

position:static

.outer {
  border: 2px solid red;
  width: 70%;
  margin: auto;
  display: flex;
  overflow: auto;
  height: max-content;
  margin-top: 10vh;
}

.side {
  margin-right: 10px;
}

.dropdown-menu {
  position: static !important;
}

.para {
  width: 80%;
  margin: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="outer">
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>

</div>
<div class="para">
  <p>
    The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button
    is a dropdown. Add the .dropdown-menu class to a
    <ul> element to actually build the dropdown menu.
  </p>
</div>

1 回复 | 直到 7 年前

WizardCoder 7 年前

很难解释问题是什么,但这是由于 overflow-x:auto ,这也会影响 overflow-y (我不知道为什么)阻止绝对定位元素出现在元素外部。

我所做的是创建一个额外的包装,并使下拉列表相对于它。包装器具有默认值overflow:visible property 所以 .dropdown-menu 可以出现在元素外部。

然而,这意味着 .下拉菜单 不再是相对于 .dropdown

我不得不写一些jQuery来补偿这一点,以及补偿 .outer

我还添加了一个额外的包装器元素 overflow:hidden; 所以当下拉列表被滚动到 .外部 包装器。

// Detect dropdown event
$(".dropdown").on("show.bs.dropdown", function(event){
  // get offset position of selected button and subtract scroll .outer scroll position
  var buttonPos = parseInt(event.currentTarget.offsetLeft) - parseInt($(".outer").scrollLeft());
  // Apply button position to dropdown
  $(this).find(".dropdown-menu").css("left", buttonPos);
  // Store buttons offset position to be used to calculate the dropdowns position when .outer is scrolled
  $(this).find(".dropdown-menu").attr("data-leftPos", event.currentTarget.offsetLeft);
});
// Detect when .outer is scrolled
$(".outer").on("scroll", function() {
  var activeDropdown = $('.dropdown.open').find('.dropdown-menu');
  // subtract scroll position from buttons offset position
  var pos = parseInt(activeDropdown.attr('data-leftPos')) - parseInt($(this).scrollLeft());
  // appply updated position to dropdown
  activeDropdown.css("left", pos);
});

html, body {
 height:100%;
}
.wrapper {
  /*  remove overflow-x if you want the dropdowns to appear outside of the .outer element */
  overflow-x:hidden;
  width: 70%;
  margin: 0 auto;
  min-height: 100%;
  padding-top:10vh;
}
.external-dropdown {
  position: relative;
}
.external-dropdown .dropdown, .external-dropdown .dropup {
  position: static;
}
.outer {
  border: 2px solid red;
  display: flex;
  overflow-x: auto;
}
.side {
  margin-right: 10px;
}
.para {
  width: 80%;
  margin: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="wrapper">
  <div class="external-dropdown">
    <div class="outer">
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="para">
    <p>
      The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button
      is a dropdown. Add the .dropdown-menu class to a
    </p>
  </div>

</div>