Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <div>
    <h2>留言區</h2>
    <ul class="comments">
      
    </ul>
  </div>
  <div>
    <h2>留言區(overflow-anchor)</h2>
    <ul class="comments-new">
      <li class="anchor"></li>
    </ul>
  </div>
  <button onclick="stop()">stop</button>
</div>
              
            
!

CSS

              
                * {
  box-sizing: border-box;
}

.comments-new {
  display: block;
  list-style: none;
  padding: 10px;
  width: 300px;
  height: 500px;
  background-color: #efefef;
  overflow-y: auto;
  & > * {
    overflow-anchor: none;
  }
  
  .anchor {
    display: block;
    overflow-anchor: auto;
    height: 20px;
  }
}

.container {
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comments {
  display: block;
  list-style: none;
  padding: 10px;
  width: 300px;
  height: 500px;
  background-color: #efefef;
  overflow-y: auto;
}

.comment {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
}
              
            
!

JS

              
                const names = [
  'kalan',
  'jack',
  'david',
  'wan',
  'aa.bb.cc',
];

const randomString = [
  'How are you?',
  '新手駕駛反而是安全的,因為一旦開始鬆懈,就是危險的開始。',
  '如果汽車可以肆無忌憚地按喇叭,我們是否也可以對看不順眼的東西按喇叭',
  '這次的作品是從一輛汽車的角度出發,這已經不是伊坂第一次嘗試了,《死神系列作》、《夜之國的庫帕》,都是以非人類的角度來作描寫,觀察人類。',
  '喇叭似乎只是為了發洩憤怒而存在的。',
  '為什麼人類那麼喜歡這種原始而粗暴的方式呢?',
  '那麼行人也應該配戴喇叭',
  '但他並不以為意',
  '因為他知道這是人性下的醜陋',
  '只要有人跟一般人不同,就會有霸凌的存在,因為暴力讓人感覺很爽。',
  '因為這件事更有趣不是嗎?大家都想看,所以就會有人去寫這種報導。',
  '正如人類中有好人跟壞人,記者也有分好記者跟壞記者,這次是介紹好的記者',
  '咦?你怎麼變得那麼乖,這樣怎麼當記者?',
  '「鏡頭具有抑制對方行為的力量」,所以在拍攝的時候都有種優越感',
  '就好像有人可以自私地害得整條高速公路都塞車一樣、就好像有人會把全世界的號誌燈都當作綠燈一樣。',
  '就好像媽媽說吃青椒才可以吃甜點那樣嗎?',
  '在小說進入尾聲階段時,亨曾經鼓勵圭一,希望他可以走出被霸凌的陰影,勇敢起身對抗。',
  '我很喜歡伊坂幸太郎的原因在於他總是能夠把一些生活當中的事情揉合進劇情,讓讀者們一起親身經歷那種感覺。',
];

function createComment(content) {
  const el = document.createElement('li');
  const name = names[Math.floor(Math.random() * names.length)];
  
  el.textContent = `${name}: ${content}`;
  el.classList.add('comment');
  return el;
}

const comments = document.querySelector('.comments');

const commentsNew = document.querySelector('.comments-new');

const anchor = document.querySelector('.anchor');
function appendNew(comment) {
  commentsNew.insertBefore(comment, anchor);
}
function append(comment) {
  comments.appendChild(comment);
  if (comments.offsetHeight < comments.scrollHeight && comments.scrollTop +  comments.offsetHeight + 100 > comments.scrollHeight) {
      comments.scrollTop = comments.scrollHeight - comments.offsetHeight;  
  }
}


let id = setInterval(() => {
  const content = randomString[Math.floor(Math.random() * randomString.length)];
  appendNew(createComment(content));
  append(createComment(content));
}, 500);
  

function stop() {
  clearInterval(id);
}

              
            
!
999px

Console