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

Posted 2023-03-06

【中文标题】仅适用于下拉按钮的水平滚动

【英文标题】：Horizontal Scroll only for Dropdown Buttons

【发布时间】：2019-03-05 01:29:15

【问题描述】：

要求：

只有按钮应该是

水平的

可滚动的 按钮下拉菜单应该就位，即正常的按钮下方 按钮的下拉菜单不应移动下面的段落，而应仅位于段落的顶部

我尝试过的事情：

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】：

真的很难解释问题是什么，但这是由于overflow-x:auto，它也影响overflow-y（我不确定为什么）阻止绝对定位的元素出现在元素之外。

我所做的是创建一个额外的包装器并制作相对于它的下拉列表。包装器具有默认的 overflow:visible 属性，因此 .dropdown-menu 可以出现在元素之外。

但这意味着.dropdown-menu 的位置不再与.dropdown 包装器相关，因此它们始终出现在相同的位置。

我必须编写一些 jQuery 来弥补这一点，并在激活 .outer 元素水平滚动时进行补偿。

我还使用overflow:hidden; 在所有内容周围添加了一个额外的包装器元素，因此当下拉菜单滚动到.outer 包装器之外时，它们会被裁剪掉。

// 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>

【讨论】：

哇，真是太好了。非常感谢。