CSS: make overflow-x: hidden truly hidden?

后端未结

关注

 5  1651

I have a div that is styled with overflow-x: hidden, but I\'m finding that when there is a wider div inside it that contains text, the user can still drag sidew

相关标签:

5条回答

忘掉有多难

2020-12-20 13:33
You could use the CSS clip property. This will clip your text as desired by not showing anything beyond the clipping rectangle, and it will also stop the user from scrolling across.
```
#inner { 
position:absolute;
clip:rect(0px,150px,150px,0px);
width: 300px;
}
```
Example:

http://jsfiddle.net/DigitalBiscuits/YzsGF/18/

Note: you need to specify an absolute positioning for this the clip property to work it seems.

More Info Here: http://www.w3schools.com/cssref/pr_pos_clip.asp
0 讨论(0)
发布评论:

提交评论
- 加载中...
情歌与酒

2020-12-20 13:40

overflow-x: hidden, unlike overflow: hidden does not disable scrolling. It just causes the content to be clipped and to hide the scrollbar. The element itself is still scrollable via javascript or, as you've found out in some selection scenarios where the element auto-scrolls.

There is no non-javascript solution, and javascript is still messy because onscroll doesn't fire if the scrollbar is not visible (that is, the onscroll event is tied to the scrollbar changing position, not the actual scrolling of the element).

There are various workarounds. Andrew Dunn's solution of placing overflow:hidden on a wrapper, and setting the wrapper to the width of your container is one. But that just works around the problem, doesn't fix the actual problem. But if you're ok with that, then it's probably a good choice. Bear in mind that you need to apply this technique to all items within the container, or you can end up with the same problem.

0 讨论(0)
发布评论:

提交评论
- 加载中...
我在风中等你

2020-12-20 13:41

The simplest answer that works for me is to add the CSS style position: fixed; to the <body> tag.

0 讨论(0)
发布评论:

提交评论
- 加载中...
暗喜

2020-12-20 13:47
I'm not sure if you need the y-axis of the inner div to be scrollable, but if you don't then this should suit your needs:
```
#outer { 
    width: 150px; 
    height: 300px;
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    overflow: hidden;
    width: 100%;
}
```
It appears as though overflow and overflow-x behave differently from each other. http://jsfiddle.net/G3T9w/5/
0 讨论(0)
发布评论:

提交评论
- 加载中...
抹茶落季

2020-12-20 13:53
Presuming the simplified HTML code is:
```
<html><body><div class=wrap>content...</div></body></html>
```
Set both body, html to height:100%;
```
body, html {height:100%;}
```
Put a div inside body, and set it to stretch across all the body height:
```
div.wrap {height:100%; overflow:hidden;}
```
This will prevent window from scrolling in weird ways, like, pressing mouse wheel and moving it, using anchors, etc.

To remove the scroll bar itself (visually), you should also add:
```
body {overflow: hidden; }
```
To disable scrolling via pressing arrow keys on keyboard:
```
window.addEventListener("keydown", function(e) {
    // space, page up, page down and arrow keys:
    if([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

CSS: make overflow-x: hidden truly hidden?

Example: