We Keep Coding

Scrolling a child div doesn't work without tabindex?

I have a div element with overflow-y: scroll which wasn't scrolling when I used the keyboard up and down arrows. I finally found a fix which was simply to add to my div tabindex="0". I am okay with this fix, but I was very surprised that if I select text in my div to make it the selected node (proved by using window.getSelection()), arrow keys still didn't work. Apparently the target of my keydown event goes to a parent which has a tabindex.
// DIRECTIONS:
// 1) Run the Fiddle
// 2) Using the mouse select some text in the green box
// 3) Use up and down arrows to scroll
// --- Scrolling was scoped to the parent so the green box doesn't scroll
// --- Add this to the scrollBox div to fix: tabindex="0"
window.addEventListener('keydown', listener);
function listener(evt) {
console.log(`${evt.code}: ${evt.target.tagName}, ${evt.target.className}`);
//console.log(window.getSelection());
}
.foreground {
height: 100%;
width: 100%;
}
.scroll-box {
background-color: green;
overflow: scroll;
max-height: 200px;
}
<div tabindex="0" class="foreground">
<div class="scroll-box" id="scrollBox">
Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test
</div>
</div>
Why am I seeing this behavior? Why would tabindex take precedent over the focused/selected element when it comes to using keys for scrolling? Is the recommendation then that all of my divs which overflows with scroll or auto also include tabindex?
Thanks
Update: I forgot to mention that I do not control the parent div and cannot remove the parent div's tab index.
Update 2: Even more strange behavior regarding this... elements without tabIndex do not return undefined from tabIndex, instead they always return -1. Therefore if I do document.documentElement.tabIndex = document.documentElement.tabIndex, the value before and after will be -1 when read. Only, afterward the entire document is applying the tabIndex behavior such that scrollable divs cannot be used with keyboard navigation unless they have tabIndex="0".
Is there no way to detect whether or not an element has an implied tabIndex behavior set? What if I wanted to create a function that detected whether or not the container of selected text would scroll, I would have no way of detecting for sure because of the tabIndex read behavior?

Text align center of select-box is not working on iPhone

Text align center of select-box is not working on iPhone.
Please help me out.
It is working on all devices without iPhone.
<style>.demo select {text-align:center;text-align:-moz-center;text-align:-webkit-center;width:200px;}</style>
<div class="demo">
<select>
<option>demo</option>
<option>demo</option>
<option>demo</option>
<option>demo</option>
<option>demo</option>
</select>

With the little code that you provided, these are the possible problems:
You do not need to add vendor prefix for text-align, it is
supported by all the browsers, although you are doing it wrong
anyway. Vendor prefixes come before the CSS property not before the
value, like so:
-webkit-border-radius: 2px;
Based on the code you provided you did not close the div tag.
The text-align property specifies the horizontal alignment of text
in an element. Which in your case the parent element is the div.demo. If you want the select element to be centered within the div, your div needs to have some specified width. For example:
div.demo{
width: 500px;
margin: 0 auto; /* If you want it to be centered within its own parent*/
}
That is all I can suggest based on your little code!

Disable mouse scroll when overflow-x: hidden [CSS,HTML]

PROBLEM:
The contents of my div are positioned 'absolute' and the width of the contents are larger than the div.
As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !

I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.
#wrapper {
position: absolute;
width: 100%;
overflow-x: hidden;
}

I think the default behavior for the document body is to allow scrolling of content that is too big for it. This seems like it might not be too easy to work around.
Instead of specifying a width on your BODY, you could try using one more DIV and putting the width on that instead.
<div style="width:1000px;">
<div style="width:1200px;"></div>
</div>
Is there a reason you have to put width on the BODY tag?

You must use
$("element").on('mousedown', function(e) {}
Just change live to on

how scrollable text line inside a div without showing scroll bars

plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance

You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.

If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.

Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.

How to set up the browser scrollbar to scroll part of a page?

I've seen this done in a few sites, an example is artofadambetts.com. The scroll bar on the page scrolls only an element of the page, not the entire page. I looked at the source and havent't been able to figure it out yet. How is this done?

That's pretty nifty. He uses "position:fixed" on most of the divs, and the one that scrolls is the one that doesn't have it.

In fact it is not the scrolling part that is "doing the job", it is the fixed part of the page.
In order to do this, you should use CSS and add position: fixed; property (use it with top, bottom, left and/or right properties) to the elements that you wish not to scroll.
And you should not forget to give them a greater z-index, if you don't there might be some of the scrolling element that can go over your fixed element as you scroll (and you certainly don't want that).

To find out how people do these kinds of things in CSS and/or Javascript the tool Firebug is just outstanding:
Firebug addon for Firefox

It should be noted that without further hacks position fixed does not work for IE6, which is still managing to hold on to 15-30% of the market, depending on your site.

You can use fixed positioning or absolute positioning to tie various elements to fixed positions on the page. Alternatively you can specify a fixed size element (such as a DIV) and use overflow: scroll to force the scrollbars on that.
As already mentioned, getting everything to work in Internet Explorer AND Firefox/Opera/Safari requires judicious use of hacks.

This can be done in CSS using the "position:absolute;" clause
Here is an example template:
http://www.demusdesign.com/bipolar/index.html
From http://www.demusdesign.com/

The browser is scrolling the page, its just that part of it is fixed in position.
This is done by using the "position: fixed" CSS property on the part that you wish not to scroll.

They've set the side and top elements to have fixed positions via CSS (see line 94 of their style.css file). This holds them in the viewport while the rest scrolls.

Try this for scrolling a particular part of web page......
<html>
<head>
<title>Separately Scrolled Area Demo</title>
</head>
<body>
<div style="width: 100px; border-style: solid">
<div style="overflow: auto; width: 100px; height: 100px">
sumit..................
amit...................
mrinal.................
nitesh................
maneesh................
raghav...................
hitesh...................
deshpande................
sidarth....................
mayank.....................
santanu....................
sahil......................
malhan.....................
rajib.....................
</div>
</div>
</body>
</html>

For a div, you can add in the cSS
overflow: auto
For example,
<div style="overflow:auto; height: 500px">Some really long text</div>
Edit: After looking at the site you posted, you probably don't want this. What he does in his website is make the layout as fixed (position: fixed) and assigns it a higher z-index than the text, which is lower z-index.
For example:
<div class="highz"> //Put random stuff here. it'll be fixed </div>
<div class="lowz"> Put stuff here you want to scroll and position it.&lt/div>
with css file
div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}

To put scroll bars on an element such as a div:
<div style="overflow-x: auto; overflow-y: auto;>the content</div>
If you only want a horizontal or vertical scroll bar, only use whichever of overflow-x and overflow-y you need.