CODEWITHSUNDEEP
jquerycsshtmlscroll
Muhammad Usman
Muhammad Usman

Reputation: 10936

Scroll the internal child div

I have created a div there are two childs of that div one is ul and other is a div I want to scroll the elements of that internal div and font to fix the ul. I can not add any other div around the internal div

Code

<div style="width: 200px; overflow-x: auto; ">
<ul>
    <li>Some data</li>
    <li>some more data </li>
</ul>
<div style="height: 70px; width: 500px">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
    <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
</div>
</div>​

Live Demo

Upvotes: 0

Views: 315

Answers (2)

Shailender Arora
Shailender Arora

Reputation: 7778

Hi Rana check it i have played within your code the help of white-space:nowrap; proptery. This white space property will continue our inline elements in the horizontal way....

nowrap is the value of proptery white-space and this nowwrap value suppresses all line breaks in the element.

<div style="width: 250px; border:1px solid red; ">
    <ul>
        <li>Some data</li>
        <li>some more data </li>
    </ul>
  <div style="border:1px solid black;width:150px;height:70px;overflow-y:hidden;overflow-x:scroll; white-space:nowrap;">

        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">

</div>
</div>

see the demo :- http://jsbin.com/ovazol/edit#html,live

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

<div style="width: 150px; overflow-x: auto;position:relative ">
    <ul style="position:fixed">
        <li>Some data</li>
        <li>some more data </li>
    </ul>
    <div style="height: 100px; width: 500px;margin-top:60px">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
        <img src="http://www.fiveriverstech.com/wp-content/themes/fiverivers/images/about_s.jpg">
</div>
</div>

DEMO

Upvotes: 1

Related Questions