CODEWITHSUNDEEP
jqueryhtmlcssscrolloverflow
Riskbreaker
Riskbreaker

Reputation: 4791

overflow-x to avoid any horizontal scrolling in browser

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:

http://jsfiddle.net/Riskbreaker/y9wZz/

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

Upvotes: 0

Views: 2566

Answers (3)

user3539757
user3539757

Reputation: 1

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.

Upvotes: 0

Riskbreaker
Riskbreaker

Reputation: 4791

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

Upvotes: 1

Kevin Whatever
Kevin Whatever

Reputation: 184

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.

Upvotes: 0

Related Questions