SofaScore嵌入iframe自动滚动到底部及显示优化的技术咨询

Here's how you can achieve automatic scrolling to the bottom, remove redundant content, hide scrollbars, and keep only the attack momentum graph and team symbols:

1. Dynamic Scrolling to Content Bottom #

Instead of using a fixed scrollTo(0, 500), scroll to the full height of the iframe content to ensure you reach the momentum graph every time—this adapts to varying content lengths across different matches:

.on("load", function() {
  const iframeWindow = this.contentWindow;
  const iframeDoc = iframeWindow.document;
  // Scroll to the absolute bottom of the iframe content
  iframeWindow.scrollTo(0, iframeDoc.body.scrollHeight);
})

2. Hide Redundant Content with Injected CSS #

Use JavaScript to inject custom styles into the iframe to hide unwanted elements (you can verify exact class names via your browser's dev tools by inspecting the SofaScore embed page):

.on("load", function() {
  const iframeWindow = this.contentWindow;
  const iframeDoc = iframeWindow.document;

  // Inject custom CSS to clean up the embed
  const customStyle = iframeDoc.createElement('style');
  customStyle.textContent = `
    // Hide top event header and unnecessary metadata
    .EventHeader__root, .EventInfo__status, .EventInfo__date, .EventInfo__competition {
      display: none !important;
    }
    // Ensure the momentum graph and team symbols take full available space
    .AttackMomentum__container {
      margin-top: 0 !important;
      padding: 0 !important;
    }
    // Hide the iframe's internal vertical scrollbar
    body {
      overflow-y: hidden !important;
    }
  `;
  iframeDoc.head.appendChild(customStyle);

  // Scroll to bottom after styles are applied to ensure correct positioning
  iframeWindow.scrollTo(0, iframeDoc.body.scrollHeight);
})

3. Adjust iFrame Dimensions and Hide External Scrollbar #

Set the iframe's overflow to hidden to hide its own scrollbar, and tweak the height to fit the trimmed content perfectly:

enter.append("iframe")
  .attr("src", d => valorparaiframe(d.id))
  .style("width", "100%")
  .style("height", "180px") // Adjust this value based on your layout needs
  .style("overflow", "hidden") // Hide the iframe's external scrollbar
  .style("border", "none") // Optional: remove default iframe border for cleaner look
  .on("load", function() {
    // ... scrolling and CSS injection code here ...
  });

4. Full Modified Update Function #

Here's how your update function should look with all changes integrated:

async function update() {
  let data = await d3.csv("./SofaScore_Live.csv");
  let update_5 = select_5.selectAll(".matches")
  .data(data,d=>d.id);
  update_5.exit().remove();

  // Enter new divs:
  const enter = update_5.enter()
  .append("div")
  .attr("class","matches");

  // Append the children to entered divs:
  enter.append("iframe")
  .attr("src",d => valorparaiframe(d.id))
  .style("width","100%")
  .style("height","180px")
  .style("overflow","hidden")
  .style("border","none")
  .on("load", function() {
    const iframeWindow = this.contentWindow;
    const iframeDoc = iframeWindow.document;

    // Inject custom CSS to clean up content
    const style = iframeDoc.createElement('style');
    style.textContent = `
      .EventHeader__root, .EventInfo__status, .EventInfo__date, .EventInfo__competition {
        display: none !important;
      }
      .AttackMomentum__container {
        margin-top: 0 !important;
      }
      body {
        overflow-y: hidden !important;
      }
    `;
    iframeDoc.head.appendChild(style);

    // Scroll to the bottom of the content
    iframeWindow.scrollTo(0, iframeDoc.body.scrollHeight);
  });
}

Key Notes: #

• Class Name Verification: SofaScore may update their embed's DOM structure over time, so double-check class names using your browser's dev tools if elements aren't hiding as expected.
• Height Tweaking: Adjust the height value of the iframe to ensure the momentum graph and team symbols fit without cutoff or extra empty space.
• Testing Environment: Make sure you're testing on a web server (not local file:// URLs) to avoid potential cross-origin issues with iframe content manipulation.

内容的提问来源于stack exchange，提问作者Digital Farmer