Question

Chrome的最新版本为69，现在支持滚动快照类型，但显然不是很好。

原始CSS：

import { Get, Controller, HttpService } from '@nestjs/common';
@Controller()
export class AppController {
  constructor(private readonly http: HttpService) {}
  @Get()
      root(): {
        return this.httpClient.get('https://api.github.com/users/quen2404')
        .toPromise()
        .then(res => res.data)
        .catch(err => /*handle error*/)
      }
}

使用jQuery为过渡设置动画：

<div class="col-md-2">
<label>Service Start</label>
<input class="form-control timepicker1"  type="text" id="start_time" />
</div>
<div class="col-md-2">
<label>Service End</label>
<input class="form-control timepicker1"  type="text" id="end_time" />
</div>

如果我们不这样做，则动画会捕捉到转盘中的每个元素，使其看起来非常生涩，而不平滑。因此，我们首先禁用滚动快照型CSS。这很好。唯一的麻烦是，Chrome忽略了将该属性重新设置为其原始值的指令！

有人告诉我这在Safari中有效。

任何想法，解决方案，解决方法都将受到欢迎！

Answer 1

嗯，Chrome浏览器存在问题，但至少我们有一种解决方法：

新CSS：

        .item-carousel {
            scroll-snap-type: x mandatory;
        }

        .snap {
            scroll-snap-align: start;   
            scroll-snap-stop: always;
        }

新HTML：

<div class="item-carousel">
    <div class="item snap" >
        ...
    </div>
</div>

和新的JS：

$(".item").removeClass("snap");
$(".item-carousel").animate({
    scrollLeft : 1000,
}, {
    complete : function() {
        $(".item").addClass("snap");
    },
});

新的想法是，不要操纵容器上的scroll-snap-type属性，而是在包含的项目上添加和删除“ snap”类。不知何故，这行得通。

设置为“ none”后重新设置滚动快照类型无效

1 个答案: