8

CSS Conflict

html {overflow-x:hidden;}

with
Web Browser Command

Ctrl + F  or find() or keyword search


Problems:

Site is horizontal scroll design that jumps to previous(Left) or next(Right) to a predetermined width/step/section without a visible horizontal scroll bar.

document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
    case 37:
        leftArrowPressed();
        window.location.href = '#one';
        break;
    case 39:
        rightArrowPressed();
        window.location.href = '#two';
        break;
}
};


When I invoke a Ctrl+F to find words, the page will not follow the highlighter off screen left or right. Except when Overflow-x: visible and that only scrolls to the word not the entire screen width/step/section that the word is in.

  • Overflow-x:hidden; removes the browsers ability to scroll horizontally;
  • Overflow-x:visible; browsers only scrolls to word not next section when in horizontal overflow;


Can I follow the browser ctrl+f word highlighter feature at predetermined width steps/sections?

Can I invoke the key-press when ctrl+f word highlighter moves off screen?

Is it possible to capture the highlighted word coordinates( x , y)?

Functioning Test Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Alpha Test</title>

<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
overflow-x:hidden;
}
body {
height:100%;
}
#wrap {
min-height:100%;
width:200%;
}
#one, #two {
width:50%;
float:left;
}
</style>

<script type="text/javascript">
document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37:
            window.location.href = '#one';
            break;
        case 39:
            window.location.href = '#two';
            break;
    }
};
</script>

</head>
<body>

<div id="wrap">

<div id="one">
<iframe id="frame" src="https://wiki.videolan.org/" frameborder="0" marginwidth="" width="100%" height="100%" align="bottom">Browser not compatible.</iframe>
<!END URL-iFrame></div>

<div id="two">
<iframe id="frame" src="http://imdb.com" frameborder="0" marginwidth="" width="100%" height="100%" align="bottom">Browser not compatible.</iframe>
<!END URL-iFrame></div>

</div>
</body>
</html>
3
  • Is the overflow visible an option, if you would be able to fix the scroll position?
    – t.niese
    Nov 8, 2013 at 6:50
  • @t.niese Yes, if possible I want it removed. I can cover it with a fixed div if necessary.
    – Understood
    Nov 8, 2013 at 7:27
  • 1
    with overflow: visible you could check if the scroll event is triggered and then check the scrollLeft if it has a valid value and if not correct it so that the page is fully visible. (I can't test myself right now, but this is what i would try)
    – t.niese
    Nov 8, 2013 at 8:45

1 Answer 1

2

Overflow-x and overflow-y had always problems, even in the newest browsers. Both can have "hidden", "visible" and "scrollbar" ("auto" is only a combo of "visible" and "scrollbar"), which is thus 9 combinations.

But in the practice only 5 of them works, I reply: even in the newest Chrome! And what yet worser is: there is a difference between the browsers, which 5 is this...

Sometimes (in depends on your actual problem) a workaround is possible, if you combine overflow-x, overflow-y and overflow. Sometimes some JS-tricking is the solution. General and beautiful solution doesn't exist.

ctrl/f has with it probably nothing direct to do, it is an indirect cause of your problem, because the body of your page will be probably resized, when the search-widget of the browser appears. You could reproduce this problem probably with a vertical resize of the browser window, too.

8
  • Can you expand upon what the issues are, and which five of the combinations work? Thanks!
    – Neal Gokli
    Nov 15, 2018 at 19:58
  • @NealGokli Welcome on the SE! Uhm, this was 5 years ago, and I didn't worked in css too much since then :-(
    – peterh
    Nov 15, 2018 at 20:33
  • Thanks anyway! You are lucky to avoid css :)
    – Neal Gokli
    Nov 15, 2018 at 20:35
  • @NealGokli Css is not so bad! Such edge cases are evil in it, you should avoid them and don't rule them!
    – peterh
    Nov 15, 2018 at 20:37
  • 1
    @NealGokli You will likely have a good insight into the soul of the people need to solve practically insolvable problems in a fixed time. :-) My suggestion is: don't start to hack the css, particularly not with js. It is simply not enough. Not even today. Have a page layout which simply doesn't require such tricks. Look, how simple and good the SE looks, for example.
    – peterh
    Nov 26, 2018 at 22:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.