如何在modal中禁用modal滚动条和启用自定义div上的滚动条

在modal中禁用modal滚动条和启用自定义div上的滚动条，可以通过以下步骤实现：

1. 禁用modal滚动条：
   • 在modal的CSS样式中，添加overflow: hidden;属性，可以禁止滚动条的出现。
   • 另外，也可以使用JavaScript在modal打开时，动态添加一个class，该class设置overflow: hidden;样式来禁用滚动条。

• 启用自定义div上的滚动条：
  • 在自定义div的CSS样式中，添加overflow: auto;属性，可以启用滚动条。
  • 如果需要自定义滚动条的样式，可以使用CSS库或插件，例如PerfectScrollbar、SimpleBar等。

以下是一个示例代码，演示如何在modal中禁用modal滚动条并启用自定义div上的滚动条：

HTML结构：

<div class="modal">
  <div class="modal-content">
    <div class="custom-scrollbar">
      <!-- 自定义div内容 -->
    </div>
  </div>
</div>

CSS样式：

.modal {
  /* modal样式 */
  overflow: hidden; /* 禁用滚动条 */
}

.custom-scrollbar {
  /* 自定义div样式 */
  overflow: auto; /* 启用滚动条 */
}

JavaScript代码：

// 当modal打开时，动态添加class以禁用滚动条
function openModal() {
  document.querySelector('.modal').classList.add('modal-open');
}

// 当modal关闭时，移除class以启用滚动条
function closeModal() {
  document.querySelector('.modal').classList.remove('modal-open');
}

通过上述代码，可以实现在modal中禁用modal滚动条并启用自定义div上的滚动条。请注意，以上代码只是示例，实际使用时需要根据具体情况进行适当修改。

腾讯云相关产品推荐：

• 如果需要在modal中添加滚动条，可使用腾讯云提供的云服务器CVM来部署网站和应用。详情请参考腾讯云云服务器CVM。
• 如果需要存储和管理大量数据，可使用腾讯云提供的云数据库MySQL来存储和查询数据。详情请参考腾讯云云数据库MySQL。
• 如果需要进行人工智能相关的开发和应用，可使用腾讯云提供的人工智能平台AI Lab来训练和部署模型。详情请参考腾讯云人工智能AI Lab。