অনুভূমিক স্ক্রোলিংয়ের সাথে কেবল ডিভ

Question 1

আমার একটি স্থির প্রস্থের ডিআইভি রয়েছে যাতে অনেকগুলি কলাম সহ একটি টেবিল থাকে এবং ব্যবহারকারীকে ডিআইভি-র মধ্যে টেবিলটি অনুভূমিকভাবে স্ক্রোল করার অনুমতি দেওয়া দরকার।

এটি কেবল আই 6 এবং আই 7 (কেবলমাত্র অভ্যন্তরীণ ক্লায়েন্ট অ্যাপ্লিকেশন) এ কাজ করা দরকার।

আই 7 এ নিম্নলিখিত কাজ করে:

overflow-x: scroll;

আই 6-তে কাজ করে এমন সমাধানে কি কেউ সহায়তা করতে পারে?

Question 2

সমাধান মোটামুটি সোজা এগিয়ে। সারণীতে থাকা ঘরের প্রস্থকে আমরা প্রভাবিত করব না তা নিশ্চিত করার জন্য, আমরা সাদা স্থানটি বন্ধ করব । আমরা একটি অনুভূমিক স্ক্রোল বার পেয়েছি তা নিশ্চিত করতে আমরা ওভারফ্লো-এক্স চালু করব । এবং thats প্রায় কাছাকাছি এটি:

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

আপনি এখানে ফলাফল বা নীচের অ্যানিমেশনে দেখতে পারেন । যদি টেবিলটি আপনার ধারকটির উচ্চতা নির্ধারণ করে, আপনার স্পষ্টভাবে সেট overflow-yকরার দরকার নেই hidden। তবে এটিও একটি বিকল্প understand

Question 3

আমি কাজের নির্বাচিত উত্তর পেতে পারি না তবে কিছুটা গবেষণার পরে , আমি দেখতে পেলাম যে অনুভূমিক স্ক্রোলিং ডিভ সিএসএসে থাকতে হবে white-space: nowrap।

এখানে সম্পূর্ণ কার্য কোড রয়েছে:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 1000px;
            height: 190px;
            overflow: auto;
            overflow-y: hidden;
            margin: 0 auto;
            white-space: nowrap
        }

        img{
            width: 300px;
            height: 150px;
            margin: 20px 10px;
            display: inline;
        }
    </style>
</head>
<body>
    <div id='scrolly'>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
    </div>
</body>
</html>

Question 4

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

সম্পাদনা:

এটা আমার জন্য কাজ করে:

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>

Question 5

অনুভূমিক স্ক্রোলের জন্য, এই দুটি বৈশিষ্ট্য মাথায় রাখুন:

overflow-x:scroll;
white-space: nowrap;

কাজের লিঙ্কটি দেখুন: আমাকে ক্লিক করুন

এইচটিএমএল

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better   control of the layout. The default value is visible.You can use the overflow property when you want     to have better control of the layout. The default value is visible.</div>

সিএসএস

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}

Question 6

এটা চেষ্টা কর:

এইচটিএমএল:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

সিএসএস:

.container {
  width: 200px;
  height: 100px;
  display: flex;
  overflow-x: auto;
}

.item {
  width: 100px;
  flex-shrink: 0;
  height: 100px;
}

সাদা স্থান: এখনই; সম্পত্তি আপনাকে পাঠ্য মোড়ানো না। উদাহরণস্বরূপ এখানে দেখুন: https://codepen.io/oezkany/pen/YoVgYK