overflow-x to avoid any horizontal scrolling in browser

Question

PROBLEM RESOLVED SO I have this issue that I cannot for the life figure out:

I made a dropdown to be shown on the whole page no matter what size and this seems to work:

The problem is if you force your mouse to the right it scrolls unwanted scrolling and obviously this is the root of all evil:

.dd {
    margin: 0 -1000em;
    padding: 0 1000em;
    position: absolute;
    top: 100%;
    visibility: hidden;
}

I tried this:

body {overflow-x: hidden;}

(Note I tried HTML overflow-x too).....of course it removes the scrollbar(horizontal) but thats not the issue....FF listens and does not scroll at all if you tried to force it BUT, the rest...Chrome/IE/Safari do scroll....Is there a solution to make this work?

This person had something similar but no answer here: overflow-x:hidden still can scroll

Lastly I tried this:

$(element).scroll(function () {
    this.scrollLeft = 0;
});

but didnt do anything.

SOLUTION I just needed to add this on html: html {overflow: hidden; overflow-y: auto;}...thanks all

@Blazemonger - where do you get that idea? Firefox has understood `overflow-x`/`overflow-y` for years... — Ben D, Feb 28 '13 at 16:04
@BenD Indeed you're right. Apparently I'm thinking of `background-position`. — Blazemonger, Feb 28 '13 at 16:06
I'm looking at your jsfiddle on Firefox, Chrome, and IE, and I don't see any scroll bars anywhere. Am I just misunderstanding? could you provide a screenshot? — Ben D, Feb 28 '13 at 16:12
AS i said no scrollbars show...but you can still scroll to right if you force it...thats what I want to prevent (thinking iPad) — Riskbreaker, Feb 28 '13 at 16:24

score 1 · Accepted Answer · answered Mar 05 '13 at 15:50

1

SOLUTION I just needed to add this on html: html {overflow: hidden; overflow-y: auto;}...thanks all

answered Mar 05 '13 at 15:50

Riskbreaker

4,621
1
23
31

score 0 · Answer 2 · answered Feb 28 '13 at 16:25

0

Change these settings...these extend way to the right of your sections/divs and body.

margin: 0 -1000em; padding: 0 1000em;

I changed it to -100px and 100px respectively and it still scrolled to the right slightly, but stopped.

answered Feb 28 '13 at 16:25

Kevin Whatever

184
7

I know 100px is too small for this particular set up, but it illustrates what is causing the problem. – Kevin Whatever Feb 28 '13 at 16:36
thanks but as I mentioned in my post....that IS what is causing this I need a way to make it work using this...Is there another way to get your dropdown menu 100% of full page? – Riskbreaker Feb 28 '13 at 16:46

score 0 · Answer 3 · edited Feb 08 '15 at 20:14

0

I have gone through all the other solutions but unfortunately none of them worked for me.

I have a easiest solution and that is a css rule

.nicescroll-rails-hr{display:none!important}

Hope it will help you too.

edited Feb 08 '15 at 20:14

Jawa

2,336
6
34
39

answered Feb 08 '15 at 19:35

user3539757

1
2

overflow-x to avoid any horizontal scrolling in browser

3 Answers3