【问题标题】:Vertical Scroll on <div> Not Working When <div> overflow-x: hidden Is Given On Touch Phone<div> 上的垂直滚动不起作用时 <div> overflow-x: hidden 是在触摸电话上给出的
【发布时间】:2021-03-15 17:57:16
【问题描述】:

当我将overflow: hidden 分配给&lt;div&gt; 并垂直滑动手指进行滚动时,它不会在UC 浏览器和Android 默认浏览器中的触摸设备上滚动。

我们可以通过 JavaScript 解决这个问题吗?

编辑

我不想在&lt;div&gt; 内滚动。我想在文档中垂直滚动。但是,当&lt;div&gt; 中有水平滚动条,并且我尝试垂直滚动时,文档不会垂直滚动。

如何解决这个问题?

【问题讨论】:

    标签: css html dom scroll


    【解决方案1】:

    这很正常,overflow: hidden 正是这样做的:告诉浏览器不要显示溢出元素的内容,也不要让内容滚动。

    如果您希望您的内容不会溢出元素,但能够滚动,请执行以下操作:

    overflow: auto;
    

    overflow: scroll;
    

    区别? auto 将在需要时显示滚动条(当内容比容器更宽或更高时),而scroll 将显示滚动条始终。当然,在触控设备中没有区别。

    如果你想要的是垂直滚动而不是水平滚动,你可以使用特定的属性:

    overflow-x: hidden;  /*don't scroll, nor show the overflow content horizontally*/
    overflow-y: auto;    /*allow scrolling vertically when needed */
    

    【讨论】:

    • 那么我们需要更多的标记和 CSS。理想情况下,一个 jsfiddle
    猜你喜欢
    • 2013-09-17
    • 1970-01-01
    • 1970-01-01
    • 2018-02-03
    • 2011-06-29
    • 1970-01-01
    • 2022-01-05
    • 1970-01-01
    • 2016-06-26
    相关资源
    最近更新 更多