div--可滚动但不显示滚动条

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>可滚动但不显示滚动条的div</title>
  </head>
  <script>
    function getData() {
      let arr = [];
      for (let i = 0; i < 10; i++) {
        let string = "";
        let j = i;
        while (j >= 0) {
          string += i;
          console.log("string", string);
          j--;
        }
        arr.push(string);
      }
      arr.forEach((item) => {
        let node = document.createElement("LI");
        let textnode = document.createTextNode(item);
        node.appendChild(textnode);
        document.getElementById("showList").appendChild(node);
      });

      arr.forEach((item) => {
        let
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-popover不显示滚动条的问题可能是由于样式设置不正确导致的。根据引用\[2\]中的描述,el-popover中含有滚动事件,触发滚动事件的同时,底部页面也同时触发。为了解决这个问题,可以在el-popover中添加一个滚动容器,并设置其高度和overflow属性来显示滚动条。 首先,你可以在el-popover的内容中添加一个div作为滚动容器,并设置其高度和overflow属性,例如: ```html <el-popover> <div class="scroll-container" style="height: 200px; overflow: auto;"> <!-- 内容 --> </div> </el-popover> ``` 然后,你可以在样式中为滚动容器添加样式,例如: ```css .scroll-container { /* 样式设置 */ } ``` 这样,滚动容器就会显示滚动条了。如果你想要在el-popover关闭时恢复底部页面的滚动,可以在el-popover的@hide事件中调用恢复滚动的方法,例如: ```html <el-popover @hide="this.canScroll()"> <!-- 内容 --> </el-popover> ``` 通过以上的设置,el-popover应该可以正确显示滚动条了。如果还有其他问题,请参考引用\[1\]和引用\[3\]中的解决方法。 #### 引用[.reference_title] - *1* [【bug】el-popover样式问题引起页面双滚动条,单独页面设置body样式](https://blog.csdn.net/weixin_49668076/article/details/128575880)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Vue+ElementUI使用el-popover内滚动事件穿透解决](https://blog.csdn.net/qq_40836414/article/details/112697273)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [el-popover 初始弹出位置不准确,及el-popover超出屏幕问题](https://blog.csdn.net/weixin_37739550/article/details/125757697)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值