zoukankan      html  css  js  c++  java
  • jquery滚动条固定在某一位置

    查看历史消息的时候,需要将滚动条维持在正在查看的消息位置。 本方法是通过添加属性data-msg获取当前的位置,offset().top获取滚动距离,demo如下:

    html:

    <div class="box">
    <div class="messageBox">
    <p>原数据1</p>
    <p>原数据2</p>
    <p>原数据3</p>
    <p data-msg="1">原数据</p>
    <p>原数据2</p>
    <p>原数据3</p>
    </div>
    <p class="edit">&nbsp;</p>
    <div class="sendBtns"><span id="insertUp">向上插入</span> <span id="insertDown">向下插入</span></div>
    </div>

    css:

    body,html,div,p{margin: 0;padding: 0;}
    .box{ 500px;border: 1px solid black;margin: 100px auto;} 
    .messageBox{ 500px;height: 300px;border-bottom: 1px solid black;overflow-x:hidden;overflow-y:scroll;position: relative;} .messageBox p{ 100%;height: 50px;line-height: 50px;} .edit{ 498px;height: 70px;border: 1px solid red;} .sendBtns{ 100%;height: 30px;background: #ccc;padding: 5px 0}
    .sendBtns span{display: inline-block; 100px;height: 30px;line-height: 30px;margin: 0 50px;border: 1px solid black;text-align: center;}

     js:

    $(document).ready(function(){ 
    var messageBoxDom = $('.messageBox');
    $('#insertUp').click(function(){ // 查看历史消息的情况
      var message =
    $('.edit').text();
      $('.edit').empty();
      messageBoxDom.prepend(message);
      scroolByMsgId(messageBoxDom,'1');
    });
    $('#insertDown').click(function(){ //添加新消息的情况
      var message = $('.edit').text();
      $('.edit').empty();   messageBoxDom.append(message);   scroolByMsgId(messageBoxDom,'1');
    }); function scroolByMsgId(messageBoxDom,msgId){
      var scrollPx = messageBoxDom.find(
    'p[data-msg='+ msgId +']').offset().top - messageBoxDom.find('p:eq(0)').offset().top;
      messageBoxDom.scrollTop(scrollPx); //滚动条滚动的距离=p【data=1】距离顶部的距离-messageBox第一个p距离顶部的距离
    };
    })
  • 相关阅读:
    List和Dictionary互转
    table html
    华为解锁BL
    安卓小米系统开发一些适配问题
    02布局总结
    02表格布局
    02Framelayout:帧布局
    02线性布局
    02相对布局
    01安卓像素 dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算
  • 原文地址:https://www.cnblogs.com/lahm8963/p/7899739.html
Copyright © 2011-2022 走看看