滚动垂直溢出，同时仍允许水平溢出 [英] Scrolling vertical overflow while still allowing horizontal overflow
本文介绍了滚动垂直溢出，同时仍允许水平溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图隐藏垂直溢出，同时允许水平溢出下拉列表，以便可以选择子类别。我尝试过使用 overflow-y：scroll; 和 overflow-x：visible ，但这仍然会导致溢出滚动的一面。
I'm trying to hide the vertical overflow while allowing the horizontal overflow with a dropdown, so that subcategories can be selected. I've tried using overflow-y: scroll; and overflow-x: visible, but that still causes overflow to the side to scroll.
如何滚动垂直溢出，并允许水平溢出？
How can I scroll for the vertical overflow, and allow the horizontal overflow?
JSFiddle： https://jsfiddle.net/utqz406p/8/
JSFiddle: https://jsfiddle.net/utqz406p/8/
Snippet：
$('.ui.dropdown')
.dropdown({});
.ui.selection.dropdown.show .menu {
overflow: visible !important;
}
<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<div class="ui search selection dropdown show" id="test">
<span class="text">Search Selection</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">Category 1</span>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 2</span>
<div class="menu">
<div class="item">Item 2A</div>
<div class="item">Item 2B</div>
<div class="item">Item 2C</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 3</span>
<div class="menu">
<div class="item">Item 3A</div>
<div class="item">Item 3B</div>
<div class="item">Item 3C</div>
</div>
</div>
<div class="item">
<span class="text">Category 4</span>
</div>
<div class="item">
<span class="text">Category 5</span>
</div>
<div class="item">
<span class="text">Category 6</span>
</div>
<div class="item">
<span class="text">Category 7</span>
</div>
<div class="item">
<span class="text">Category 8</span>
</div>
<div class="item">
<span class="text">Category 9</span>
</div>
<div class="item">
<span class="text">Category 10</span>
</div>
</div>
</div>
<div class="ui selection dropdown show" id="test2">
<span class="text">Selection Visible</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">Category 1</span>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 2</span>
<div class="menu">
<div class="item">Item 2A</div>
<div class="item">Item 2B</div>
<div class="item">Item 2C</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 3</span>
<div class="menu">
<div class="item">Item 3A</div>
<div class="item">Item 3B</div>
<div class="item">Item 3C</div>
</div>
</div>
<div class="item">
<span class="text">Category 4</span>
</div>
<div class="item">
<span class="text">Category 5</span>
</div>
<div class="item">
<span class="text">Category 6</span>
</div>
<div class="item">
<span class="text">Category 7</span>
</div>
<div class="item">
<span class="text">Category 8</span>
</div>
<div class="item">
<span class="text">Category 9</span>
</div>
<div class="item">
<span class="text">Category 10</span>
</div>
</div>
</div>
<div class="ui selection dropdown" id="test4">
<span class="text">Selection Hidden</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">Category 1</span>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 2</span>
<div class="menu">
<div class="item">Item 2A</div>
<div class="item">Item 2B</div>
<div class="item">Item 2C</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 3</span>
<div class="menu">
<div class="item">Item 3A</div>
<div class="item">Item 3B</div>
<div class="item">Item 3C</div>
</div>
</div>
<div class="item">
<span class="text">Category 4</span>
</div>
<div class="item">
<span class="text">Category 5</span>
</div>
<div class="item">
<span class="text">Category 6</span>
</div>
<div class="item">
<span class="text">Category 7</span>
</div>
<div class="item">
<span class="text">Category 8</span>
</div>
<div class="item">
<span class="text">Category 9</span>
</div>
<div class="item">
<span class="text">Category 10</span>
</div>
</div>
</div>
<div class="ui dropdown" id="test3">
<span class="text">Choose Category</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">Category 1</span>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 2</span>
<div class="menu">
<div class="item">Item 2A</div>
<div class="item">Item 2B</div>
<div class="item">Item 2C</div>
</div>
</div>
<div class="item">
<i class="dropdown icon"></i>
<span class="text">Category 3</span>
<div class="menu">
<div class="item">Item 3A</div>
<div class="item">Item 3B</div>
<div class="item">Item 3C</div>
</div>
</div>
<div class="item">
<span class="text">Category 4</span>
</div>
<div class="item">
<span class="text">Category 5</span>
</div>
<div class="item">
<span class="text">Category 6</span>
</div>
<div class="item">
<span class="text">Category 7</span>
</div>
<div class="item">
<span class="text">Category 8</span>
</div>
<div class="item">
<span class="text">Category 9</span>
</div>
<div class="item">
<span class="text">Category 10</span>
</div>
</div>
</div>
推荐答案
由于默认语义样式和结构不允许您这样做，因此需要在菜单项中添加div并向该div添加滚动。
Since default semantic style and structure is not allowing you to do so, you need to add a div into menu item and add scroll to that div.
您还可以尝试添加
.ui.selection.dropdown .menu {
overflow: visible!important;
max-height: none;
}
这将在选择下拉菜单中为您提供确切的.ui。dropdown样式。这是处理语义选择下拉列表的最佳方式，而不是在没有必要的情况下添加滚动条。
which will give you the exact style of .ui .dropdown in selection dropdown. It is the best way to do with semantic selection dropdown rather than adding scroll bar if its not necessary.
这是 FIDDLE
这篇关于滚动垂直溢出，同时仍允许水平溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
