13
2024
11

滚动面板-scroll-panel

最近用pixijs做东西,需要用到滚动面板,自己写了一个,记录一下。

滚动逻辑参考滚动条原理

面板就是横向纵向都可能出现滚动条,也可能只出现一个,也可能都不出现。

出现滚动条的逻辑判断需要注意,因为出现横向滚动条会使视口的高度变小,可能会导致需要出现纵向滚动条,同样出现纵向滚动条会使视口的宽度变小,可能会导致出现横向滚动条。

那具体应该怎么判断需要出现哪个滚动条呢?

总结逻辑如下(如有错误,欢迎指正):

如果 (内容宽度 小于等于 视口宽度 )并且 内容高度 小于等于 视口高度):

    不出现横向滚动条

    不出现纵向滚动条

否则 如果 内容宽度 大于 视口宽度 )并且 内容高度 小于等于 视口高度 减去 横向滚动条高度):

    出现横向滚动条

    不出现纵向滚动条

否则 如果 (内容高度 大于 视口高度 )并且 (内容宽度 小于等于 视口宽度 减去 纵向滚动条宽度):

    不出现横向滚动条

    出现纵向滚动条

否则:

    出现横向滚动条

    出现纵向滚动条



« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。