I am attempting to scroll an embedded element but not scroll the HTML body. I have specified overflow-y: hidden;
in the CSS for the body and overflow-y:scroll;
in the CSS for the element that I want to scroll. In this case, there is no scroll-bar for the body and the scrollbar is drawn for the element I want to scroll but this scrollbar is disabled and will not function. The element I want to scroll occupies the bottom 3/4 of the viewport. If I specify nothing, I get a scrollbar for the body that works but this means that all the body content scrolls. I want to keep the content of the first several elements in the body visible while the one element that contains the text that I am displaying becomes scrollable. Any suggestions on how to proceed? Any solution should work cross-browser and not require third-party code. I would prefer a solution that does not require javascript.