Question

您好兄弟，谢谢您：

我有一个索引页，其中有一个滚动条// index.html
我在此索引页面中有一个隐藏的模态，其ID为：#modal // //我使用w3.css框架和j查询在文档准备就绪时显示隐藏的模态。
当模式显示时，它的左侧有一个滚动条。
所以现在我有2个滚动条；索引的滚动条在右侧，模态的另一个滚动条在左侧。
我想做什么！当我的模式显示时，当用户滚动到底部时，滚动条模式将不滚动索引的滚动条。
在我的情况下，如果用户想滚动到底部；他必须在模式上的任何位置单击一次，之后才能滚动。

我想要模态显示吗？用户可以滚动滚动条模式，而无需先在模式上单击一次。

<!DOCTYPE HTML>

<html>

<head>

    <!-- w3.css CDN -->
    <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/w3css/4/w3.css">

</head>

<body dir="rtl">
 <div class="w3-padding w3-content"  style="max-width:800px">
    <p>Lorem ipsum dolor sit amet, meis argumentum mea in, dico dolor id nam. Errem albucius imperdiet ius id, ex pro summo theophrastus. Cu eam dicam lobortis tincidunt. Elit labore denique id mea, dolores accusamus id ius. Omnis impedit inimicus ad nec, ex vix homero nonumes apeirian. Sea melius sanctus neglegentur no, elaboraret adversarium pro eu.</p>
    <p>Lorem ipsum dolor sit amet, meis argumentum mea in, dico dolor id nam. Errem albucius imperdiet ius id, ex pro summo theophrastus. Cu eam dicam lobortis tincidunt. Elit labore denique id mea, dolores accusamus id ius. Omnis impedit inimicus ad nec, ex vix homero nonumes apeirian. Sea melius sanctus neglegentur no, elaboraret adversarium pro eu.</p>
    <p>Lorem ipsum dolor sit amet, meis argumentum mea in, dico dolor id nam. Errem albucius imperdiet ius id, ex pro summo theophrastus. Cu eam dicam lobortis tincidunt. Elit labore denique id mea, dolores accusamus id ius. Omnis impedit inimicus ad nec, ex vix homero nonumes apeirian. Sea melius sanctus neglegentur no, elaboraret adversarium pro eu.</p>
    <p>Lorem ipsum dolor sit amet, meis argumentum mea in, dico dolor id nam. Errem albucius imperdiet ius id, ex pro summo theophrastus. Cu eam dicam lobortis tincidunt. Elit labore denique id mea, dolores accusamus id ius. Omnis impedit inimicus ad nec, ex vix homero nonumes apeirian. Sea melius sanctus neglegentur no, elaboraret adversarium pro eu.</p>
    <p>Lorem ipsum dolor sit amet, meis argumentum mea in, dico dolor id nam. Errem albucius imperdiet ius id, ex pro summo theophrastus. Cu eam dicam lobortis tincidunt. Elit labore denique id mea, dolores accusamus id ius. Omnis impedit inimicus ad nec, ex vix homero nonumes apeirian. Sea melius sanctus neglegentur no, elaboraret adversarium pro eu.</p>
    <p>Lorem ipsum dolor sit amet, meis argumentum mea in, dico dolor id nam. Errem albucius imperdiet ius id, ex pro summo theophrastus. Cu eam dicam lobortis tincidunt. Elit labore denique id mea, dolores accusamus id ius. Omnis impedit inimicus ad nec, ex vix homero nonumes apeirian. Sea melius sanctus neglegentur no, elaboraret adversarium pro eu.</p>
</div>

<div id="modal" class="w3-modal">

    <div class="w3-modal-content w3-padding"  style="max-width:800px">
        <p>Lorem ipsum dolor sit amet, meis argumentum mea in, dico dolor id nam. Errem albucius imperdiet ius id, ex pro summo theophrastus. Cu eam dicam lobortis tincidunt. Elit labore denique id mea, dolores accusamus id ius. Omnis impedit inimicus ad nec, ex vix homero nonumes apeirian. Sea melius sanctus neglegentur no, elaboraret adversarium pro eu.</p>
        <p>Lorem ipsum dolor sit amet, meis argumentum mea in, dico dolor id nam. Errem albucius imperdiet ius id, ex pro summo theophrastus. Cu eam dicam lobortis tincidunt. Elit labore denique id mea, dolores accusamus id ius. Omnis impedit inimicus ad nec, ex vix homero nonumes apeirian. Sea melius sanctus neglegentur no, elaboraret adversarium pro eu.</p>
        <p>Lorem ipsum dolor sit amet, meis argumentum mea in, dico dolor id nam. Errem albucius imperdiet ius id, ex pro summo theophrastus. Cu eam dicam lobortis tincidunt. Elit labore denique id mea, dolores accusamus id ius. Omnis impedit inimicus ad nec, ex vix homero nonumes apeirian. Sea melius sanctus neglegentur no, elaboraret adversarium pro eu.</p>
        <p>Lorem ipsum dolor sit amet, meis argumentum mea in, dico dolor id nam. Errem albucius imperdiet ius id, ex pro summo theophrastus. Cu eam dicam lobortis tincidunt. Elit labore denique id mea, dolores accusamus id ius. Omnis impedit inimicus ad nec, ex vix homero nonumes apeirian. Sea melius sanctus neglegentur no, elaboraret adversarium pro eu.</p>
        <p>Lorem ipsum dolor sit amet, meis argumentum mea in, dico dolor id nam. Errem albucius imperdiet ius id, ex pro summo theophrastus. Cu eam dicam lobortis tincidunt. Elit labore denique id mea, dolores accusamus id ius. Omnis impedit inimicus ad nec, ex vix homero nonumes apeirian. Sea melius sanctus neglegentur no, elaboraret adversarium pro eu.</p>
        <p>Lorem ipsum dolor sit amet, meis argumentum mea in, dico dolor id nam. Errem albucius imperdiet ius id, ex pro summo theophrastus. Cu eam dicam lobortis tincidunt. Elit labore denique id mea, dolores accusamus id ius. Omnis impedit inimicus ad nec, ex vix homero nonumes apeirian. Sea melius sanctus neglegentur no, elaboraret adversarium pro eu.</p>
   </div>

</div>

<!-- jQuery CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
<script>
$(document).ready(function()
{
   $('#modal').show();
});
</script>
</html>

如何使滚动条模式滚动而不在此模式上单击一次？

0 个答案: