Is it a bad idea to have a scrollable element within a scrollable element? I sometimes feel it tricky because, when I scroll with the mouse or keys, the element that I didn't intend sometimes scrolls.
If it is a bad idea, it there an alternative way to deal with in such cases?
A scrollable element within another scrollable element doesn't automatically disqualify a design. The textbox in which I'm typing this is a scrollable element within the scrollable question page on UX.SE, and that's fine. The Facebook ticker (top right) is a scrollable component within the scrollable FB page. Most widget-based webpages display this behavior as well, unless they've turned it into a webapp, like Gmail - where each area is scrollable but the page itself isn't.
But it needs to be carefully designed. It should employ on-demand scroll bars, which help the user know which element is currently attached to the mouse wheel / arrows, and the detailed interaction should be well thought through.
The one case where it's especially difficult is designing for touch screen. Since there is no hover on touch screens, you can't implement on-demand scroll bars, and if you open such a page on an iPad and swipe within the internal element, it won't know which of the elements you meant to scroll.
This sounds like an obvious bug to me, my hunch is that it's a browser issue. But yes scrollable elements are a big no-no. It's hard to answer this without an example but there are several ways you could overcome this, e.g. expanding the window area of one element or the other, possibly separating the two elements out. Again, an example would help here.
