1

I'm coding a website for my Dad's firm and I have a problem with unwanted horrizontal scrolling while selecting something on the webpage.

To illustrate the effect: http://alakthalion.pl/tem/krop62/ - try to select anything on the page and move the mouse far far to the right - the page will move and stop in unwanted place. :(

The effect is because I've got two sections of the website - left and right - so the virtual width of the site is twice the window size.

As long as the problem is only when somebody is selecting anything I would like to block scrolling while somebody is selececting something. Can I do such thing?

Please help!

Aleksander
  • 73
  • 9

2 Answers2

0

I've visited the website from Firefox and that effect didn't happen, but when I tried with Chrome it did.

But why is the #main section's width set to a 200% of the viewport's width? Making it the 100% would make the problem a bit smaller.

I think the best solution for this problem is to make the #main <section> occupy the 100% of the viewport (set it as the "background" section) and put the other sections above it. You could use padding to avoid your content to be hidden because of the other sections.

dieortin
  • 514
  • 5
  • 16
  • 1
    But if I will make the #main
    100% width of the viewport, how can I make two sections in it, both 100% width of the viewport and next to each other. The problem is, that I have to have one section hidden on the side. For instance try to navigate to the site 'Indywidualne' from the right menu ('Oferta').
     – Aleksander Feb 19 '14 at 19:32
  • @Aleksander maybe using `display: none;` with the hidden section, but then it would be difficult to display the sliding animation... Or maybe you could update the content of the same section (instead of using two different sections) I know, that two options would modify too much the actual page (that is so good in my opinion) but if you don't find other options and that rare effect is important for you... – dieortin Feb 19 '14 at 20:29
  • I think I will rearrange page basing it on this example -http://speckyboy.com/2011/10/12/how-to-build-a-sliding-one-page-portfolio-with-jquery/ The effect is the same, but it works ;) – Aleksander Feb 20 '14 at 13:30
  • 1
    I found out weird thing - if I make #main and body overflow:hidden, it doesn't scroll horrizontaly, but neither it scrolls down. But if I'll make #main and body oveflow-x:hidden, the problem is still there - it scrolls horrizontaly. The question is - why overflow-x:hidden doesn't stop the problem like it should? and how can I fix it? – Aleksander Feb 20 '14 at 14:08
  • @Aleksander I also tried with the developer tools setting ’overflow-x:hidden;’ and I saw it didn't work, but I didn't try with ’overflow:hidden;’ I will open a question for that and report here when answered. – dieortin Feb 20 '14 at 16:25
0

I found the solution, all I needed to add was to oveflow:hidden to #page_content wrapper.

All others overflows or overflows-x in #main, body, html - doesn't matters.

It was a weird problem, but eventualy I found a solution.

For all others who has similar problems I recomend thouse links:

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers - which lead me to my solution.

How do I stop users from being able to scroll horizontally on my site

CSS: make overflow-x: hidden truly hidden?

Thanks @dieortin for trying to help me!

Community
  • 1
  • 1
Aleksander
  • 73
  • 9