【问题标题】:Overflow issue on mobile device移动设备上的溢出问题
【发布时间】:2020-07-05 01:49:49
【问题描述】:

正如您从屏幕上看到的那样,我的页面部分存在问题,我声明该站点的所有其他有溢出的部分都运行良好。我已经尝试过多次查看代码,但我不知道它可以是什么......也将不起作用的部分的代码放在下面

<div class="messageDiv w-full h-full flex flex-col justify-start overflow-scroll relative text-xl lg:text-xs">
            <!--prototipo di messaggio-->

            <% for(var i=messages.length-1 ; i >= 0 ; i--){ %>
              <% if(messages[i].id_user == userId){ %>

              <div class="flex justify-end items-center">
                <div class="talk-bubble tri-right radius right-in bg-gray-900 text-white w-auto px-5 py-2 mb-2 lg:mb-1 mr-5">
                  <div class="talktext flex flex-col justify-center items-center">

                    <p class="text-left w-full"><%=messages[i].text%></p>
                    <div class="info-message flex justify-start items-center w-full pt-1 mt-1 overflow-hidden">
                      <p class="title text-rigth username"><%=messages[i].username%></p>
                      <i class="fas fa-circle text-white px-2"></i>
                      <i class="far fa-clock title"></i>
                      <p class="title ml-1"><%=messages[i].date.getHours()%>:<%=messages[i].date.getMinutes()%></p>
                    </div>

                  </div>
                </div>
              </div>

              <% } else{ %>
                <div class="flex justify-start items-center">
                  <div class="talk-bubble tri-left radius left-in bg-black text-white w-auto px-5 py-2 ml-5 mb-2 lg:mb-1">
                    <div class="talktext flex flex-col justify-center items-center">

                      <p class="text-left w-full"><%=messages[i].text%></p>
                      <div class="info-message flex justify-end items-center w-full pt-1 mt-1 overflow-hidden flex-no-wrap">
                        <p class="text-giallo text-rigth username"><%=messages[i].username%></p>
                        <i class="fas fa-circle text-white px-2"></i>
                        <i class="far fa-clock text-giallo"></i>
                        <p class="text-giallo ml-1"><%=messages[i].date.getHours()%>:<%=messages[i].date.getMinutes()%></p>
                      </div>

                    </div>
                  </div>
                </div>
              <% } %>
            <% } %>

            <!--end-->
          </div>

我使用 tailwind 作为 css 框架,你可以通过它来猜测 node.js 中的项目。 提前致谢。

【问题讨论】:

    标签: javascript html css tailwind-css


    【解决方案1】:
    For mobile devices use:-
    touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up|pan-down ] || pinch-zoom ] | manipulation
    

    这与溢出轴相同。

    【讨论】:

    • 感谢您在此期间的回复,但我应该把它放在哪里?
    • 把它放在一个你想要像这样滚动的容器中:- touch-action: pan-y;
    • 我试过了,还是不行。但这里的问题不在于触摸不起作用,元素不会溢出,这是不同的。好像每个人都应该进入div,因此显然重叠。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-11
    • 2015-05-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多