草庐IT

Overflow-y

全部标签

html - 使用 Overflow-y :scroll 将 child 拖出容器

我有一个容器,里面有一个列表。可以拖动列表项,用鼠标移动。容器可滚动:overflow-y:scroll;通过设置此属性,Chrome会自动将overflow-x属性设置为“auto”。如果我设置overflow-x:visible它会被Chrome忽略。如果我设置overflow-x:hidden那么显然该元素被裁剪了。当我将列表项拖到容器的左边缘或上边缘之外时,它会被裁剪到容器的边缘。如果我将它拖出右侧或底部边缘,容器会滚动以容纳它。我希望该元素能够在不被裁剪且不触发滚动的情况下拖出容器。鉴于必须将容器设置为overflow-y:scroll并且这反过来会强制Chrome设置ove

html - 显示 :inline-block and overflow:hidden leading to different vertical alignment

以下代码在不同浏览器中呈现不同(IE=FF=高于基线,Chrome=在基线上)。这是谁的错?我应该在哪里提交错误报告?你知道如何解决这个跨浏览器的问题吗?如果我更改垂直对齐方式,它会在某些浏览器中运行,但在其他浏览器中无法运行。.a{display:inline-block;overflow:hidden;color:red;}baseline__test__baselinehttp://jsfiddle.net/T2vQj/ 最佳答案 是的。你需要做这些:移除样式overflow:hidden;。这里不需要。仅当您提供width或

javascript - 通过在带有 overflow-x :hidden 的元素中单击鼠标滚轮来禁用水平滚动

如何通过单击鼠标滚轮确定水平滚动的可能性,并在带有overflow-x:hidden的元素中禁用它(使用JavaScript或jQuery)?滚动在Firefox中是不可能的,但在IE、Chrome和Safari中是可能的。代码示例:...截图: 最佳答案 完全有可能,但不是最佳实践(不过我认为您有充分的理由想要这样做):$('#yourDivId').on('scroll',function(){$('#container').scrollLeft(0);});​参见http://jsfiddle.net/q5CTS/3/一个工作

javascript - CSS "overflow-x:hidden"与浏览器冲突 Ctrl+F 水平移出屏幕文字高亮

CSS冲突html{overflow-x:hidden;}与Web浏览器命令Ctrl+Forfind()orkeywordsearch问题:网站是水平滚动设计,跳到上一个(左)或下一个(右)到预定的宽度/步长/部分,没有可见的水平滚动条。document.onkeydown=function(evt){evt=evt||window.event;switch(evt.keyCode){case37:leftArrowPressed();window.location.href='#one';break;case39:rightArrowPressed();window.location

html - overflow hidden ,但仍然可以滚动(仅限 Chrome)

我有一个非常奇怪的CSS“错误”。我目前正在研究slider(幻灯片上有表单元素)。当我在幻灯片中的标签上单击并拖动(向右水平滚动)时,容器滚动并且下一张幻灯片可见,而属性overflow:hidden;设置在容器上。我发现当没有label标签时,overflow属性工作正常。有人对此有解决方案吗?我尝试了很多CSS的东西但没有成功。我在这里重新创建了JsFiddle中的错误:clicky更新点击和拖动错误仅出现在Chrome中。(我测试了IE和FF)另外,不是关于带有标签的ul列表的滚动条,而是关于你可以点击一个标签并将其拖动到右侧以滚动到下一张幻灯片。

html - 为什么 overflow hidden 会影响高度,在此示例中我该如何解决?

fiddle:https://jsfiddle.net/wa51kdh7/代码:HTML:HelloWorldGoodbyecruelworldCSS:span{display:inline-block;margin:0;padding:0;line-height:16px;font-size:16px;height:16px;}.span1{background-color:lightblue;}.span2{background-color:pink;overflow:hidden;width:130px;text-overflow:ellipsis;}在这里,我试图创建两个彼此相

html - 在 HTML 中 overflow hidden 文本的中间

是否有可能overflowhidden文本的中间而不是结尾?例如用句点替换溢出的文本。我现在专门在表格中谈论,但最好知道任何可能的方式。所以我的意思是将112233445566778899缩短为112...899(或类似的东西)而不是11223344我对JavaScript了解不多,但如果这是唯一的方法,请告诉我如何操作,我会通过教程解决其余问题。 最佳答案 我提出了一个纯JavaScript解决方案,它结合了NickR's和alhoseany's一起回答,同时添加一些额外的功能来检测长度并指定省略号两侧所需的字符数。使用此方法,您

html - 设置 overflow-y 也会导致 overflow-x 发生变化

这个问题在这里已经有了答案:CSSoverflow-x:visible;andoverflow-y:hidden;causingscrollbarissue(9个回答)关闭6年前。当我在block上设置overflow-y时,它似乎影响了overflow-x属性。我做了一个JSFiddlewithanexampleofthisproblem.它似乎在所有浏览器中都在发生,所以我想我遗漏了一些显而易见的东西。我有两个不重叠的block(蓝色和绿色)以及第三个block(红色),具有以下要求:蓝色和红色block相邻红色block包含在蓝色block中,但与绿色block重叠蓝色block

html - CSS: make overflow-x: hidden 真的隐藏了吗?

我有一个使用overflow-x:hidden设置样式的div,但我发现当其中包含文本的更宽的div时,用户仍然可以使用鼠标查看隐藏文本。我想阻止这种情况并使文本真正隐藏起来。这个jsfiddle应该显示我的意思:http://jsfiddle.net/YzsGF/11/或者这里是代码:HowcanItrulyhidethetextbeyondthemargin?#outer{width:150px;height:300px;overflow-x:hidden;border:1pxsolidblack;}#inner{width:300px;overflow-x:hidden;}有什么

html - 使用 Flexbox 和 Overflow 使元素居中

问题总结我想要的布局是能够在页面上将未知大小的图像居中(垂直和水平)。如果图像太大而不适合任何一个方向,我想显示滚动条以便用户可以滚动查看完整图像。我遇到的问题是,当图像太大而放不下时,图像的顶部和左侧(取决于被截掉的部分)将永远无法滚动到。尝试的解决方案我正在尝试使用flexbox来实现所需的布局,但flexbox不是必需的。这是一个重现问题的小示例(请注意,我没有在CSS中放置任何浏览器前缀,因此您需要在Chrome[或者Firefox,也可以?]中查看它):.body{height:600px;}.container{margin:auto;display:flex;align-