点击下滑滚动

项目场景：

        （一）当用户点击页面中的某一区域，页面的可视区域自动下滑至指定区域。例如：用户点击了页面的评当前评论数时，下滑至底部指定区域的用户评论展示区域。效果展示：

---

页面下滑滚动效果展示

        （二）将scroll滚动条设置为不显示。在chrome中的CSS写法是::webkit-scrollbar { display: none; };

问题描述

实现需求的方式是使用与一个a标签进行页面的滚动。具体实现的方式是：将a标签的href属性的值设置为#xxx的形式，其中xxx为需滚动至区域标签的id，HTML代码如下：

span class="comment-tool" title="评论数">
     <a href="#main-comment">
         <i class="el-icon-chat-dot-square"></i>
         1, 611
     </a>
</span>

<div class="main-comment" id="main-comment">

通过点击评论数区域后，确实可以实现该需求，但是由于项目开发的方式是vue.js这就导致路由里的hash值发生变化，如下；因此，需要使用另外一种方式进行需求的实现。

xxxx/math/act_content/2#main-comment

原因分析：

因为vue框架中的路由会跟a标签进行匹配，点击某个a链接路由会对该标签的额href值进行匹配，同时也会将对应的值加载到浏览器的url地址栏。

---

解决方案：

1、利用scrollIntoView()方法，该方法将调用它的元素滚动到浏览器窗口的可见区域（根据其他元素的布局，元素可能无法完全滚动到顶部或底部）

methods: {
	go() {
    	document.querySelector('#main-comment').scrollIntoView();
	},
}
// 点击事件绑定
<span class="comment-tool" title="评论数" @click="go">

页面下滑滚动效果展示

通过调用该API页面下滑滚动功能也能完美实现。同时，scrollIntoView()方法还接受参数对应的传参，如下：

scrollIntoViewOptions	定义过渡动画
behavior	定义缓慢动画，可选值：auto、instant 或 smooth。默认为 auto
block	定义垂直方向的对齐，可选值：start，center，end 或 nearest。默认为 center
inline	定义水平方向的对齐，可选值：start，center，end 或 nearest。默认为 nearest