Как сделать модальную прокрутку полосы прокрутки, не нажимая ни разу на этот модал раньше? - PullRequest
Новая
       11

Как сделать модальную прокрутку полосы прокрутки, не нажимая ни разу на этот модал раньше?

0 голосов
/ 27 мая 2019

Здравствуйте, братья и заранее спасибо:

  • У меня есть страница индекса с полосой прокрутки // index.html
  • У меня есть скрытый модал на этой странице индекса с идентификатором:#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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...