Question

我有一个div，当用户从表单发送数据时会动态填充，它类似于聊天框。用户结束消息的位置，该消息显示在div内。现在这个div有一个滚动条应该保持在底部但是如果用户滚动那么它应该保持在用户保留它的那个位置

问题在于虽然滚动条停留在底部，但是当用户将其拉起时，它也将自己拉到底部，用户无法使用它滚动。

div的代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Spell : MonoBehaviour
{
    public float damage = 1.0f;
    public bool ignoreCaster = true;
    public float delayBeforeCasting = 0.0f;
    public float applyEveryNSeconds = 1.0f;
    public int applyDamageNTimes = 1;

    private bool delied = false;

    private int appliedTimes = 0;

    private bool test = false;
    void OnTriggerStay(Collider other)
    {
        IDamageable takeDamage = other.gameObject.GetComponent<IDamageable>();
        if(takeDamage != null)
        {
            StartCoroutine(CastDamage(takeDamage));
        }
    }

    IEnumerator CastDamage(IDamageable damageable)
    {
        if(!test && appliedTimes <= applyDamageNTimes || !test && applyEveryNSeconds == 0)
        {
            test = true;
            if(!delied)
            {
                yield return new WaitForSeconds(delayBeforeCasting);
                delied = true;
            }
            else
            {
                yield return new WaitForSeconds(applyEveryNSeconds);
            }
            damageable.TakeDamage(damage);
            appliedTimes++;
            test = false;
        }
    }
}

var youInterval;

function startInterval() {

  youInterval = setInterval(function() {
    var elem = document.getElementById('scrollbody');
    elem.scrollTop = elem.scrollHeight;
  }, 500);

}

document.addEventListener('scroll', function(event) {
  if (event.target.id === 'scrollBottom') {
    clearInterval(youInterval);
  }
}, true);
startInterval();

.chatbox__body {
  overflow-y: auto;
}

任何人都可以帮我解决这个问题

Answer 1

您的情况失败if (event.target.id === 'scrollBottom') {

滚动生成的event位于文档上，因此event.target.id实际上正在检查不存在的文档的id属性。

您必须首先在body中禁用overflow，然后将div添加到div

html,body{  height:100%; width:100%;overflow:hidden;}

.chatbox__body {
  overflow-y: auto;
  height:100%;
}

在您的JS检查中if (event.target.id === 'scrollbody') {

<强>段

var youInterval;

function startInterval() {

  youInterval = setInterval(function() {
    var elem = document.getElementById('scrollbody');
    elem.scrollTop = elem.scrollHeight;
  }, 500);

}

document.addEventListener('scroll', function(event) {
  debugger;
  if (event.target.id === 'scrollbody') {
    clearInterval(youInterval);
  }
}, true);
startInterval();

html,body{  height:100%; width:100%;overflow:hidden;}
.chatbox__body {
  overflow-y: auto;
  height:100%;
}

#content{
 height:200%;
 width:100%;
 background-color:red;
}

<div class="chatbox__body" id="scrollbody">
  <div id="content"></div>
</div>

无法在div内移动滚动条

1 个答案: