Load HTML page with Horizontal scroll in IFrame windows store apps

Question

 I am using IFrame as control to load local HTML in Windows 8 apps using HTML/JavaScript.     

       <iframe id="IframeHor" src="split.html" style="background-color: white; ; left: -4px; top: 68px;"></iframe>

Right now I am loading from my Solution explorer.
It is looking good. My intention is to load with Horizontal scrolling(Disable vartical Scroll). I tried with changing Style properties like `overflow-y:scroll;` & `scrolling="yes" horizontalscrolling="no" verticalscrolling="yes" ` Here some of the properties are not working with WinJS library.

 So, any one help me to start on this. Thanks

---

devendra

Answer 1

Hi GDEVENDRAK,

To enable Horizontal scrolling and to disable vertical scrolling, you could try following code:

overflow-x:hidden;
overflow-y:scroll;

If the height of the page less than the height of the iframe, the scrollbar would not display, to enable it enforcement you could try following code

overflow:scroll;

Best Regards,

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

@Jamles Hez

I tried with 

overflow-x:hidden;overflow-y:scroll;

 not working me. Can you check it.

Thanks,

---

devendra

Answer 3

Hi GEVENDRAK,

Yes, you are right, I create an iframe with 400px width, I firstly tried with www.microsoft.com and the page displayed without vertical scroll bar, but when using another page such as http://msdn.microsoft.com/en-US/windows/apps/, the scroll bar appears and seems to ignore the setting. You could also try these two links and find out what's the difference.

I don't think there is any way to turn off the scrolling completely with the overflow property, not only in store app but also in your browser. But I noticed that you are using a local page, which provide a chance to disable vertical scroll bar by styling your page, like www.microsoft.com does.

Iframe scrollbar might be an issue for HTML5, by setting "overflow-x:hidden;overflow-y:scroll;" might not solve your problem .

Best Regards,

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 4

@Jamles Hez
Hi
It is looking fine while using local File. Right now I am out of that one. If I face anything wrong I will get back to You.
Thanks for replies. 

---

devendra