[BUG] If luckysheet is placed lower in a page, first click on the table scrolls up.

ttygqcqt 于 22天前发布在其他

关注(0)|答案(2)|浏览(21)

A click on the table scrolls the page all the way to the top
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Load a page where the table in reachable through scrolling.
Scroll to the table.
Click
Observe the page scrolled all the way to the top.

What is expected?
scrolling shouldn't be affected by the click on the table.

Screenshots or demo
Here's how to try and see:

<html>
  <head>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
    <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
  </head>
  <body>
    <h2>Scroll down please.</h2>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="luckysheet" style="margin:0px;padding:0px;width:90%;height:50%;left: 20px;top: 20px;"></div>
    <script>

      $(function () {
          var options = {
              container: 'luckysheet', //luckysheet is the container id
              lang: 'en',
              title: 'bug'
          }
          luckysheet.create(options)
      })
    </script>
  </body>
</html>

Environment

OS: Any
Browser Version: Issue is observed on chrome, firefox and opera so far.
Luckysheet Version: The one available on CDN

P.S. Thanks a lot for the beautiful work!

Luckysheet

来源：https://github.com/dream-num/Luckysheet/issues/504

2条答案

按热度按时间

kzmpq1sx1#

In order to deal with the problem of Chinese input, clicking the cell will trigger the focus().select() of the input box once, and the initial top value of the input box is -1000px. We have not found a good way yet. If you use it in an English environment, you can change line 482 in the src\utils\util.js file to:

$("#luckysheet-rich-text-editor").focus({
                 preventScroll: true
             }).select();

赞(0）回复(0）举报 22天前

vjrehmav2#

I don't want to edit luckysheet source, so I fix this behaviour as folows:

luckySheetGlobals.create({
      ...
      hook: {
        workbookCreateAfter: () {
          const editElement = document.getElementById(
            'luckysheet-rich-text-editor'
          );
          if (editElement) {
            let editElementJustFocused = false;
            let windowLastScrollY = 0;
            window.addEventListener('scroll', () => {
              if (editElementJustFocused) {
                editElementJustFocused = false;
                window.scrollTo({ top: windowLastScrollY });
              } else {
                windowLastScrollY = window.scrollY;
              }
            });
            editElement.addEventListener('focus', () => {
              editElementJustFocused = true;
            });
          }
        }
      }
    });

赞(0）回复(0）举报 22天前

我来回答

[BUG] If luckysheet is placed lower in a page, first click on the table scrolls up.

2条答案

相关问题

热门标签

最新问答