小编Dee*_*kar的帖子

我正在使用服务工作者来缓存和获取文件.
这些文件在在线模式下被缓存,但是当我转换到离线模式时,chrome开发人员工具中的缓存存储空了.我无法弄清问题是什么.
任何帮助表示赞赏.

const cacheName = 'myCacheVersion1';
var filesToCache = [
    '/',
    '/service-worker/offline-page.html',
    '/service-worker/sw.js'
]

const offlineUrl = 'https://gmc-test.mytrah.com/service-worker/offline-page.html';

this.addEventListener('install', event => {
    event.waitUntil(
        caches.open(cacheName).then(function(cache){
            console.log(offlineUrl);
            return cache.addAll(filesToCache);
        })
            .then(() => self.skipWaiting())
    );
})

self.addEventListener('activate', function(e) {
    console.log('[ServiceWorker] Activate');
    e.waitUntil(
        caches.keys().then(function(keyList) {
            return Promise.all(keyList.map(function(key) {
                if (key !== cacheName) {
                    console.log('[ServiceWorker] Removing old cache', key);

                    return caches.delete(key);
                }
            }));

        })
    );
    return self.clients.claim();
});

this.addEventListener('fetch', event => {
    console.log(event.request);
    event.respondWith(
        fetch(event.request).catch(() => caches.match(event.request))
    )
});`

以上显示的是服务工作者代码.提前致谢

我正在创建一个散点图，其中的点有时会相互重叠。将鼠标悬停在任何这些点上时，工具提示都会闪烁或有时不显示。有人可以帮我吗？

dots.on("mouseenter", function(d) {
                d3.select(this).attr({
                    r: radius * 2
                });
                d3.selectAll(".crosshair")
                    .style("display", "block");

                var xCoord = d3.mouse(this)[0];
                var yCoord = d3.mouse(this)[1];

                addCrossHair(xCoord, yCoord);
                tooltipDiv
                    .style("top", (d3.event.pageY + 2) + "px")
                    .style("left", (d3.event.pageX - 28) + "px")
                    .style("opacity", 0.9)
                    .style("display", "block")
                    .html(content);
            });

            dots.on("mouseout", function(d) {

                d3.select(this).attr({
                    r: radius
                });
                d3.selectAll(".crosshair")
                    .style("display", "none");

                tooltipDiv.transition()
                   .duration(100)       
                   .style("display", "none");
            });

        //tooltip //
        var tooltipDiv = d3.select("#scatterChart")
                    .append("div")
                        .attr("class", "d3-tip n")
                        .style("opacity", 0)
                        .style("position","fixed")
                        .style("display", "block")
                        .style("top", 100)
                        .style("left", 100)
                        .style("pointer-events","none");

        //crossHair//               
         function addCrossHair(xCoord, …

我想要一个垂直的拖动条来调整两个 div 的大小。我已经创建了一个相同的示例，但我遇到了一个问题。
实际：当我调整上部 div 的大小并向下移动滑块时，父 div 的面积会增加，因此会出现滚动条。
预期：调整大小时，如果滑块向下移动，它应该只显示上层 div 中包含的数据，当滑块向上移动时，它应该显示下层 div 的内容，并且不应该增加父 div 的总长度。

var handler = document.querySelector('.handler');
var wrapper = handler.closest('.wrapper');
var boxA = wrapper.querySelector('.box1');
var boxB = wrapper.querySelector('.box2');
var isHandlerDragging = false;

document.addEventListener('mousedown', function(e) {
  // If mousedown event is fired from .handler, toggle flag to true
  if (e.target === handler) {
    isHandlerDragging = true;
  }
});

document.addEventListener('mousemove', function(e) {
  // Don't do anything if dragging flag is false
  if (!isHandlerDragging) {
    return false;
  }

  // Get …