关于#javascript#的问题：el-select 滚动条怎么一直显示

Question

关于#javascript#的问题：el-select 滚动条怎么一直显示? 源码里在鼠标移出option下拉框的时候 将scroll的display设置为none了

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

针对 el-select 滚动条一直显示的问题，可以考虑以下解决方案：

1. 修改 el-select 的内置样式。在样式文件中，可以对 el-select 内置样式进行覆盖修改。具体可参考 Element UI 官方文档中的 Select 组件样式定制部分。

2. 利用 JavaScript 控制滚动条的显示。可以通过监听 el-select 的鼠标滚动事件，动态添加/删除滚动条的样式，从而实现滚动条一直显示的效果。具体实现可参考以下代码示例：

// 获取 el-select 元素
var selectElement = document.querySelector('.el-select');

// 监听 el-select 的鼠标滚动事件
selectElement.addEventListener('wheel', function() {
  // 获取滚动条元素
  var scrollbar = selectElement.querySelector('.el-select__tags-text');
  
  // 显示滚动条
  scrollbar.style.display = 'block';
  
  // 设置一个定时器，延迟一定时间后隐藏滚动条
  setTimeout(function() {
    scrollbar.style.display = 'none';
  }, 2000);
});

1. 利用 CSS 控制滚动条的显示。可以对 el-select 的内置样式进行修改，从而实现滚动条一直显示的效果。具体思路是：将滚动条样式的 display 属性设置为 always，使其一直显示。具体实现可参考以下代码：

/* 自定义 el-select 的样式 */
.el-select__tags-text {
   /* 将滚动条的 display 属性设置为 always */
   display: -webkit-box!important;
   display: -ms-flexbox!important;
   display: flex!important;
}

综上所述，针对 el-select 滚动条一直显示的问题，可以通过修改内置样式或利用 JavaScript/CSS 控制滚动条的显示来解决。