相关疑难解决方法(0)
CSS overflow-x:visible; 溢出-y:隐藏; 导致滚动条问题
假设你有一些风格和标记:
ul
{
white-space: nowrap;
overflow-x: visible;
overflow-y: hidden;
/* added width so it would work in the snippet */
width: 100px;
}
li
{
display: inline-block;
}<div>
<ul>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
</ul>
</div>当你看到这个.该<ul>有一个在底部的滚动条,即使我已经溢出X/Y指定的可见和隐藏价值.
(在Chrome 11和opera(？)上观察到)
我猜测必须有一些w3c规范或者某些东西告诉这件事发生但是对于我的生活我无法理解为什么.
更新: -我找到了一种方法来通过添加另一个元素来实现相同的结果ul.看看这个.
推荐指数
解决办法
查看次数
使"scrollLeft"/"scrollTop"更改不会触发滚动事件侦听器
目前我的程序位于一个地方,它既可以监听用户滚动某个元素,也可以自动滚动这个元素.(不是一个渐进的,漂亮的卷轴,而是瞬间跳跃.我发誓在上下文中有道理.)
如果通过设置scrollLeft或scrollTop完成滚动,有没有办法使滚动事件不触发？我的第一个想法是一个基本的开关,如:
ignoreScrollEvents = true;
element.scrollLeft = x;
ignoreScrollEvents = false;
function onScroll() {
if(ignoreScrollEvents) return false;
}
但由于事件不会立即触发(oops,duhh),这不是一个可行的解决方案.我可以尝试其他什么样的答案？我也在使用jQuery,如果这有帮助的话.
推荐指数
解决办法
查看次数
溢出-x:隐藏; 不在Android设备上工作
我得出结论,这是一个仅限android的问题,是由我的导航菜单的工作方式引起的,并且我的想法已经用完了.菜单从左侧100%按下以隐藏菜单.然后我使用css过渡使菜单从右侧滑出到窗口的80%.切换菜单后,它会在菜单隐藏的右侧留下一个空旷的空白区域.我不能用display:none; 因为它会杀死动画.重要问题只有切换菜单后才会出现问题.
我试过了:
2014年2月6日更新
这是导航菜单css:
ul.subNav {
position: absolute;
top: 70px;
left: 100%;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
visibility: hidden;
width: 80%;
background: #f7f7f7;
border-left: 5px solid #00529f;
z-index: 100;
}
结束更新
这是css:
.wrapper {
max-width: 100%;
height: 100%;
background: #20aad7;
background: url("../images/bg.png"), -moz-linear-gradient(-45deg, #20aad7 0%, #54709f 31%, #64b491 65%, #047074 100%);
background: url("../images/bg.png"), -webkit-gradient(linear, left top, right bottom, color-stop(0%,#20aad7), color-stop(31%,#54709f), color-stop(65%,#64b491), …推荐指数
解决办法
查看次数
IE +溢出:隐藏
我不知道是一个问题还是bug,但是当我使用时overflow: hidden,选择文本并将光标移动到IE中的页面底部,页面滚动(我试过IE9-IE11)!当我使用Firefox/Opera/Chrome/Safari时,页面不会滚动...我必须使用overflow: hidden,但它在IE中有一个奇怪的行为.
所以,我的问题是:如何在IE中避免页面滚动？
css internet-explorer overflow internet-explorer-10 internet-explorer-11
推荐指数
解决办法
查看次数
overflow-x:hidden [CSS,HTML]时禁用鼠标滚动
问题:我的div的内容定位为'absolute',内容的宽度大于div.根据需要,使用"overflow-x:hidden"剪切"额外"内容.
虽然,如果我尝试使用鼠标滚动器水平滚动,内容将变得可见.
我怎么不让这件事发生？我使用JS或/和CSS解决方案很好
例如代码
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
谢谢 !
推荐指数
解决办法
查看次数
Framer Motion：动画导致网站扩展
我在网站大小方面经历过非常奇怪的行为。
- 在移动设备上，网站看起来比其内容（及其 html 和 body 元素）大
- 没有发生溢出（或者至少我没有发现）
- 当我将鼠标悬停在 React Developer Tools 扩展上时，它会自行更正，并且网站现在具有正确的大小（即屏幕的大小）
链接：
我已将该网站部署到 GitHub Pages - 该错误并没有消失。
该错误仅在以下情况下才会出现：
- 您无需将页面大小调整为移动设备大小。您必须以手机大小加载它。
- 您使用真实的移动设备或浏览器的移动设备模拟器。没有它它就不会出现。
请注意，使用移动设备模拟器中的“响应式”设备选项调整页面大小并刷新页面两到三次后，所有内容都会变得相当大且过大。但超大尺寸不会改变元素的大小，它们的大小仍然完美地适合窗口。它只是以某种方式扩大了规模。
移动设备模拟器关闭后，一切都会恢复正常。
也许这个规模问题是一个完全不同的问题。（将鼠标悬停在 React Devtools 上不会得到纠正）
也许您会怀疑这些背景圆形阴影，但我已经尝试将它们注释掉 - 没有任何改变。
此错误出现在 Chrome（Windows 版 Chrome：版本 92.0.4515.159/移动版：相同版本）和 MS Edge（版本 92.0.902.78）上。我没有测试过其他浏览器。
除了 React 之外，我还使用 Tailwind CSS、react-router 和 framer-motion。
推荐指数
解决办法
查看次数