如何滚动锁定 Django HTML 网页

Question

我目前使用的页面包含在线表单列表

然而，当用户输入并提交每个表单（行）时，它们将被发送回页面顶部。这变得非常乏味，因为用户需要快速输入数据，而每次添加条目时都需要滚动 2 分钟。

有谁知道如何实现滚动锁以防止这种情况发生

Views.py：函数：

class AvonleaView（视图）：

def get(self,request):
    created_nums= AvonleaClass.objects.all().values('unitNumber')

    Aprev = AvonleaClass.objects.all().order_by('-unitDateEntered')
    # created_nums= AvonleaClass.objects.all()
    print(created_nums )

    created_nums =[int(i['unitNumber']) for i in created_nums]
    print(created_nums )

    form = AvonleaForm()
    return render(request,"meter_readings/avonlea.html",{'form':form , 'created_nums':created_nums })

def post(self,request):
    created_nums= AvonleaClass.objects.all().values_list('unitNumber')
    print(created_nums)
    form = AvonleaForm(request.POST)
    if form.is_valid():
        form.save()
        return redirect('Avonlea')
        messages.success(request , 'creates successfully ')
    else:
        return render(request, 'meter_readings/avonlea.html', {'form': form ,  created_nums:created_nums })

HTML 页数：

{% extends 'meter_readings/base.html' %}

{% block content %}
<!-- CSS only -->


<div class="container" font-size= 8px>
<center><h1>Avonlea Meter Readings</h1></center>
<br>
<head>
  <meta name="viewport" content="width=device-width">
  
</head>
{% for unit_number in form.unitNumber %}
<h6>{{ error }}</h6>


<form class="form-group mt-4" method="post"  {% if unit_number.data.value in created_nums %}  style="background-color: rgb(231, 224, 224);  " {% endif %} >
  {% csrf_token %}
  <div class="container">
    <div class="row mb-3">
<div class="col">
  <h5 style="font-size: 14px"> Unit number </h5>
  {{ unit_number.data.value}}
</div>

<input type="hidden" name="unitNumber" value="{{unit_number.data.value}}">

<div class="col" id="prev{{unit_number.data.value}}" >
  <h5 style="font-size: 14px"> Previous Reading </h5>
  {{ previousReading }}
</div>
<div class="col"   id="readings{{unit_number.data.value}}">
  <h5 style="font-size: 14px"> Current Reading </h5>
  {{ form.newReading }}
</div>
<div class="col" id="difference{{unit_number.data.value}}">
  <h5 style="font-size: 14px"> Units Used </h5>
  {{ form.difference }}
</div>
<div class="col" id="img{{unit_number.data.value}}">
  {{ form.image }}
</div>
<div class="col">
<button id="form.id" class="btn btn-success " type="submit"   {% if unit_number.data.value in created_nums %}  disabled {% endif %} > Save</button>
</div>


    </div>
  </div>



</form>

  {% endfor %}

<br>
<br>

Answer 1

如果我理解正确，您可以将 #<some_id> 添加到表单的 action 属性，当页面加载时，浏览器会自动将带有 id="some_id" 的元素置于视图中。

示例：

<form id="form1" action="#form2" method='POST'>...</form>
...
<form id="form2" action="" method='POST'>...</form>

如果您在页面重新加载时提交 #form1，即使它位于页面底部，浏览器也会滚动到 #form2。

或者如果你只有一种形式，你可以这样做：

<form id="form1" action="#form1" method='POST'>...</form>

编辑：

<form id="form{{forloop.counter0}}" action="#form{{forloop.counter}}" class="form-group mt-4" method="post"  {% if unit_number.data.value in created_nums %}  style="background-color: rgb(231, 224, 224);  " {% endif %} >

如何滚动锁定 Django HTML 网页

How to scroll lock a Django HTML Web Page

python

django

scroll

scroll-lock