CSS JS(也许) Div滚动条的显示和隐藏

发布于 2024-12-07 10:22:42 字数 735 浏览 2 评论 0原文

我有一个自动完成搜索，我希望占据屏幕的 40%，然后滚动其余部分。

我的那部分工作正常，我的问题是滚动条总是显示，无论是否有溢出。如果仅返回 2 个结果，我希望隐藏垂直滚动。然后如果有 50 则显示。

这是我所拥有的：

HTML:

<div id="AccountSearchResultsContainer">
<div id="AccountSearchResults">

</div>
</div>

CSS:

#AccountSearchResults {
border: 2px solid #666;
margin: 0px auto;
width: 100%;
display: none;
}

#AccountSearchResultsContainer {
border-bottom: 2px solid #666;
margin: 0px auto;
width: 54%;
height: 40%;
overflow: scroll;
overflow-x: hidden;
display: none;
padding-right: 4px;
}

我是否必须编写一个脚本来确定屏幕高度 AccountSearchResultContainer 以及 AccountSearchResult 的高度...如果 ASR > ？ ASRC 然后显示滚动条或者有没有办法用 CSS 实现这一点？

原文

I have an autocomplete search that I want to be 40% of the screen then scroll the rest.

I have that part working fine, my problem is the scroll bar always shows, regardless if there is overflow. I want the vertical scroll to be hidden if there are only, say, 2 results returned. Then if there are 50 it shows.

Here is what I have:

HTML:

<div id="AccountSearchResultsContainer">
<div id="AccountSearchResults">

</div>
</div>

CSS:

#AccountSearchResults {
border: 2px solid #666;
margin: 0px auto;
width: 100%;
display: none;
}

#AccountSearchResultsContainer {
border-bottom: 2px solid #666;
margin: 0px auto;
width: 54%;
height: 40%;
overflow: scroll;
overflow-x: hidden;
display: none;
padding-right: 4px;
}

Will I have to write a script to determine the screen height AccountSearchResultContainer, and the height of AccountSearchResult...if ASR > ASRC then show scroll bar or is there a way to achieve this with CSS?

分享到QQ

分享到微博