在特定 div 上启用滚动条

Question

我有这个网站：link 我希望黑色部分只有一个滚动条，以便用户可以看到全部内容。

我在 body 上使用了溢出，所以整个页面都拒绝滚动，但我无法在这个特定的 div.

上启用它

我必须做什么才能使黑色区域可滚动？

提前致谢！

Answer 1

添加样式 overflow-y：滚动到具有 class

的元素

container_inner default_template_holder clearfix

Answer 2

改变这个。

#lue1 {
width: 450px;
float: left;
box-sizing: padding-box;
background-color: #000;
height: 100vh;
padding: 20px;
overflow-y: scroll; /* New added code */
color: #fff;
font-family: 'Georgia';
text-align: justify;
font-size: 14px;
box-sizing: border-box;
}

Answer 3

如果 <div id="lue1"> ... </div> 是您想要垂直滚动的元素，请选择 overflow-y: auto;:

body {
  overflow: hidden;
}

#lue1 {
  width: 450px;
  float: left;
  box-sizing: padding-box;
  background-color: #000;
  height: 100vh;
  padding: 20px;
  color: #fff;
  font-family: 'Georgia';
  text-align: justify;
  font-size: 14px;
  box-sizing: border-box;
  
  overflow-y: auto;
  
}

<body>
  <div id="lue1">
    <div id="lue2"></div>
    <h2 id="lue3">THE<br>OAK HOTEL</h2>
  
    <div id="lue4"></div>
    <div id="lue5">FEELS LIKE HOME</div>
    “The Oak Hotel” ένα ξενοδοχείο 4 αστέρων για τους λάτρεις της μοντέρνας,
    industrial αισθητικής. Νεόδμητη ξενοδοχειακή μονάδα, χτισμένη το 2015,
    προσφέρει στους επισκέπτες, μοναδική εμπειρία διαμονής, χάρη στις
    υπερσύγχρονες εγκαταστάσεις που διαθέτει. Βρίσκεται στην παραθαλάσσια περιοχή,
    της Κεραμωτής και διαθέτει 19 δίκλινα δωμάτια.<br>
    <br>
    Η αρχιτεκτονική του κτιρίου, το οποίο χαρακτηρίζουν οι επιβλητικές γωνίες και
    η ξύλινη του πρόσοψη, είναι εξαιρετική. Στο πίσω μέρος του ξενοδοχείου υπάρχει
    πισίνα και pool bar, για αξεπέραστες στιγμές χαλάρωσης.<br>
    <br>
    Το “The Oak Hotel” σας περιμένει να το επισκεφθείτε σε μια τοποθεσία που
    προσφέρει ηρεμία, ησυχία και χαλάρωση. Ζήστε μια αξέχαστη εμπειρία
    διαμονής.<br>
    <br><br>
  
    <div id="lue6">ΓΕΝΙΚΕΣ ΠΑΡΟΧΕΣ ΞΕΝΟΔΟΧΕΙΟΥ</div>
  
    <ul id="lue7">
      <li>24ωρη reception</li>
      <li>café-bar</li>
      <li>εστιατόριο</li>
      <li>πισίνα</li>
      <li>pool bar</li>
      <li>ιδιωτικό parking</li>
      <li>δωρεάν φύλαξη αποσκευών</li>
      <li>φιλικό με ΑΜΕΑ επισκέπτες</li>
    </ul>
  </div>
</body>

在特定 div 上启用滚动条

Enable scrolling bar on a specific div

css

scroll

overflow